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>

日本人の総人口

日本の人口の推移です。このグラフを見ると、2008年ごろがピークでしょうか。
その後は、人口が減っていっていますね

都道府県別の人口

都道府県別の人口です。
これを見ると、東京都、千葉県、神奈川県、大阪府、兵庫県に人口が集中しているのがわかりますね。

コメントを書き込む

メールアドレスが公開されることはありません。


カテゴリ



プロフィール

運営者 HONDA

福島県出身、在住

広告

このブログで契約しているレンタルサーバです。