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

IgxDataChart でドラッグ操作によりズームしたあと、ボタンをクリックしてズームを初期状態に戻す方法を紹介します。

IgxDataChart の設定

defaultInteraction プロパティに DragZoom を設定すると、ドラッグ操作でズームできます。ズームの方向は isHorizontalZoomEnabled プロパティと isVerticalZoomEnabled プロパティで有効にします。また、テンプレート参照変数 #chart を付けて、コンポーネント クラスからチャートを参照できるようにします。

<igx-data-chart
  #chart
  defaultInteraction="DragZoom"
  [isHorizontalZoomEnabled]="true"
  [isVerticalZoomEnabled]="true"
  ...
>
  ...
</igx-data-chart>

resetZoom メソッドの使用

ボタンのクリックイベントでハンドラを呼び出します。

<button igxButton="contained" (click)="onResetZoom()">Zoom Reset</button>

@ViewChild で取得した IgxDataChartComponent の resetZoom メソッドを呼び出すと、ズームが初期状態に戻ります。

@ViewChild('chart', { static: true })
public chart!: IgxDataChartComponent;

public onResetZoom(): void {
  this.chart.resetZoom();
}

実行結果

チャートをドラッグしてズームしたあと、「Zoom Reset」ボタンをクリックすると、ズームが初期状態に戻ります。

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

npm ci
npm run dev