Question

我有一个显示数据库数据的条形图，我需要能够为不同的数值显示不同的颜色。例如，'loc_health'返回1到10之间的值，所以我需要显示1为红色，2为橙色，3为黄色，4为绿色等...

我搜索过chart.js文档，但无法找到解决方法。

var context = document.getElementById('healthRatings').getContext('2d');

window.myObjBar = new Chart(context).Bar({
    labels : loc_id_grab,
    datasets : [{
        fillColor : ["rgba(220,220,220,0.5)"],
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : loc_health
    }]
}, {
    scaleOverride : true,
    scaleSteps : 10,
    scaleStepWidth : 1,
    scaleStartValue : 0,
    barShowStroke : false,
    barStrokeWidth : 1,
    showTooltips : false,
    barValueSpacing : 2,
    animation : false,
    responsive : true,
    maintainAspectRatio : true
});

Answer 1

您可以通过访问window.myObjBar.datasets[0].bars[0].fillColor属性为每个单独的栏着色，然后更新图表

在您的情况下，您可以循环浏览元素并相应地为每个条形图着色

    var bars = myObjBar.datasets[0].bars;
    for(i=0;i<bars.length;i++){
       var color="green";
       //You can check for bars[i].value and put your conditions here
       bars[i].fillColor = color;

    }
    myObjBar.update(); //update the chart

工作JsFiddle

Answer 2

你可以做那样的事情

changeColor(loc_health);

function changeColor(random_value){
   switch(random_value){
       case = 1:
          datasets[0].fillColor = "#000";
          break;
       case = 2:
          //etc

   }
   myObjBar.update();
}

在Chart实例上调用update（）将使用任何更新的值重新渲染图表，允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染它们。

Answer 3

您可以在创建图表之前检查该值：

var context = document.getElementById('healthRatings').getContext('2d');

var colors = []
for(var i = 0; i < loc_health.length; i++){
   var color;
   switch(loc_health[i]){
       case 1:
           color = "red";
           break;
       case 2:
           color = "orange";
           break;
       case 3:
           color = "yellow";
           break;
       case 4:
           color = "green";
           break;
       //etc..
   }
   colors[i] = color;
}

window.myObjBar = new Chart(context).Bar({
    labels : loc_id_grab,
    datasets : [{
        backgroundColor: colors,
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : loc_health
    }]
}, {
    scaleOverride : true,
    scaleSteps : 10,
    scaleStepWidth : 1,
    scaleStartValue : 0,
    barShowStroke : false,
    barStrokeWidth : 1,
    showTooltips : false,
    barValueSpacing : 2,
    animation : false,
    responsive : true,
    maintainAspectRatio : true
});

Answer 4

看起来backgroundColor（还有borderColor）采用数组或字符串。如果传递和排列，它将使颜色与数据匹配，即：

// The data for our dataset
data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [
        {
            label: ['Proceed', 'Stop', 'Stop'],
            backgroundColor: ['rgb(77,164,29)', 'rgb(255,0,0)', 'rgb(255,0,0)'],
            borderColor: ['rgb(48,123,28)', 'rgb(200,0,0)', 'rgb(200,0,0)'],
            data: [9, 2, 0]
        },
        {
        label: 'Max Score',
        backgroundColor: 'rgb(211, 211, 211)',
        borderColor: 'rgb(169, 169, 169)',
        data: [10, 5, 5]
    }
    ]
}

我通过查看以下示例进行了发现：https://www.chartjs.org/samples/latest/，然后查看页面源。

chart.js条形图颜色基于值的变化

4 个答案: