Chart.js如何解析对象数组作为饼图数据集

现有如下格式的Chart.js图表数据：

chartData = [
  { data: 2, label: 'Label 1' },  
  { data: 10, label: 'Label 2' },  
  { data: 40, label: 'Label 3' },
];

需要将该数据解析后生成经典饼图（类似示例饼图样式），但查阅官方文档后仍未解决问题。当前使用的模板代码如下：

<canvas baseChart
        [datasets]="chartData"
        [type]="pieChartType"
        [options]="pieChartOptions">
</canvas>

TS代码如下：

chartData = [
  { data: 2, label: 'Label 1' },  
  { data: 10, label: 'Label 2' },  
  { data: 40, label: 'Label 3' },
];

public pieChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: 'top',
    },
    datalabels: {
      formatter: (value, ctx) => {
        if (ctx.chart.data.labels) {
          return ctx.chart.data.labels[ctx.dataIndex];
        }
      },
    },
  }
};

请问该如何解析数据以生成目标饼图？

核心问题是当前数据格式不符合Chart.js（angular-chart.js）饼图的要求，饼图需要将标签和数据分离为独立结构，而非对象列表格式。按以下步骤修改即可：

1. 重构数据格式 #

在TS代码中，将现有chartData拆分为标签数组和标准数据集结构：

// 提取所有标签
public pieChartLabels: string[] = this.chartData.map(item => item.label);
// 构造符合饼图要求的数据集（饼图通常仅需一个数据集）
public pieChartData: ChartConfiguration['data'] = {
  labels: this.pieChartLabels,
  datasets: [
    {
      data: this.chartData.map(item => item.data),
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], // 自定义扇区颜色（可选）
      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }
  ]
};

// 保留原数据作为数据源
chartData = [
  { data: 2, label: 'Label 1' },  
  { data: 10, label: 'Label 2' },  
  { data: 40, label: 'Label 3' },
];

2. 修正模板绑定 #

修改模板中的数据绑定字段，替换为重构后的标准数据结构：

<canvas baseChart
        [data]="pieChartData"
        [type]="'pie'"
        [options]="pieChartOptions">
</canvas>

3. 调整数据标签显示（可选） #

如果需要显示百分比而非纯标签文本，修改datalabels的格式化逻辑：

public pieChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: 'top',
    },
    datalabels: {
      formatter: (value, ctx) => {
        const total = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
        const percentage = ((value / total) * 100).toFixed(1) + '%';
        return percentage; // 仅显示百分比
        // 若需同时显示标签和百分比，可返回：`${ctx.chart.data.labels[ctx.dataIndex]}: ${percentage}`
      },
    },
  }
};

4. 补充饼图类型定义（可选） #

如果仍需使用变量指定图表类型，在TS中添加定义：

public pieChartType: ChartType = 'pie';

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