Angular14中NG2-Charts环形图多数据集自定义颜色异常

1. 匹配backgroundColor与data数组长度 #

ChartJS 要求每个数据集的backgroundColor数组长度必须和data数组长度一致，否则会重复使用现有颜色值，导致未预期的颜色表现。

示例调整： #

如果你的每个数据集data是包含4个元素的数组（对应4个labels），可以选择给所有分段统一颜色，或为每个分段单独设置颜色：

this.doughnutChartData = {
  labels: ['Label1', 'Label2', 'Label3','Label4'],
  datasets: [
    // 数据集1：所有分段使用同一颜色
    { 
      data: this.doughnutChartAircraftDatasets,
      backgroundColor: Array(this.doughnutChartAircraftDatasets.length).fill('#fc5858')
    },
    // 数据集2：每个分段自定义不同颜色
    { 
      data: this.doughnutChartChartBagDatasets,
      backgroundColor: ['#19d863', '#29e873', '#39f883', '#49ff93']
    },
    { 
      data: this.doughnutChartChartFlightDatasets,
      backgroundColor: Array(this.doughnutChartChartFlightDatasets.length).fill('#fdf57d')
    },
    { 
      data: this.doughnutChartChartPassengerDatasets,
      backgroundColor: Array(this.doughnutChartChartPassengerDatasets.length).fill('#fdbb7d')
    }
  ]
};

2. 确认数据集data格式正确性 #

确保每个数据集的data是数组类型，而非单个数值：

• 错误写法：data: 50
• 正确写法：data: [50]（对应单个分段）或data: [10,20,30,40]（对应4个分段）

3. 排查全局配置干扰 #

如果之前设置过ChartJS的全局颜色配置，可能会覆盖数据集的自定义颜色。可在组件初始化时重置全局配置：

import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);
// 重置全局颜色相关配置
Chart.defaults.backgroundColor = undefined;
Chart.defaults.borderColor = undefined;

4. 验证模板配置正确性 #

确保页面模板中的<canvas>标签正确绑定数据和图表类型：

<canvas baseChart
        [data]="doughnutChartData"
        [type]="'doughnut'">
</canvas>

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