まず、Chart.js日本語ドキュメントに沿って雛形を作成した状態
https://misc.0o0o.org/chartjs-doc-ja/getting-started/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// 作成したいチャートのタイプ
type: 'bar',
// データセットのデータ
data: {
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
datasets: [{
label: "初めてのデータセット",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// ここに設定オプションを書きます
options: {}
});
</script>
</body>
</html>※棒グラフの方が分かりやすいので
type: ‘line’をtype: ‘bar’に変更してあります。
棒グラフをクリックしたら
その棒グラフの値をアラート表示するようにします。
var ctx = document.getElementById('myChart').getContext('2d');の下に↓を追加
var context = document.getElementById('myChart');追加しなくても
var ctx = document.getElementById('myChart').getContext('2d');を
var ctx = document.getElementById('myChart');に変更してもOKな気がしますが。。。
その場合は、後述する
context.addEventListener( ‘click’, function( evt ){
も
ctx.addEventListener( ‘click’, function( evt ){
にする。
さらに↓の下に
options: {}
});↓を追加
context.addEventListener( 'click', function( evt ){
var item = chart.getElementAtEvent( evt );
if( item.length == 0 ){
return;
}
item = item[0];
var index = item._index;
var item_data = item._chart.config.data.datasets;
alert( item_data[0]['data'][index] );
});■全体ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var context = document.getElementById('myChart');
var chart = new Chart(ctx, {
// 作成したいチャートのタイプ
type: 'bar',
// データセットのデータ
data: {
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
datasets: [{
label: "初めてのデータセット",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
options: {}
});
context.addEventListener( 'click', function( evt ){
var item = chart.getElementAtEvent( evt );
if( item.length == 0 ){
return;
}
item = item[0];
var index = item._index;
var item_data = item._chart.config.data.datasets;
alert( item_data[0]['data'][index] );
});
</script>
</body>
</html>