ng2-charts柱状图按数值设置颜色时报错无法生效问题问询

错误根源 #

• 你直接对ChartDataSets[]类型的barChartData整体做>0判断，数组类型无法直接和数字比较，触发类型报错
• [colors]属性要求传入Color[]类型，你的三元表达式返回的是单个Color对象，类型不匹配

修改方案 #

步骤1：修改TS端代码 #

移除全局的barChartColors配置，直接在数据集里动态配置每个柱子的颜色，支持两种写法：

写法1（推荐，适配Chart.js v3+ 对应新版本ng2-charts）：用回调函数动态生成颜色

barChartOptions: ChartOptions = {
  responsive: true,
};
barChartLabels: Label[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
  '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];
barChartType: ChartType = 'bar';
barChartLegend = false;
barChartPlugins = [];

barChartData: ChartDataSets[] = [
  {
    data: [11, 12, 12, 14, 14, 19, 22, 28, 29, -30, 31, 31, 35, 35, 35, -37, 37, 40, 40, 41, 45, 45, 48, 51, 57,
      62, 65, 69, 69, 71, 75],
    // 按数值判断每个柱子的颜色
    backgroundColor: (context) => {
      const value = context.dataset.data[context.dataIndex];
      return value >= 0 ? 'forestgreen' : 'red';
    },
    borderColor: 'white',
    borderWidth: 3
  }
];

写法2（兼容旧版本ng2-charts）：预生成颜色数组

// 先定义原始数据
const rawData = [11, 12, 12, 14, 14, 19, 22, 28, 29, -30, 31, 31, 35, 35, 35, -37, 37, 40, 40, 41, 45, 45, 48, 51, 57, 62, 65, 69, 69, 71, 75];
// 预生成每个数据对应的颜色数组
const dataColors = rawData.map(val => val >= 0 ? 'forestgreen' : 'red');

barChartData: ChartDataSets[] = [
  {
    data: rawData,
    backgroundColor: dataColors,
    borderColor: 'white',
    borderWidth: 3
  }
];

步骤2：修改HTML端代码 #

删除原来错误的[colors]绑定即可，因为颜色已经在数据集内配置完成：

<div class="chart-wrapper" style="width: 100%">
  <canvas baseChart
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [plugins]="barChartPlugins"
          [legend]="barChartLegend"
          [chartType]="barChartType">
  </canvas>
</div>

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