javascript - 条形图中每个条形的不同颜色；图表JS

Question

我在我正在处理的项目中使用 ChartJS，我需要为条形图中的每个条使用不同的颜色。

下面是条形图数据集的示例:

    var barChartData = {
      labels: ["001", "002", "003", "004", "005", "006", "007"],
      datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)", 
        strokeColor: "rgba(220,220,220,0.8)", 
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [20, 59, 80, 81, 56, 55, 40]
      }]
    };

有什么方法可以不同地绘制每个条形图吗？

Answer 1

从 v2 开始，您可以通过 backgroundColor 属性简单地指定一个值数组来对应每个条的颜色:

datasets: [{
  label: "My First dataset",
  data: [20, 59, 80, 81, 56, 55, 40],
  backgroundColor: ["red", "blue", "green", "blue", "red", "blue"], 
}],

---

这也适用于 borderColor、hoverBackgroundColor、hoverBorderColor。

来自 Bar Chart Dataset Properties 上的文档:

Some properties can be specified as an array. If these are set to an array value, the first value applies to the first bar, the second value to the second bar, and so on.