マウスオーバーしたデータのデータポイントのデータを取得したい場合は、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リファレンス

 

Tagged:

製品について

Ignite UI for Angular