如何使用角度获取饼图的标签名称答案

【问题标题】：How to get the Label name of the pie chart using angular如何使用角度获取饼图的标签名称
【发布时间】：2025-12-26 06:50:16
【问题描述】：

我刚刚创建了角度 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”。我不知道如何实现这一点。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： angular typescript angular-cli ng2-charts

【解决方案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>

工作链接

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

Github 链接

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

【讨论】：