【JavaScript】Chart.jsのズーム時に最小値を常に固定するには

2024-04-16Chart.js,JavaScript,スペクトル

Chart.jsは、chartjs-plugin-zoomを組み合わせることによって、グラフのズームやパン操作を実現できます。マウスのホイールを回転させてズームさせると、マウスカーソルを中心とした位置でズームされて最大値と最小値も変化します。

分光スペクトルやクロマトグラムのようなグラフでは、ベースライン付近のピークを確認するために拡大することもあり、その際にY軸（強度）の最小値を0に固定したいときがあります。これをchartjs-plugin-zoomで実現する方法についてまとめてみました。

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

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

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

コールバック関数の設定

chartjs-plugin-zoomでは、ズーム時、パン操作時にイベントが発生します。この時、用意されているイベントのプロパティにコールバック関数を設定しておくことで、コールバック関数が呼び出されます。

ズーム操作のイベント

ズーム操作のイベントプロパティをoptions.plugins.zoom.zoomに設定します。コールバック関数の引数は決まっているので、公式ドキュメントを確認してください。

プロパティ呼び出されるタイミング
onZoomズーム操作中
onZoomStartズーム操作の開始時
onZoomCompletedズーム操作の終了時
onZoomRejectedズーム操作の失敗時

最後のonZoomRejectedは、修飾キーが設定されている（options.plugins.zoom.zoom.wheel.modifierKeyに値が設定されている）場合に、そのキーが離された時に呼び出されるイベントです。

最小値の固定方法

ズーム操作中に最小値を固定するには、onZoomプロパティにコールバック関数を設定するだけです。この中で、chart.config.options.scales.y.minに0を設定します。設定後、再描画のためにchart.update()を呼び出す必要があります。

この時グラフが再描画されるため、アニメーションが有効になっていると毎回アニメーションが入ります。そのため不自然な表示となってしまいます。対策として、update()の前で一度アニメーションをOFFにし、update()後に設定を復帰させておきます。

onZoomに設定するコールバック関数の例を以下に示します。

onZoom: ({chart}) => {
  const animation = chart.config.options.animation;
  // アニメーションを一時OFFにする
  chart.config.options.animation = false;
  // Y軸の最小値を0にする
  chart.config.options.scales.y.min = 0;
  // 画面を更新する
  chart.update();
  // アニメーションの設定を元に戻す
  chart.config.options.animation = animation;
},

実際の使用例

前エントリで作成した例にonZoomプロパティを追加してみました。Y軸上でマウスのホイールを回すとズームしますが、最小値が常に0に固定されていることがわかります。

See the Pen
Y軸の最小値を0で固定する by Izadori (@izadori)
on CodePen.

Chart.js,JavaScript

Posted by izadori