折れ線グラフ
まず，折れ線グラフの作成からスタートしてみよう．
折れ線グラフを描いてみる
まず，HTMLのひな形を作成し，<div> 要素の中に id を指定した <canvas> 要素を配置します．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js</title>
</head>
<body>
<div style="width: 100%; height: 300px;">
<canvas id="myChart"></canvas>
</div>
</body>
</html>
次に，Chart.js のスクリプトを </body> の直前で読み込みます．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js</title>
</head>
<body>
<div style="width: 100%; height: 300px;">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>
さらにスクリプトを追加します．15行目では id が myChart である HTML 要素（つまり，10行目の canvas 要素）を取得して，2Dのコンテクストを生成しています．16行目で，Chart クラスのインスタンス（chartオブジェクト）を生成しています．ここで，{} は設定オブジェクトです．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js</title>
</head>
<body>
<div style="width: 100%; height: 300px;">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {});
</script>
</body>
</html>
上のコードの設定オブジェクト {} の内側にチャートの種類やデータセット，オプションを次のとおり指定します．データセットの書き方はこのあたりを参考にすると良いでしょう．このコードによって簡単な折れ線グラフを出力することができます．なお，凡例をクリックすると，項目の表示／非表示を切り替えられることを確認してください．また，縦軸の範囲も自動的に設定されていることにも注意してください．
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js</title>
</head>
<body>
<div style="width: 100%; height: 300px;">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
datasets: [{
label: "英語",
backgroundColor: 'rgba(255, 0, 0, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.5)',
data: [47, 50, 63, 57, 75],
},
{
label: "数学",
backgroundColor: 'rgba(0, 0, 255, 0.5)',
borderColor: 'rgba(0, 0, 255, 0.5)',
data: [63, 45, 72, 85, 64],
}]
},
options: {}
});
</script>
</body>
</html>
縦軸を0から始める
上のグラフではオプションを一切設定していないため，縦軸の範囲が自動的に設定されていました．縦軸の始点を0に固定したい場合は，オプションで beginAtoZero を有効にします．
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
datasets: [{
label: "英語",
backgroundColor: 'rgba(255, 0, 0, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.5)',
data: [47, 50, 63, 57, 75]
},
{
label: "数学",
backgroundColor: 'rgba(0, 0, 255, 0.5)',
borderColor: 'rgba(0, 0, 255, 0.5)',
data: [63, 45, 72, 85, 64]
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
縦軸の範囲を指定する
次に，縦軸の範囲を指定する方法を確認します．例えば suggestedMin や suggestedMax を使って縦軸の範囲を30から75に設定してみます．しかしながら，数学の最大値が85であることから，数学の項目が表示されている場合には，30から90（または85）という範囲に変更されることにも注意してください．その他のオプションもあるので，詳細はこちらで確認してください．
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
datasets: [{
label: "英語",
backgroundColor: 'rgba(255, 0, 0, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.5)',
data: [47, 50, 63, 57, 75]
},
{
label: "数学",
backgroundColor: 'rgba(0, 0, 255, 0.5)',
borderColor: 'rgba(0, 0, 255, 0.5)',
data: [63, 45, 72, 85, 64]
}]
},
options: {
scales: {
y: {
suggestedMin: 30,
suggestedMax: 75
}
}
}
});
</script>
項目を非表示にする
初期状態において特定の項目を非表示にしています．具体的には数学を非表示にしてみます．
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
datasets: [{
label: "英語",
backgroundColor: 'rgba(255, 0, 0, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.5)',
data: [47, 50, 63, 57, 75]
},
{
label: "数学",
backgroundColor: 'rgba(0, 0, 255, 0.5)',
borderColor: 'rgba(0, 0, 255, 0.5)',
data: [63, 45, 72, 85, 64],
hidden: true
}]
},
options: {
scales: {
y: {
suggestedMin: 30,
suggestedMax: 75
}
}
}
});
</script>
軸ラベルを表示する
軸ラベルは次のコードで設定することができます．
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
datasets: [{
label: "英語",
backgroundColor: 'rgba(255, 0, 0, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.5)',
data: [47, 50, 63, 57, 75]
},
{
label: "数学",
backgroundColor: 'rgba(0, 0, 255, 0.5)',
borderColor: 'rgba(0, 0, 255, 0.5)',
data: [63, 45, 72, 85, 64],
// hidden: true
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: '試験回数'
}
},
y: {
suggestedMin: 30,
suggestedMax: 75,
title: {
display: true,
text: '得点'
}
}
}
}
});
</script>
レスポンシブに
これまで作成したグラフは高さの最大値が 300px で，アスペクト比（縦横比）は常に横2に対して縦が1でした．つまり，Web ブラウザの画面幅（厳密には <canvas> の親要素である <div> の幅）が 600px 以上になると，グラフの大きさは 600px × 300px で固定されます．また，画面幅が 600px を下回ると，アスペクト比 2:1 を保ったままグラフが縮小されるはずです．
グラフが常に画面の幅いっぱいに表示させることもできます．そのためには，maintainAspectRatio を false にして，2:1の制約を解除します．一方で，responsive は規定値が true であることから，この行は省略しても構いません．このコードではグラフの高さが常に 300px で固定され，幅は画面の幅を最大限に利用していることに注意してください．
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
datasets: [{
label: "英語",
backgroundColor: 'rgba(255, 0, 0, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.5)',
data: [47, 50, 63, 57, 75]
},
{
label: "数学",
backgroundColor: 'rgba(0, 0, 255, 0.5)',
borderColor: 'rgba(0, 0, 255, 0.5)',
data: [63, 45, 72, 85, 64]
// hidden: true,
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: '試験回数'
}
},
y: {
suggestedMin: 30,
suggestedMax: 75,
title: {
display: true,
text: '得点'
}
}
},
responsive: true, // 規定値なので省略可能
maintainAspectRatio: false // アスペクト比の標準は2:1
}
});
</script>