图表点击事件 - 点击圆环图的标签，不 return 标签 ng2-charts

Question

我有一个圆环图设置，我想在标签上使用点击事件。使用此答案 () 中的代码，我可以在点击图表时触发点击事件 return 标签和数据：

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)
        }
    }
}

点击图表数据本身时效果很好，因为标签是 returned，然后我可以使用这个值。但是，当单击图表上方的标签本身时，此代码无法获取所单击标签的值 (e.active.lenth = 0)。但是，它仍然通过 removing/adding 将该标签的数据过滤到圆环图。

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

<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. 希望对你有帮助。

图表点击事件 - 点击圆环图的标签，不 return 标签 ng2-charts

Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts

chart.js

ng2-charts

angular