如何自定义NGX Pie Chart的饼图标签文本？

可以通过NGX Charts提供的labelFormatting回调函数自定义饼图标签，以下是具体实现方式：

步骤1：在模板中绑定格式化函数 #

给<ngx-charts-pie-chart>组件添加labelFormatting输入属性，关联自定义的格式化函数：

<ngx-charts-pie-chart
  [results]="chartData"
  [labelFormatting]="customLabelFormatter"
  <!-- 保留你原有的其他配置项 -->
></ngx-charts-pie-chart>

步骤2：在组件类中实现自定义标签逻辑 #

根据你的需求，有两种常见实现方式：

方式一：使用预设的自定义标签数组 #

如果你有固定的自定义文本数组，可根据数据项索引匹配返回对应内容：

// 预设的自定义标签数组，按数据顺序排列
customLabels = ['25%', '30%', '20%', '25%'];

customLabelFormatter(item: any): string {
  // 找到当前数据项在数据源中的索引
  const index = this.chartData.findIndex(data => data.name === item.name);
  // 返回对应自定义标签，兜底用原名称
  return this.customLabels[index] || item.name;
}

方式二：动态计算标签内容（比如百分比） #

如果需要基于数据动态生成标签（如计算百分比），可在函数内直接处理：

customLabelFormatter(item: any): string {
  // 计算所有数据的总值
  const totalValue = this.chartData.reduce((sum, data) => sum + data.value, 0);
  // 计算当前项的百分比并格式化
  const percentage = ((item.value / totalValue) * 100).toFixed(1) + '%';
  return percentage;
}

labelFormatting是NGX Charts饼图组件的通用配置，回调函数接收当前数据项作为参数，返回的字符串将直接作为饼图标签显示。

内容的提问来源于stack exchange，提问作者Chris