图表点击事件-单击甜甜圈图表的标签，不返回标签ng2-charts [英] Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts

问题描述

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

I have a doughnut chart setup and I would like to use a click event on the label. Using the code from this answer (https://stackoverflow.com/a/49118430/4611941), I am able to trigger a click event when clicking on the chart to return the label and data:

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）。但是，它仍然通过将该标签的数据删除/添加到甜甜圈图中来执行过滤。

This works perfectly when clicking on the chart data itself as the label is returned and I can then use this value. However when clicking on the label itself above the chart, this code can't get the value of the label clicked (e.active.lenth = 0). However, it still performs it's filtering by removing/adding the data for that label to the doughnut chart.

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

This is how I currently have my chart setup:

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

是否可以通过单击甜甜圈图的标签来获取标签的值并防止

Is it possible to get the value of the label from clicking the label of the doughnut chart and prevent the filter operation on the chart as well?

推荐答案

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

you can access your chart via @ViewChild. You set already a local reference in your HTML.

@ViewChild(BaseChartDirective) chart: BaseChartDirective;

其中一个包含图例中的标签。

This one is containing the labels in the legend.

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

If you pass some options in your canvas element, then you can manipulate the onClick behavior, too.

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

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

In your .ts-file you create the chartOptions containing a onClick behavior. This will overwrite the default behavior. For example you could sum up the values for a specific label, using its index.

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. Hope that helps you.

这篇关于图表点击事件-单击甜甜圈图表的标签，不返回标签ng2-charts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！