IgxDataChart マウスオーバーしたデータポイントのデータを取得したい

マウスオーバーしたデータのデータポイントのデータを取得したい場合は、IgxDataChartのonSeriesMouseEnterイベントを使用してください。

このイベントは、シリーズの上にマウスオーバーすると発生します。イベントで渡されてくる引数ChartMouseEventArgsのseriesからシリーズの情報が、itemでマウスオーバーしているデータの情報（ただし、データをマウスオーバーしていない場合はnullが返ってきます）が取得できます。

<!-- app.component.html -->
<igx-data-chart ... (中略) ...
  (seriesMouseEnter)="onSeriesMouseEnter($event)">

  <!-- (中略) -->

</igx-data-chart>

// app.component.ts
public onSeriesMouseEnter(event: {sender: any, args: ChartMouseEventArgs})
{
  console.log(event);
  console.log(event.args.series); // シリーズの情報の取得
  console.log(event.args.item); // マウスオーバーしているデータの情報の取得
}

　

サンプル

　

APIリファレンス

• seriesMouseEnter
  • https://www.infragistics.com/products/ignite-ui-angular/api/docs/typescript/latest/classes/igxdatachartcomponent.html#seriesmouseenter