複数のグラフを1ページに表示する
折れ線グラフと棒グラフを1ページに描いてみる
複数のグラフ（折れ線グラフと棒グラフ）を1つのページに描く方法を確認します．具体的には，次の9行目から14行目のとおり，異なる id を付与した複数の <canvas> 要素を配置します．その後，それぞれの <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="myLineChart"></canvas>
</div>
<div style="width: 100%; height: 300px;">
<canvas id="myBarChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myLineChart').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: {
x: {
title: {
display: true,
text: '試験回数'
}
},
y: {
suggestedMin: 30,
suggestedMax: 75,
title: {
display: true,
text: '得点'
}
}
},
responsive: true,
maintainAspectRatio: false
}
});
</script>
<script>
var ctx = document.getElementById('myBarChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1回目", "2回目", "3回目", "4回目", "5回目"],
datasets: [{
label: "英語",
backgroundColor: 'rgba(255, 128, 128, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.7)',
borderWidth: 2,
data: [47, 50, 63, 57, 75]
},
{
label: "数学",
backgroundColor: 'rgba(128, 128, 255, 0.5)',
borderColor: 'rgba(0, 0, 255, 0.7)',
borderWidth: 2,
data: [63, 45, 72, 85, 64]
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: '試験回数'
},
stacked: true,
},
y: {
beginAtZero: true,
title: {
display: true,
text: '得点'
},
stacked: true,
}
},
responsive: true,
maintainAspectRatio: false
}
});
</script>
</body>
</html>