2022/05/22
Chart.jsでサイトにグラフを表示する方法
サイトにグラフを表示してみたいと思い、調べてみました。
一番評価が高かったのが、JavaScriptのライブラリ Chart.js でしたので、ひとまず試してみました。
サンプルのグラフ
Chart.jsを使用するために、CDNに公開されているjsファイルを読み込みます。
サンプルのソースコード
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<div style="width:400px">
<canvas id="samplechart"></canvas>
</div>
<script>
var ctx = document.getElementById('samplechart');
var sampleChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'Red',
data: [20, 35, 40, 30, 45, 35, 20],
borderColor: '#f88',
}, {
label: 'Green',
data: [20, 15, 30, 25, 30, 50, 35],
borderColor: '#484',
}, {
label: 'Blue',
data: [30, 25, 10, 5, 25, 60, 20],
borderColor: '#48f',
}],
},
});
</script>
日本人の総人口
日本の人口の推移です。このグラフを見ると、２００８年ごろがピークでしょうか。
その後は、人口が減っていっていますね
都道府県別の人口
都道府県別の人口です。
これを見ると、東京都、千葉県、神奈川県、大阪府、兵庫県に人口が集中しているのがわかりますね。
