【JavaScript】【React】ReactでChart.jsとchartjs-plugin-zoomを使うには

2022-03-18Chart.js,JavaScript,React

ReactでChart.jsを使うための、Chart.jsをラップしたreact-chartjs-2というライブラリがあります。このreact-chartjs-2にchartjs-plugin-zoomを組み合わせて使う方法についてまとめてみました。

react-chartjs-2公式

環境

  • React@17.0.2
  • React-DOM@17.0.2
  • react-chartjs-2@3.0.3
  • Chart.js@3.3.2
  • Hammerjs@2.2.8
  • chartjs-plugin-zoom@1.0.1

これらをnpmないしyarnでインストールしておきます。React関連はインストールが面倒なのでcreate-react-appが簡単です。

react-chartjs-2を使う

react-chartjs-2では、Chart.jsで使用可能なグラフがそれぞれコンポーネント化されています。使用するには、必要なコンポーネントをimportしておきます。

import {
  Line,
  Bar,
  HorizontalBar,
  Scatter,
  Doughnut,
  Pie,
  Rader,
  Polar,
  Bubble,
  ... } from "react-chartjs-2";

chartjs-plugin-zoomの組み込み方法

Googleで検索して使用方法を探したものの、見つかった方法がいずれも古い方法のようで上記環境ではうまく動きませでした。そこでchartjs-plugin-zoomの公式ドキュメントに書いてある方法を試したところ、あっさりと組み込めました。

Chart.register()を使うので、react-chartjs-2の読み込みにimport Chartを加えるのを忘れずに。

import React from "react";
import { Chart, Scatter } from "react-chartjs-2";
import Hammer from "hammerjs";
import zoomPlugin from "chartjs-plugin-zoom";

Chart.register(zoomPlugin);

import Hammer from "hammerjs"はパン操作、ピンチ操作のために必要なもの。とくに組み込みのためのコードは不要です。なお、react-hammerjsというものもあるが、これは使えないようでした。

コンポーネントの使用方法

グラフコンポーネントを表示するには、importしたコンポーネントをJSXで記述します。dataとoptionsの2つをコンポーネントに渡す必要があります。

const data = {
  datasets: [ { ... }, ],
  ...
};

const options = {
  plugins: { ... },
  ...
};

const App = () => {
  return (
    <>
      <Scatter data={data} options={options} />
    </>
  );
};

dataとoptionsは、オリジナルのChart.jsにパラメータとして渡すChartオブジェクトのdataプロパティ、optionsプロパティとまったく同じ形式です。

そのため、chartjs-plugin-zoomの関連の設定も同様にoptions.plugins.zoomに与えます。ズーム操作時の動作を制御するonZoom等の設定もそのまま使えます。

Chart.js, chartjs-plugin-zoomsに設定するプロパティは、以下のエントリで説明しているので参照のこと。



実装例

一部のコードを以下に示します。実際のソースコードはGitHubのリポジトリにアップしたので、興味のある方はご参照ください。

import React from "react";
import ReactDOM from "react-dom";
import { Chart, Scatter } from "react-chartjs-2";
import Hammer from "hammerjs";
import zoomPlugin from "chartjs-plugin-zoom";

Chart.register(zoomPlugin);
// x軸,y軸の設定
const initialScale = {
  x: {
    type: "linear",
    display: true,
    position: "bottom",
    title: {
      display: true,
      text: "x",
      font: {
        size: 14,
      },
    },
  },
  y: {
    type: "linear",
    display: true,
    title: {
      display: true,
      text: "y",
      font: {
        size: 14,
      },
    },
  },
};

// chartjs-plugin-zoomの設定
const initialZoomOptions = {
  pan: {
    enabled: true,
    mode: "xy",
    overScaleMode: "xy",
  },
  zoom: {
    wheel: {
      enabled: true,
    },
    pinch: {
      enabled: true,
    },
    drag: {
      enabled: false,
    },
    mode: "xy",
    overScaleMode: "xy",
    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;
    },
  },
  limits: {
    x: {
      min: 0,
    },
    y: {
      min: 0,
    },
  },
};

// pointsは(x, y)データの配列
const initialState = {
  data: [
    datasets: {
      data: points,
    }
  ],
  options: {
    scales: initialScale,
    plugins: {
      title: initialTitle,
      legends: initialLegend,
      zoom: initialZoomOptions,
    },
  },
};

const App = () => {
  return (
    <>
      <Scatter data={initialState.data} options={initialState.options} />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

X軸、Y軸上でホイールによる拡大縮小、ドラッグによるパン操作ができています。

まとめ

ReactでChart.jsとchartjs-plugin-zoomを使う方法をまとめました。react-chartjs-2はChart.jsのラッパーに過ぎないので、Chart.jsでchartjs-plugin-zoomを使うのと同じ方法で問題なさそうです。

Chart.js,JavaScript,React

Posted by izadori