Chart.js の基礎

Chart.js は、ウェブページに様々な種類のグラフを簡単に実装できる、人気のある JavaScript ライブラリです。シンプルで使いやすく、豊富なカスタマイズオプションを備えているため、データ可視化の幅広いニーズに対応できます。この記事では、Chart.js の基本的な使い方を解説します。

1. Chart.js のインストール

まずは、Chart.js をプロジェクトにインストールします。npm や yarn を使用できます。

npm install chart.js

2. キャンバスの準備

Chart.js は、HTML の <canvas> 要素にグラフを描画します。<canvas> 要素を HTML に追加します。

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

3. チャートの作成

JavaScript で Chart.js を使用して、チャートを作成します。

// Chart.js をインポート
import Chart from 'chart.js';

// キャンバスを取得
const canvas = document.getElementById('myChart');

// チャートのコンテキストを取得
const ctx = canvas.getContext('2d');

// チャートのデータ
const data = {
  labels: ['月', '火', '水', '木', '金'],
  datasets: [{
    label: '売上',
    data: [10, 20, 30, 40, 50],
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1
  }]
};

// チャートのオプション
const options = {
  responsive: true,
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

// 折れ線グラフを作成
const myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

このコードでは、labels にグラフの軸ラベル、datasets にデータセットを定義しています。datasets 内の data には、それぞれのラベルに対応する値を配列で指定します。

type には、グラフの種類を指定します。Chart.js は、折れ線グラフ (line)、棒グラフ (bar)、円グラフ (pie)、ドーナツグラフ (doughnut) など、様々な種類のグラフに対応しています。

4. オプションの設定

options オブジェクトを使って、グラフの外観や挙動をカスタマイズできます。

• responsive: 画面サイズに合わせて自動調整するか設定します
• scales: 軸の範囲やラベルなどを設定します
• legend: 凡例の設定を行います
• title: グラフのタイトルを設定します

5. データの更新

update() メソッドを使って、チャートのデータを更新できます。

// データを更新
myChart.data.datasets[0].data = [60, 70, 80, 90, 100];

// チャートを更新
myChart.update();

まとめ

プロジェクトで使用する機会がありましたので使い方をまとめてみました。
これ一つで色々なグラフの生成ができるので便利ですね。
実際に色々と作成してみたいと思います。