Isse Teruhi

react-chartjs-2の使い方①

2024/08/22

Table of Contents

react-chartjs-2の使い方①

react-chartjs-2の使い方①

概要

「react-chartjs-2」はreactで「chart.js」というjavaScriptのグラフ描画ライブラリを利用するためのラッパーライブラリです。「chart.js」のv4,v3をサポートしています。また「chartjs-plugin-zoom」はグラフの一部を簡単の操作で拡大縮小、左右への移動ができるようになるchartjsの機能を拡張するプラグインです。

今回はreact-chartjs-2で折れ線グラフを描画し、chartjs-plugin-zoomを使いグラフの拡大縮小や左右への移動をできるようにしました。

Install

reactの開発プロジェクトで次のコマンドを実行します。

npm install react-chartjs-2 chart.js
npm install chartjs-plugin-zoom

react-chartjs-2を利用するためにはchart.jsも必要であることに気をつけてください。

描画できるグラフの種類

chart.jsと同じように、react-chartjs-2では次のようなグラフを描画できます。

Area Chart
Bar Chart
Bubble Chart
Doughnut and Pie Charts
Line Chart
Mixed Chart Types
Polar Area Chart
Radar Chart
Scatter Chart

実際にTypeScript上でreat-chartjs-2を使ってReactでも全ての種類で描画できることを確認しました。ただし、Chart.jsのコードをそのままコピペしても、動かない場合があります。そのため、注意が必要です。

グラフ表示

今回は単純な折れ線グラフを表示してみました。コンポーネントを次のように作成しました。

import { useRef } from 'react'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  ChartOptions,
  ChartData,
} from 'chart.js'
import { Line } from 'react-chartjs-2'
import zoomPlugin from 'chartjs-plugin-zoom'
import { ZoomPluginOptions } from 'chartjs-plugin-zoom/types/options'

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  zoomPlugin
)
interface LinegraphProps {
  graphData: ChartData<'line'>
  title: string
  xtext: string
  ytext: string
}
export default function Linegraph({
  graphData,
  title,
  xtext,
  ytext,
}: LinegraphProps) {
  const chartRef = useRef<ChartJS<'line', number[], string>>(null)

  const onResetZoom = () => {
    chartRef?.current?.resetZoom()
  }

  const onZoomPluse = () => {
    chartRef?.current?.zoom(1.1)
  }

  const onZoomMinus = () => {
    chartRef?.current?.zoom(0.9)
  }

  const onPanPluse = () => {
    chartRef?.current?.pan({ x: 100 }, undefined, 'default')
  }

  const onPanMinus = () => {
    chartRef?.current?.pan({ x: -100 }, undefined, 'default')
  }

  const zoomOptions: Partial<ZoomPluginOptions> = {
    zoom: {
      wheel: {
        enabled: true, 
      },
      pinch: {
        enabled: true, 
      },
      mode: 'x', 
    },
    pan: {
      enabled: true, 
      mode: 'x', 
    },
  }

  const options: ChartOptions<'line'> = {
    responsive: true,
    scales: {
      x: {
        display: true,
        title: {
          display: true,
          text: xtext,
        },
      },
      y: {
        title: {
          display: true,
          text: ytext,
        },
      },
    },
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: title,
      },
      zoom: zoomOptions, 
    },
  }

  return (
    <>
      <Line ref={chartRef} data={graphData} options={options} id="chart-key" />
      <button onClick={onResetZoom}>zoom reset</button>
      <button onClick={onZoomPluse}>zoom +10%</button>
      <button onClick={onZoomMinus}>zoom -10%</button>
      <button onClick={onPanPluse}>pan +100px</button>
      <button onClick={onPanMinus}>pan -100px</button>
    </>
  )
}

コードの説明

import

import { useRef } from 'react'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  ChartOptions,
  ChartData,
} from 'chart.js'
import { Line } from 'react-chartjs-2'
import zoomPlugin from 'chartjs-plugin-zoom'
import { ZoomPluginOptions } from 'chartjs-plugin-zoom/types/options'

CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legendなどはchart.jsのモジュールで、各種チャートの設定に使用されます。
zoomPluginは、chartjs-plugin-zoomからインポートされるプラグインで、チャートのズームやパンを可能にします。
Lineはreact-chartjs-2からインポートされ、折れ線グラフを描画するために使用されます。

ChartJS.register()

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  zoomPlugin
)

ChartJS.registerを使って、必要なスケール、エレメント、タイトル、ツールチップ、レジェンド、ズームプラグインなどを登録します。これにより、これらの機能がチャートで利用可能になります。

LinegraphProps

export default function Linegraph({
  graphData,
  title,
  xtext,
  ytext,
}: LinegraphProps) {
  const chartRef = useRef<ChartJS<'line', number[], string>>(null)

このインターフェースは、Linegraphコンポーネントに渡されるプロパティを定義しています。
graphDataはグラフのデータを含み、titleはグラフのタイトル、xtextとytextはx軸とy軸のラベルです。

操作関数と各種オプション

  const onResetZoom = () => {
    chartRef?.current?.resetZoom()
  }

  const onZoomPluse = () => {
    chartRef?.current?.zoom(1.1)
  }

  const onZoomMinus = () => {
    chartRef?.current?.zoom(0.9)
  }

  const onPanPluse = () => {
    chartRef?.current?.pan({ x: 100 }, undefined, 'default')
  }

  const onPanMinus = () => {
    chartRef?.current?.pan({ x: -100 }, undefined, 'default')
  }

  const zoomOptions: Partial<ZoomPluginOptions> = {
    zoom: {
      wheel: {
        enabled: true, 
      },
      pinch: {
        enabled: true, 
      },
      mode: 'x', 
    },
    pan: {
      enabled: true, 
      mode: 'x', 
    },
  }

  const options: ChartOptions<'line'> = {
    responsive: true,
    scales: {
      x: {
        display: true,
        title: {
          display: true,
          text: xtext,
        },
      },
      y: {
        title: {
          display: true,
          text: ytext,
        },
      },
    },
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: title,
      },
      zoom: zoomOptions, 
    },
  }

1～20行目では、チャートのズームやパンを操作するためのボタンを定義しています。resetZoomはズームのリセットを行い、zoomはズームイン・アウト、panはチャートのパン操作を行います。
zoomOptionsでは、ズームやパンの動作と制限を設定しています。ズームはホイールやピンチ操作（マウスホイール操作）で行うことができ、x軸のみのズームとパンを許可しています。また、リミットを設定することで操作可能な範囲を制限できます。次のようなプロパティが存在し、それぞれの設定が可能です。

パン操作

プロパティ名	設定内容
`enabled`	パン操作の有効化
`mode`	パンの方向
`modifierKey`	マウスでパンする際の修飾キーの決定
`overScaleMode`	パン操作を軸上にするか

ズーム操作

プロパティ名	設定内容
`wheel.enabled`	ホイール操作の有効化
`wheel.modifierKey`	マウスでズームする際の修飾キーの決定
`drag.enabled`	ドラッグによるズーム操作の可否
`pinch.enabled`	ピンチ操作の可否
`mode`	ズーム操作の方向
`overScaleMode`	ホイール操作を軸上にするか

操作可能範囲

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

詳細はこちらをご確認ください。 Chartjs-zoom-pluginで設定可能なプロパティ

optionsではチャートのオプションを設定します。軸のラベル、レスポンシブ設定、レジェンドの位置、タイトル、ズームオプションなどを指定します。次のようなオプションがあります。

プロパティ名	説明
`responsive`	グラフがコンテナのサイズに自動的に適応するかどうかを設定します。デフォルトは`true`。
`maintainAspectRatio`	グラフの縦横比を保持するかどうかを設定します。デフォルトは`true`で、無効にするとグラフがコンテナのサイズに完全にフィットします。
`aspectRatio`	グラフのデフォルトの縦横比を指定します。デフォルトは`2`（幅2に対して高さ1）です。
`devicePixelRatio`	描画時に使用されるデバイスのピクセル比を指定します。高解像度ディスプレイで鮮明なグラフを表示するために使用されます。デフォルトは`window.devicePixelRatio`。
`locale`	グラフに使用するロケールを設定します。例えば、日付や数値のフォーマットに影響します。デフォルトはブラウザのロケール設定に従います。
`events`	チャートがリッスンするイベントのリストを指定します。例えば`mousemove`、`click`、`touchstart`などです。
`onClick`	チャート内でクリックイベントが発生したときに呼び出される関数を指定します。
`onResize`	チャートがリサイズされたときに呼び出される関数を指定します。
`animation`	グラフの表示時に使用されるアニメーションの設定を行います。`duration`や`easing`などのオプションがあります。
`hover`	ホバー時の設定を行います。`mode`や`intersect`などのオプションがあります。
`title`	チャートに表示されるタイトルの設定を行います。`display`、`text`、`position`などのオプションがあります。

詳細はこちらでご確認ください。

Options | Chart.js

Open source HTML5 Charts for your website

www.chartjs.org

コンポーネントのレンダリング

return (
    <>
      <Line ref={chartRef} data={graphData} options={options} id="chart-key" />
      <button onClick={onResetZoom}>zoom reset</button>
      <button onClick={onZoomPluse}>zoom +10%</button>
      <button onClick={onZoomMinus}>zoom -10%</button>
      <button onClick={onPanPluse}>pan +100px</button>
      <button onClick={onPanMinus}>pan -100px</button>
    </>
  )

Lineコンポーネントを使用して、チャートを描画します。また、ズームやパンの操作ボタンを追加しています。

コンポーネントの使い方

import Linegraph from './components/Linegraph.tsx'
// ...
<Linegraph title="sample graph" xtext="x軸のテキスト" ytext="y軸のテキスト" graphData={samplegraphDatas}/>

graphDataにChartData<'line'>形式のデータを、xtextとytextに軸のラベル名を、titleにチャートのタイトルを設定する必要があります。

このコンポーネントを使うと具体的に次のような折れ線グラフを表示することができます。

以上になります。思っていたより簡単に実装できました。

参考にした記事・文献

Isse Teruhi

react-chartjs-2の使い方③

#react-chartjs-2 #chartjs #TanStackRouter

Isse Teruhi

2024/08/30

react-chartjs-2の使い方②

#react-chartjs-2 #chartjs #chartjs-chart-boxplot

Isse Teruhi

2024/08/29

react-chartjs-2の使い方①

react-chartjs-2の使い方①

概要

Install

描画できるグラフの種類

グラフ表示

コードの説明

import

ChartJS.register()

LinegraphProps

操作関数と各種オプション

パン操作

ズーム操作

操作可能範囲

コンポーネントのレンダリング

コンポーネントの使い方

参考にした記事・文献

Isse Teruhi

Related Posts