折れ線グラフを表示させたい
山崎講師
Chart.jsというJavaScriptのライブラリを使用することで簡単に折れ線グラフを作成することができます。(Sample)
ポイントは以下の3点です。
① 8行目のリンクでCDNを読み込んでいる点
② 20行目以降でグラフのインスタンスを生成している点
③ 21行目でグラフの種類を指定している点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lineChartJs.html</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"
integrity="sha512-VMsZqo0ar06BMtg0tPsdgRADvl0kDHpTbugCBBrL55KmucH6hP9zWdLIWY//OTfMnzz6xWQRxQqsUFefwHuHyg=="
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<div style="width:500px">
<canvas id="temperature"></canvas>
</div>
<p><a href="#" onClick="window.close(); return false;">このウィンドウを閉じる</a></p>
<script>
let ctx = document.getElementById('temperature');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
datasets: [{
label: '最高気温',
data: [31, 33, 33, 32, 33, 35, 30],
borderColor: '#f88',
}, {
label: '最低気温',
data: [24, 25, 26, 25, 26, 26, 26],
borderColor: '#48f',
}],
},
options: {
y: {
min: 0,
max: 40,
},
},
});
</script>
</body>
</html>