如何使用Chart.js在Barchart中只更改一个列的颜色 [英] How can I change color of only one column in Barchart using Chart.js

问题描述

js

http：/ /www.chartjs.org/docs/#bar-chart

我使用的是基本示例：

HTML

=600>< / canvas>

JS

  var data = {
 labels：[January，February，March，April，May，June，July] ，
 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：[65，59，80，81， 56，55，40] 
} 
] 
}; 
 
 window.onload = function（）{
 var ctx = document.getElementById（canvas）。getContext（2d）; 
 window.myBar = new Chart（ctx）.Bar（data，{
 responsive：true 
}）; 
} 
  

我想改变一列的颜色。我该怎么办呢？我试过几次很多教程，但我did not发现解决方案。你能帮我吗？

解决方案

你可以改变颜色。这是 jsfiddle

  var data = {
 labels：[January，February，March，April，May，June，July]，
数据集：[
 {
 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：[65，59，80，81，56，55，40 ] 
} 
] 
}; 
 var ctx = document.getElementById（'myChart'）。getContext（'2d'）; 
 var myChart = new Chart（ctx）.Bar（data）; 
 
 //改变第一个条的颜色
 myChart.datasets [0] .bars [0] .fillColor =rgba（255,0,0,1）; 
 myChart.update（）; 
  

js

http://www.chartjs.org/docs/#bar-chart

I am using the basic sample:

HTML

<canvas id="canvas" height="450" width="600"></canvas>

JS

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    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: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(data, {
         responsive : true
    });
}

I wanted to change color of one column. How can I do it? I tried several times a lot of tutorials, but I didnt find solution. Can you help me?

解决方案

You can alter the colors like this. Here is a jsfiddle

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    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: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx).Bar(data);

// change color of first bar
myChart.datasets[0].bars[0].fillColor = "rgba(255,0,0,1)";
myChart.update();

这篇关于如何使用Chart.js在Barchart中只更改一个列的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！