如何在Angular Chart.js中为所有柱状图设置单一蓝色？

我来帮你解决这个柱子颜色不一致还随机变化的问题～核心原因是你当前的颜色配置方式不对，加上JS代码里还有个小语法错误，咱们一步步来修正：

1. 修正颜色配置格式 #

Angular-Chart.js（从你的代码能看出用的是这个库）要求colours是数组格式，而你现在给的是单个字符串，这就导致库会自动用默认调色板随机分配颜色。要让所有柱子统一蓝色，把colours改成数组，里面放你想要的蓝色值就行：

如果你想精准控制背景色和边框色，用对象数组的形式：

$scope.colours = [
  {
    backgroundColor: 'rgba(54, 162, 235, 1)', // 标准Chart.js蓝色
    borderColor: 'rgba(54, 162, 235, 1)',
    borderWidth: 1
  }
];

要是只需要统一背景色，也可以简化成字符串数组：

$scope.colours = ['rgba(54, 162, 235, 1)'];

2. 修复JS里的语法错误 #

你的chartOptions配置有个小问题：legend后面多了个逗号，而且title被写到了chartOptions对象外面，这会导致标题配置不生效，还可能引发其他异常。修正后的完整chartOptions应该是：

$scope.chartOptions = {
  legend: { display: false },
  title: {
    display: true,
    text: 'TSP Burn Rate'
  },
  // Option to show VALUES on chart
  events: false,
  tooltips: { enabled: false },
  hover: { animationDuration: 0 }
};

3. 调整HTML的颜色绑定属性 #

保险起见，把HTML里的colours改成chart-colours（Angular-Chart.js的标准属性名），避免版本兼容问题：

<canvas id="bar" class="chart chart-bar" 
        chart-data="expenseData" 
        chart-labels="labels" 
        chart-series="series" 
        chart-options="chartOptions" 
        chart-colours="colours">
</canvas>

为什么之前颜色会乱变？ #

当你没有正确配置colours时，Angular-Chart.js会自动启用内置的颜色调色板，每次刷新会按顺序或随机给柱子分配调色板里的颜色，就出现了颜色不一致且变化的情况。现在指定了统一的颜色数组，所有柱子就都会用你设置的蓝色啦～

内容的提问来源于stack exchange，提问作者Md. Masudur Rahman