Chart.js中如何为每个标签绑定固定颜色（零值不打乱配色）

这个问题我之前在做Chart.js环形图的时候也碰到过！Chart.js默认会跳过值为0的数据条目，导致剩下的标签和颜色数组的对应关系完全错乱，确实挺坑的。下面给你两个靠谱的解决思路，结合你的Angular代码来调整：

方法一：用极小值替代0，强制保留条目 #

Chart.js不会跳过接近0的极小值，我们可以把数据里的0替换成0.001——这个数值小到几乎看不见切片，但能让颜色和标签保持严格的一一对应：

修改你的TypeScript代码：

// 把0替换为0.001，保留所有数据条目
this.graphData = this.data.map(r => r.cnt === 0 ? 0.001 : r.cnt);
this.graphLabels = this.data.map(r => r.city);
// 确保颜色数组和标签数组长度一致（按标签映射固定颜色）
const labelColorMap = {
  passed: 'green',
  failed: 'red',
  'in progress': 'yellow'
};
this.graphColors = this.graphLabels.map(label => ({
  backgroundColor: labelColorMap[label]
}));

方法二：配置Chart.js不跳过零值条目 #

如果你不想修改数据，可以直接在Chart.js的配置里禁用零值过滤，同时确保每个数据点的颜色明确绑定：

首先修正你代码里的拼写错误（cutoutPrecentage → cutoutPercentage），然后添加过滤配置：

this.graphData = this.data.map(r => r.cnt);
this.graphLabels = this.data.map(r => r.city);
// 按标签映射对应颜色，保证每个标签颜色固定
const labelColorMap = {
  passed: 'green',
  failed: 'red',
  'in progress': 'yellow'
};
this.graphColors = this.graphLabels.map(label => ({
  backgroundColor: labelColorMap[label]
}));
this.graphOptions = {
  layout: { padding: 20 },
  cutoutPercentage: 90,
  legend: { display: false },
  // 配置插件，不要过滤零值条目
  plugins: {
    legend: {
      filter: (item) => true // 强制显示所有图例条目（如果需要显示图例的话）
    }
  },
  // 针对环形图的数据集配置，确保零值被保留
  datasets: {
    pie: {
      skipNull: false,
      skipZero: false
    }
  }
};

额外提示 #

ng2-charts的[colors]属性如果是数组的话，每个元素对应一个数据集的样式；如果要给单个数据点设置颜色，更稳妥的方式是直接在数据集中指定backgroundColor数组，比如构造完整的数据集对象：

// 构造包含标签、数据和对应颜色的完整数据集
this.graphData = {
  labels: this.data.map(r => r.city),
  datasets: [{
    data: this.data.map(r => r.cnt === 0 ? 0.001 : r.cnt),
    backgroundColor: this.data.map(r => {
      const colorMap = { passed: 'green', failed: 'red', 'in progress': 'yellow' };
      return colorMap[r.city];
    })
  }]
};

然后HTML中只需绑定[data]即可，无需单独设置[labels]和[colors]：

<canvas baseChart height="150px" width="150px" [data]="graphData" [options]="graphOptions" [legend]="false" [chartType]="'doughnut'">
</canvas>

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