Chart.js 条形图中条形图的颜色是否可以根据其值而变化？

使用chart.js 2，酒吧购物车中的酒吧颜色是否可以根据其价值而变化

---

例如，如果比例为0-100，50%及以上的列可以是绿色，而0-49%可以是红色。

据我所知，绘制的每个点都没有配置或回调。我能想到的最好的方法是创建一个函数来修改图表配置/数据对象。这不是解决这个问题的最优雅的方法，但它会起作用

修复 将图表配置/数据对象传递给将添加背景色的函数

示例的要点是

函数AddBackgroundColors（chartConfig）

例如：

函数AddBackgroundColors（chartConfig）{
var min=1；//最小值
var max=100；//最大值
var数据集；
var数据集；
var值；
变量范围=（最大-最小）；
风险值百分比；
背景色；
//确保数据存在
if（chartConfig&&
chartConfig.data&&
chartConfig.data.dataset）{
//循环遍历所有数据集
数据集=chartConfig.data.datasets；
对于（var i=0；i100）{
// > 100%
背景颜色='#0000ff'；
}否则，如果（百分比>=50）{
// 50% - 100%
背景颜色='#00ff00'；
}否则{
// < 50%
背景颜色='#ff0000'；
}
dataset.backgroundColor=背景颜色；
}
}
//返回具有新背景颜色的图表配置对象
返回chartConfig；
}
var chartConfig={
类型：'bar'，
数据：{
标签：[“百分比”]，
数据集：[{
标签：“100%”，
数据：[100]
}, {
标签：“50%”，
数据：[50]
}, {
标签：49%，
数据：[49]
}, {
标签：“5%”，
数据：[5]
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
chartConfig=AddBackgroundColors（chartConfig）；
var myChart=新图表（ctx，chartConfig）；
};
在Chart.js 2中，可以使用数组设置多种颜色

因此，您可以将
backgroundColor
定义为与数据集数据匹配的颜色字符串数组

var myChart = new Chart(ctx, {
  datasets: [{
    label: 'Votes',
    data: [1, 2, 3],
    // Make the first bar red, the second one green and the last one blue
    backgroundColor: ['#f00', '#0f0', '#00f']
  }]
});

您可以根据数据中的值轻松生成数组：

function getColorArray(data, threshold, colorLow, colorHigh) {
  var colors = [];
  for(var i = 0; i < data.length; i++) {
    if(data[i] > threshold) {
      colors.push(colorHigh);
    } else {
      colors.push(colorLow);
    }
  }
  return colors;
}

函数getColorArray（数据、阈值、colorLow、colorHigh）{
var颜色=[]；
对于（变量i=0；i阈值）{
颜色。推送（颜色高）；
}否则{
颜色。推送（colorLow）；
}
}
返回颜色；
}

---

请参阅此演示，以获得有效演示

感谢您快速而全面的回答。这正是我的想法。如果能在ChartJS文档中看到这样的结果，那就太好了。