图表点击事件-单击甜甜圈图表的标签，不返回标签ng2-图表

Question

我有一个甜甜圈图设置，我想在标签上使用click事件。使用此答案中的代码（https://stackoverflow.com/a/49118430/4611941），我可以在单击图表以返回标签和数据时触发click事件：

chartClicked (e: any): void {
    debugger;
    if (e.active.length > 0) {
        const chart = e.active[0]._chart;
        const activePoints = chart.getElementAtEvent(e.event);
        if ( activePoints.length > 0) {
            // get the internal index of slice in pie chart
            const clickedElementIndex = activePoints[0]._index;
            const label = chart.data.labels[clickedElementIndex];
            // get value by index
            const value = chart.data.datasets[0].data[clickedElementIndex];
            console.log(clickedElementIndex, label, value)
        }
    }
}

这在返回图表标签时单击图表数据本身时非常有效，然后我可以使用该值。但是，在图表上方单击标签本身时，此代码无法获取所单击标签的值（e.active.lenth = 0）。但是，它仍然通过将该标签的数据删除/添加到甜甜圈图来执行过滤。

这是我目前的图表设置方式：

<canvas #chart baseChart
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [chartType]="doughnutChartType"
        (chartClick)="chartClicked($event)"
        [colors]="chartColors">
</canvas>

是否可以通过单击甜甜圈图的标签来获取标签的值，并且也防止在图表上进行过滤操作？

Answer 1

您可以通过@ViewChild访问图表。您已经在HTML中设置了本地引用。

@ViewChild(BaseChartDirective) chart: BaseChartDirective;

此包含图例中的标签。

如果在canvas元素中传递一些选项，那么您也可以操纵onClick行为。

<canvas #chart baseChart
    ...
    [options]="chartOptions">
</canvas>

在您的.ts文件中，创建包含onClick行为的chartOptions。这将覆盖默认行为。例如，您可以使用其索引来汇总特定标签的值。

public chartOptions: ChartOptions = {
  legend: { 
    onClick: (e, i) => {
      console.log(this.chart.data[i.index].reduce((total, next) => total+next));
    }
  }
}

不要忘记导入

import { ..., ChartOptions } from 'chart.js';
import { ..., BaseChartDirective } from 'ng2-charts';

Here is the modified code.希望对您有帮助。