Chart.jsの導入方法

Chart.jsとは

Chart.jsはJavaScriptのグラフ描画ライブラリ。棒グラフ・折れ線グラフ・円グラフなど様々な種類のグラフをcanvas要素に描画できる。

CDNでの導入

以下の1行をHTMLに追加するだけで使える。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

グラフの描画

描画先となる <canvas> 要素をHTMLに用意する。

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

JavaScriptで Chart オブジェクトを生成してグラフを描画する。

const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月'],
    datasets: [{
      label: '勉強時間（時間）',
      data: [12, 18, 15, 22, 30],
      backgroundColor: '#4e8ef7'
    }]
  },
  options: {
    scales: {
      y: { beginAtZero: true }
    }
  }
});

実際の表示

上記のコードで描画されるグラフはこちら。

まとめ

CDNの読み込み1行と、canvas要素・数行のJSだけでグラフが表示できる。データを差し替えるだけで様々な用途に使えるので、手軽さの割に使い勝手がよいライブラリだと思う。