Angular 中的 ChartJs 事件

如何解决Angular 中的 ChartJs 事件

我正在制作一个图表，我需要点击每个数据标签（我在下图中指出了这一点），然后显示所点击数据的特定图表。

Graph

我的问题是我无法单击并识别我按下的数据标签，我知道我使用的是 ChartJs 中的 getElementsAtEvent 方法，但是使用 Angular 中的绑定数据我无法访问此方法（我没有创建图表对象）。我在下面分享我的代码：

我的模板：

UNION

我的组件：

<div style="display: block">
<canvas id ="radarChart" baseChart [datasets]="radarChartData" [labels]="radarChartLabels"
    [chartType]="radarChartType" [options]="radarChartOptions"></canvas>

解决方法

我将这个响应从我刚刚编写的模块中的一个工作解决方案中零碎地放在一起。这个特殊的产品还没有经过全面测试，但它的关键就在这里，正如它在我的代码中的工作一样。 我使用来自 stackoverflow 的一些代码将我的最终工作代码放在一起，但我发现没有任何东西看起来像这段代码（使用 ViewChild 和 Angular 点击事件连接），所以我的工作解决方案有点独特，恕我直言更简单和直接。

注意：只要 ViewChild 画布引用在运行时成为图表引用，我认为代码是合理的。我的工作解决方案在 TypeScript 代码中创建了图表对象，而您的代码是在 HTML 中创建的，因此我直接引用了图表对象，此代码尝试使用 ViewChild 引用。

如果没有，您可能需要在事件代码中添加一个 let 语句以从画布引用中提取图表对象（类似于 let myChartObj = this.myChartCanvas.(chartProperty);），然后在事件代码中引用 myChartObj 代替 this.myChart )

模板

（我添加了 #chartCanvas 和 (click) 事件）

<div style="display: block">
<canvas #chartCanvas (click)="onChartClick($event)" id="radarChart" baseChart [datasets]="radarChartData" [labels]="radarChartLabels"
    [chartType]="radarChartType" [options]="radarChartOptions"></canvas>

组件代码

添加到您的导入：

import { Chart,ChartElement } from 'chart.js';

添加到您的类变量：

@ViewChild('chartCanvas') myChart;

您的事件处理程序：

onChartClick(event) {
  let ActivePoints: ChartElement[] = this.myChart.getElementsAtEvent(event);
  // to do - check ActivePoints for undefined,return if true
  let idx = ActivePoints[0]['_index'];
  let lbl: string = this.myChart.data.labels[idx];
  let dat = this.myChart.data.datasets[0].data[idx];
  console.log(lbl,dat);
}