IgxDataChart – ボタンクリックでズームイン/ズームアウトしたい

Ignite UI for Angular の IgxDataChart で、ボタンをクリックしたときにチャートをズームイン／ズームアウトする方法を紹介します。IgxDataChartComponent の zoomIn メソッドと zoomOut メソッドを、ボタンのクリックイベントから呼び出します。

IgxDataChart の設定

コードからチャートを操作するため、igx-data-chart にテンプレート参照変数 #chart を設定します。あわせて、水平方向と垂直方向のズームを有効にします。

<igx-data-chart
  #chart
  defaultInteraction="DragZoom"
  [isHorizontalZoomEnabled]="true"
  [isVerticalZoomEnabled]="true"
  ...
>
  <igx-category-x-axis ...></igx-category-x-axis>
  <igx-numeric-y-axis ...></igx-numeric-y-axis>
  <igx-line-series ...></igx-line-series>
</igx-data-chart>

zoomIn / zoomOut の使用

ズームイン用とズームアウト用のボタンを配置し、クリックイベントにそれぞれハンドラを割り当てます。

<button igxButton="contained" (click)="onZoomIn()">Zoom In</button>
<button igxButton="contained" (click)="onZoomOut()">Zoom Out</button>

コンポーネント側では、@ViewChild でチャートの参照を取得します。ハンドラ内で zoomIn メソッドと zoomOut メソッドを呼び出すと、チャートを拡大・縮小できます。引数にはズームする割合を指定します (サンプルでは 0.1)。

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

public onZoomIn(): void {
  this.chart.zoomIn(0.1);
}
public onZoomOut(): void {
  this.chart.zoomOut(0.1);
}

実行結果

「Zoom In」ボタンをクリックするとチャートが拡大され、「Zoom Out」ボタンをクリックすると縮小されます。

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

npm ci
npm run dev