【JavaScript】Chart.jsのグラフを拡大縮小＆パンする方法

2024-04-16Chart.js,JavaScript

Chart.jsを使うとグラフを簡単に作成できますが、そのままではズームやグラフをスライドさせることができません。Chart.jsの機能を拡張するプラグインchartjs-plugin-zoomを使うと、グラフの一部を簡単な操作で拡大縮小またはパンできるようになります。このエントリでは、chartjs-plugin-zoomの使い方についてまとめてみました。

更新履歴
2021/06/17 記述を修正
2022/01/31 文体修正

このプラグインでできること

  1. マウスのホイールを使った拡大縮小
  2. グラフ上のドラッグした範囲を拡大
  3. グラフをドラッグして表示領域をスライド（パン操作）
  4. タッチパネルでピンチ操作をして拡大縮小

Chartjs-plugin-zoom公式

Chart.js自体の使い方はこちらのエントリーを参照。

chartjs-plugin-zoomの機能を使って、ズーム時の最小値を固定する例はこちらのエントリーを参照。

Reactでの使い方はこちらのエントリーを参照。

前準備

公式のドキュメントでは、npmでダウンロードする方法が載っています。しかし、Chart.jsと同様CDNにあるものを利用するのが簡単です。

Chart.jsのver.3.0.0以降を使用する場合は、chartjs-plugin-zoom@1.0.0を、ver.2.6.0～2.9.0の場合は、chartjs-plugin-zoom@0.7.7を使用する必要があります。

また、Hammer.jsというライブラリを先に読み込んでおくことで、ピンチ操作による拡大縮小にも対応する。

2021.6.17修正
公式ドキュメントにはそれらしい記述がないのだが、パン操作を有効にする場合にもHammer.jsが必要でした。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <!-- Chart.jsの読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
  <!-- パン操作・ピンチ操作に対応する場合はHammer.jsを先に読み込む -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <!-- Chartjs-plugin-zoomの読み込み -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.0.0/chartjs-plugin-zoom.min.js"></script>
  <title>Chartjs-plugin-zoomを使う</title>
</head>
<body>
  <!-- グラフを表示 -->
  <canvas id="chart"></canvas>
  <script type="text/javascript">
    <!-- グラフを表示する部分のコード -->
  </script>
</body>
</html>

拡大縮小の設定

拡大縮小の設定を有効にするには、生成したChartオブジェクトのoptions.plugins.zoomプロパティにオブジェクトを設定します。設定可能なオブジェクトはpan, zoom, limitsの3つです。

プロパティ設定内容設定可能な値
panパン操作に関する設定オブジェクト →
zoomズーム操作に関する設定オブジェクト →
limits操作可能範囲の制限オブジェクト →

パン操作に関する設定

パン操作は、マウスで動かしたい方向へドラッグすることで行うことができます。

方向を自由に動かしたい場合はmodeをxyにします。グラフ自体をドラッグして動かせるようにするにはoverScaleModeをundefinedに設定します。

なお、後述するドラッグによる拡大と操作がかぶるので、両方とも有効にするにはpan.modifierKeyを設定しておく必要があります。

プロパティ設定内容設定可能な値
enabledパン操作の可否true / false
modeパン操作を許可する方向'x' / 'y' / 'xy'
modifierKeyパン操作を有効にするための補助キーnull / 'shift' / 'alt' / 'ctrl' / 'meta'
overScaleModeパン操作を軸上に限定するかどうかundefined / 'x' / 'y' / 'xy'

ズーム操作に関する設定

ズーム操作は、マウスのホイールを用いた拡大縮小、グラフ上をドラッグすることによる拡大、タッチパネルのピンチ操作による拡大縮小の3通りの方法があります。

プロパティ設定内容設定可能な値
wheel.enabledホイール操作の可否true / false
wheel.modifierKeyホイール操作を有効にするための補助キーnull / 'shift' / 'alt' / 'ctrl' / 'meta'
drag.enabledドラッグによるズーム操作の可否true / false
pinch.enabledピンチ操作の可否true / false
modeズーム操作を許可する方向'x' / 'y' / 'xy'
overScaleModeズーム操作を軸上に限定するかどうかundefined / 'x' / 'y' / 'xy'

操作可能範囲の制限に関する設定

limits.xまたはlimits.yにプロパティを設定します。

プロパティ設定内容設定可能な値
min最大値値
max最小値値
minRange拡大時に表示可能な最小範囲値

Chartjs-zoom-pluginで設定可能なプロパティ一覧

Chartjs-zoom-pluginで設定可能なプロパティ一覧

よく使う操作

ズームのリセット

myChart.resetZoom();

軸の範囲の設定

myChart.zoomScale(軸, { min: 最小値, max: 最大値}); // 軸は'x'または'y'

最小値のほうが最大値より大きい場合は、うまく表示されないので注意が必要です。

実際の使用例

前エントリで作成した例にプラグインを導入し、ズームの変更とリセット機能も付けた。

See the Pen
Chartjs-plugin-zoomの使い方 by Izadori (@izadori)
on CodePen.

まとめ

Chartjsでグラフの拡大縮小を行うためのプラグインについて使い方をまとめてみました。設定可能なプロパティも数は多くないため、設定はそれほど難しくないと思います。

Chart.js,JavaScript

Posted by izadori