グラフ作成ライブラリー

グラフ作成のJavascriptライブラリーを探していましたが、「Javascript グラフ」で検索するとChart.jsしか出てきません。
おそらくこれ一択なのでしょう。
https://www.chartjs.org/

インストール

インストールですが、CDN等からchart.umd.jsをダウンロードしてそのまま貼れば使えるみたいです。
npmインストールでも良いみたいです。

Terminal
npm install chart.js

Javascript
<script src="./chart.umd.js"></script>

使い方

使い方は簡単です。
typeを、
棒グラフの場合は、bar、
折れ線グラフの場合は、line、
円グラフの場合は、pieに設定します。
あと、ドーナツとかあるみたいです。

Y軸を0から始めたい場合は、optionsで beginAtZero: true とします。

サンプルは英語ですが、とてもわかりやすいです。
https://www.chartjs.org/docs/latest/samples/information.html

html
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="./chart.umd.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

あと、使えそうなのが、Point Style で、それぞれのデータにpointStyleとpointRadiusを追加するだけです。
タイトルやアニメーションは使わないですよね。

JavaScript
{
    label: '2022',
    data: [140290,136994,138199,120693,120348,110854,116520,134441,125972],
    pointStyle: 'triangle',
    pointRadius: 6,
},

DEMO

データは厚労省の人口動態調査から取りました。
去年あたりから死亡数が増えているという記事を読んで、本当かなと思って調べてみたくなりました。
確かに、2021年は急に増えていますが、2020年に減った分がスライドしたとも考えられます。
2022年以降のデータが出てみないと分かりませので、追いかけてみたいと思います。

https://blog.c-blanc.com/demo/blog/9/y.html
https://blog.c-blanc.com/demo/blog/9/m.html

PROFILE

C:blanc: フリーランスのプログラマーです。

COMMENT
送信しました！コメントは承認後表示されます！
あと150文字

簡単にグラフが作れる Chart.js

Contents

グラフ作成ライブラリー

インストール

使い方

DEMO

PROFILE

COMMENT