如何使用 angular 获取饼图的标签名称

Question

我刚刚在angular 8 中创建了饼图。我可以查看它。但是我只想根据饼图点击获取标签名称。

图片：

已安装

npm install ng2-charts

在 html 文件中添加以下行：

<div style="display: block">
    <canvas id="pie" baseChart
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

在脚本文件中添加以下行：

 public pieChartLabels: string[] = ['PayCreditWallet','Paypal','Google Pay','Amazon Pay'];
 public pieChartData: number[] = [1,2,3,4];
 public pieChartType: any = 'pie';

  // events
  public chartClicked(e: any): void {
    alert(e);
  }

 public chartHovered(e: any): void {

    console.log(e.data);
  }

当我点击饼图中的标签（切片）时，我可以看到点击事件作为警报，如上所述。当我单击饼图（切片）中的特定标签时是否可以获取标签名称。示例：在饼图中，如果我单击 'AmazonPay'，警报应显示 'AmazonPay'。我不知道如何实现这一目标。有人可以帮我解决这个问题吗？

Answer 1

试试这个代码：

.ts 文件

 public barChartOptions = {
    legend: {
      labels: {
        //fontFamily: '"Arvo", serif',
        fontSize: 20,
      }
    }
  };
public chartClicked(e: any): void {
    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];
          console.log(label)
        }
      }
  }

.html

<div style="display: block">
    <canvas id="pie" baseChart
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            [options]="barChartOptions"></canvas>
  </div>

工作link

https://stackblitz.com/edit/angular-lrq4ee

Github link 对于这个

https://github.com/valor-software/ng2-charts/issues/489

如何使用 angular 获取饼图的标签名称

How to get the Label name of the pie chart using angular

typescript

angular-cli

ng2-charts

angular