IgrDataChart – ボタンクリックでズームをリセットしたい

  • 公開日:
  • 最終更新日:

IgrDataChart でドラッグズームした後、ボタンクリックでズームを元の表示に戻したい場合は、IgrDataChart の resetZoom メソッドを使用します。本記事では、ref 経由でチャートの resetZoom メソッドを呼び出し、ボタンクリックでズームをリセットする方法を紹介します。

IgrDataChart の設定

useRef でチャートへの参照を作成し、IgrDataChart の ref に設定します。ズーム操作は defaultInteraction を DragZoom にし、isHorizontalZoomEnabled と isVerticalZoomEnabled を有効にすることで、水平・垂直方向ともにドラッグでズームできるようにします。

const chartRef = useRef<IgrDataChart>(null);
<IgrDataChart
  ref={chartRef}
  dataSource={sampleData}
  defaultInteraction="DragZoom"
  isHorizontalZoomEnabled={true}
  isVerticalZoomEnabled={true}
  ...
>
  <IgrCategoryXAxis name="xAxis" ... />
  <IgrNumericYAxis name="yAxis" ... />
  <IgrLineSeries name="europeSeries" ... />
  ...
</IgrDataChart>

resetZoom メソッドの使用

ボタンのクリックイベントで、chartRef.current の resetZoom メソッドを呼び出します。これにより、ズームやパンされたチャートの表示が初期状態に戻ります。

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

<IgrButton onClick={handleResetZoom}>Zoom Reset</IgrButton>

実行結果

チャートをドラッグしてズームした後に「Zoom Reset」ボタンをクリックすると、ズームがリセットされ、チャート全体が表示される状態に戻ります。

サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev
Tagged: