如何修改Chart.js柱状图的柱子颜色？将灰色柱子改为蓝色

嘿，这个问题很好解决，你已经找对方向啦——就是通过backgroundColor属性来设置柱子颜色，只需要把它添加到你的datasets配置对象里就行。

修改后的完整代码 #

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dates,
    datasets: [
      { 
        data: values,
        backgroundColor: '#36a2eb' // 这里设置你想要的蓝色，也可以用RGBA值比如'rgba(54, 162, 235, 0.6)'来调整透明度
      }
    ]
  }
});

简单说明 #

• 直接在datasets的单个数据对象里添加backgroundColor属性，赋值为你想要的蓝色值即可。支持十六进制颜色码、RGB或RGBA格式（RGBA的最后一个数值是透明度，范围0到1）。
• 如果之后需要给不同柱子设置不同颜色，只需要把backgroundColor改成颜色数组就行，比如backgroundColor: ['#36a2eb', '#ff6384', '#4bc0c0']，但你现在要全部蓝色，用单个颜色值就足够啦。

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