「Webアプリケーション 〜チャート(グラフ)ライブラリを使用してみて〜」

チャート(グラフ)ライブラリを使用する場合、大前提として表示したいグラフ種類に対応している必要があります。

一般的な棒グラフ／折れ線グラフ／円グラフくらいであれば、ほとんどのライブラリが対応していますが、 使用頻度が少ないグラフの場合はライブラリによって対応状況が異なりますので事前確認が必須です。

表示したグラフデータをユーザーがどのような視点で見たいか？によりますが、よくある要望として次のような機能があります。 機能を兼ね備えているかはライブラリによって様々ですので、グラフを表示できるかだけでなく、 ユーザーがどのような操作をするか？その操作に関する機能を持っているか？はライブラリ選定時には確認しておいた方がよいポイントかと思います。

• 拡大・縮小(ズーム機能)
  ⇒マウスのドラッグ操作等で、指定範囲をズーム表示できる機能。
  
  
• データ値表示
  ⇒折れ線の点にデータ値を表示させる、もしくはカーソルを当てると現在値を表示できる機能。
  
  
• 複合グラフ
  ⇒スケールが異なる同じ種類のグラフ、もしくは折れ線グラフと棒グラフなど、重ねて表示する機能。

当然と言えば当然ですが、大量データを扱う場合はチャート(グラフ)のデータ数に応じて表示速度も遅くなってきます。
特に収集したデータをリアルタイムで表示したいといった場合などは、表示速度も重要な部分となってきます。
また、HTMLにチャート(グラフ)を表示する方法は、Canvasを使用する方法とSVGを使用する方法があり、 それぞれ次のような特徴がありますので、各ライブラリがどちらの方法を採用しているか確認しておくのがよいです。

• Canvas
  Canvasはピクセル単位で描画が行われ、ビットマップ画像のように扱われます。
  高速な描画が可能で、アニメーションやリアルタイムでの表示更新する場合など大量データポイントを扱う場合に適しています。
  ただし、解像度に依存するため、拡大すると画質が劣化することがあります。
  またCanvas内に描画された要素にDOMを持たないため、CSSで直接見た目をカスタマイズするといったことはできません。
  
  
• SVG
  SVGはベクターグラフィックが使用され、解像度に依存せずどのサイズでも高品質で表示されます。
  また、SVG内にはDOMを持っているため、特定部分だけCSSによって見た目をカスタマイズするなど可能です。
  ただし、複雑なグラフィックや大量の要素を描画する場合、パフォーマンスが低下することがあります。
  

まとめると、Canvasは高速な描画で大量のデータポイントやリアルタイム更新が求められる場合に向いていて、 SVGは解像度に依存しない拡大・縮小を行いたい場合、CSSやJavaScriptで見た目をカスタマイズしたい場合に向いています。

なお、どちらにしても極端にデータが多い場合はどうしても処理時間はかかりますので、 全てのデータを表示するのではなく数点ずつ表示とする、間引き表示の機能があるライブラリを選定するというのも1つの方法かと思います。

グリッドライブラリをご紹介した際にも挙げましたが、 ライブラリを使用する際はそのライブラリの使用方法を理解するためには取扱説明書・公式HPなどのドキュメントが必要になってきます。
通常、プログラムを作成する上ではライブラリの関数、プロパティ、イベントの情報が必要になると思いますが、 説明と共にサンプルコード、実際の画面イメージなどが記載されていると理解しやすいため、 公式ドキュメントに限らず、対象のライブラリの紹介ページなども含めドキュメントが豊富か？も選定する際の1つの判断材料としてよいのではないかと思います。 なお、最近では生成AIも普及してきており、ちょっとした使い方くらいであればAIにサンプルを作成してもらうというのも有効です。

Chart.jsを使用するにあたり、JavaScriptが必要となります。
使用する環境によりますが、npmやNuGetでのインストールを行い、JavaScriptファイルの読み込みを行います。
また、インターネット接続可能であれば、CDNを介して下記のようにJavaScriptを取得することも可能です。

■JavaScript

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

チャート(グラフ)を表示するタグとして<canvas>タグを用意します。

■Html

<canvas id="chart"></canvas>

スクリプトにてChartをnewして作成する際に、<canvas>タグのエレメントオブジェクトを第一引数に渡すことで、指定した<canvas>タグにチャート(グラフ)が表示されます。第二引数にはグラフ種類や表示に関するオプションを指定することが可能です。

■JavaScript

// 表示データセット
var data = {
  labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // X軸のラベル
  datasets: [{
    label: '平均気温 (℃)', 				// データセットのラベル
    data: [5, 6, 9, 14, 18, 22, 25, 27, 23, 17, 11, 6], 	// データポイント
    borderColor: 'rgba(75, 192, 192, 1)', 		// 線の色
  }]
};
// グラフ表示オプション
var options = {
  scales: {
    x: {
      beginAtZero: false	// X軸の開始点を0にしない
    },
    y: {
      beginAtZero: true	// Y軸の開始点を0にする
    }
  }
};

// canvasのコンテキスト取得
const ctx = document.getElementById('chart').getContext('2d');

// 折れ線グラフ表示
const LineChart = new Chart(ctx, {
  type: 'line', 		// グラフの種類
  data: data, 		// 表示データセット
  options: options, 	// グラフ表示オプション
});

実際に上記をWebブラウザ上で表示してみると下記のように折れ線グラフの画面が表示されます。

図2. 折れ線グラフ

折れ線グラフ以外にChart.jsではグラフを作成する際にChartをnewして作成する際に、typeにグラフ種類を指定することで様々なグラフを表示することが可能です。

■JavaScript(棒グラフ例)

// 表示データセット
var data = {
  labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  datasets: [{
      label: '月別売上', 						// データセットのラベル
      data: [120, 150, 180, 200, 170, 190, 220, 240, 210, 230, 250, 270], 	// データポイント
      backgroundColor: 'rgba(75, 192, 192, 0.2)', 			// 棒グラフの背景色
      borderColor: 'rgba(75, 192, 192, 1)', 				// 線の色
      borderWidth: 1						// 線の幅
  }]
};

// グラフ表示オプション
var options = {
  responsive: true, 	// レスポンシブ対応 有効化
  plugins: {
    tooltip: {
      enabled: true	// ツールチップ 有効化
    }
  }
};
  
// canvasのコンテキスト取得
var ctx = document.getElementById('chart').getContext('2d');

// 棒グラフ表示
var BarChart = new Chart(ctx, {
    type: 'bar', 		// グラフの種類
    data: data, 		// 表示データセット
    options: options, 	// グラフ表示オプション
});

図3. 棒グラフ

■JavaScript(円(ドーナツ)グラフ例)

// 表示データセット
var data = {
    labels: ['売上1', '売上2', '売上3'],
    datasets: [{
        data: [30, 50, 20],  // データポイント
        backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'], // 円グラフの背景色
        borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)']            // 線の色
    }]
};

// グラフ表示オプション
var options = {
    plugins: {
        legend: {
            position: 'top', 	// 凡例の位置を上部に設定
        },
        tooltip: {
            enabled: true	// ツールチップ 有効化
        }
    }
};

// canvasのコンテキスト取得
var ctx = document.getElementById('chart').getContext('2d');

// 円(ドーナツ)グラフ表示
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut', 	// グラフの種類
    data: data, 		// 表示データセット
    options: options, 	// グラフ表示オプション
});

図4. 円(ドーナツ)グラフ

Chart.jsでは基本的なオプション以外に、プラグインという形で機能を拡張できる方法が用意されています。

• chartjs-plugin-datalabels
  グラフ内のデータポイントにラベルを表示するためのプラグインです。
  (https://chartjs-plugin-datalabels.netlify.app/)
• chartjs-plugin-annotation
  グラフに注釈（ライン、ボックス、ラベルなど）を追加するためのプラグインです。
  (https://www.chartjs.org/chartjs-plugin-annotation/latest/)
• chartjs-plugin-streaming
  リアルタイムデータのストリーミング表示をサポートするプラグインです。
  (https://nagix.github.io/chartjs-plugin-streaming/latest/)
• chartjs-plugin-zoom
  グラフのズーム(拡大、縮小)とパン(グラフの一部を移動する機能)を追加するプラグインです。
  (https://www.chartjs.org/chartjs-plugin-zoom/latest/)
  

例えば下記のように『chartjs-plugin-zoom』を使用してズーム機能を有効化するとマウスホイール操作にて拡大・縮小、ドラッグ操作にてグラフの移動が可能となります。

■JavaScript(必要パッケージ)

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.2.0/chartjs-plugin-zoom.min.js"></script>

■Html

<!-- リセットボタン -->
<button id="zoom-reset" onclick="zoomResetFunc()">リセット</button>
<!-- グラフ表示canvas -->
<canvas id="chart" width="400" height="200"></canvas>

■JavaScript(ズームプラグイン 有効化)

// 表示データセット
var data = {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 
    datasets: [{
      label: '平均気温（℃）',
      data: [5, 6, 9, 14, 18, 22, 25, 27, 23, 17, 11, 6, 5, 6, 9, 14, 18, 22, 25, 27, 23, 17, 11, 6],
      borderColor: 'rgba(75, 192, 192, 1)',
    }]
  };

// グラフ表示オプション
var options = {
  plugins: {
    zoom: {
      pan: {
        enabled: true,
        mode: "y"		// Y軸でパン 有効化
      },
      zoom: {
        wheel: {
          enabled: true, 	// マウスホイール操作でのズーム 有効化
        },
        pinch: {
          enabled: true	// ピンチ操作でのズーム 有効化
        },
        mode: 'y', 		// Y軸でズーム 有効化
      }
    }
  }
};

// canvasのコンテキスト取得
const ctx = document.getElementById('chart').getContext('2d');

// 折れ線グラフ表示(ズーム機能有効化)
const LineChart = new Chart(ctx, {
  type: 'line', 	// グラフの種類
  data: data, 	// 表示データセット
  options: options, 	// グラフ表示オプション
});

// リセットボタン クリックイベントハンドラ
function zoomResetFunc() {
  LineChart.resetZoom();
}

図5. ズームプラグイン有効化