[英]Create IF to change chart.js bar color
I'm new to JavaScript and i'm using chart.js to create some data visualizations, and i need to change the color of the entire bar for different values, the code i have so far is what follows, but i can't make it work, this isn't giving me any errors, so i don't know were to go. 我是JavaScript的新手,我正在使用chart.js创建一些数据可视化,并且我需要更改整个条形的颜色以获取不同的值,到目前为止,我所拥有的代码如下,但是我不能使其工作,这不会给我任何错误,所以我不知道要去哪里。
var dData1 = 90; ///////CARREGAR DADOS DE FACTURAÇÃO (for developer)
var dData2 = 70; ///////CARREGAR DADOS DE FACTURAÇÃO (for developer)
var barChartData = {
labels: ["MÊS", "ANO"],
datasets: [{
fillColor: "#f37c8a",
strokeColor: "none",
data: [dData1, dData2]
}]
}
if (dData1 < 75)
{
barChartData.datasets[0].fillColor = "#f37c8a";
}
else if (dData1 > 76 && dData1 < 85)
{
barChartData.datasets[0].fillColor = "#f3e97c";
}
else if (dData1 > 86)
{
barChartData.datasets[0].fillColor = "#9ae27d";
} else
{
barChartData.datasets[0].fillColor = "#fff";
};
if (dData2 < 75)
{
barChartData.datasets[0].fillColor = "#f37c8a";
}
else if (dData2 > 76 && dData1 < 85)
{
barChartData.datasets[0].fillColor = "#f3e97c";
}
else if (dData2 > 86)
{
barChartData.datasets[0].fillColor = "#9ae27d";
} else
{
barChartData.datasets[0].fillColor = "#fff";
};
You need to set the colors for the bars
after generating the chart. 生成图表后,您需要设置bars
的颜色。 You'll need to set the fillColor
, the highlightFill
and _saved.fillColor
(which Chart.js uses to restore the bar color after a tooltip hover) 您需要设置fillColor
, highlightFill
和_saved.fillColor
(在工具提示悬停后,Chart.js用来恢复条形颜色)
So you need something like 所以你需要像
if (dData1 < 75)
{
barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#f37c8a";
}
else if (dData1 > 76 && dData1 < 85)
{
barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#f3e97c";
}
else if (dData1 > 86)
{
barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#9ae27d";
} else
{
barChart.datasets[0].bars[0].fillColor = barChart.datasets[0].bars[0].highlightFill = barChart.datasets[0].bars[0]._saved.fillColor = "#fff";
};
for the 1st block, where barChart
is your chart object. 对于第一个块,其中barChart
是您的图表对象。 Note that the above code assumes a single series of 2 elements. 请注意,上面的代码假定由2个元素组成的单个系列。
Fiddle - https://jsfiddle.net/2a86gqsa/ 小提琴-https: //jsfiddle.net/2a86gqsa/
Note that you had dData1 < 85
in the second block - I changed it to dData2 < 85
. 请注意,您必须dData1 < 85
的第二块-我把它改成dData2 < 85
。 Seeing that much of the code for the 2 blocks are common you might want to move it to a function. 看到2个块的大部分代码是通用的,您可能希望将其移至一个函数。
Solved, i was calling the items inside the library wrong. 解决了,我把图书馆里面的东西叫错了。
var dData1 = 90; ///////CARREGAR DADOS DE FACTURAÇÃO
var dData2 = 70; ///////CARREGAR DADOS DE FACTURAÇÃO
var barChartData = {
labels: ["MÊS", "ANO"],
datasets:
[{
fillColor: "rgba(220,220,220,1)",
strokeColor: "rgba(220,220,220,0.0)",
highlightFill: "rgba(220,220,220,0.0)",
highlightStroke: "rgba(220,220,220,0)",
data: [dData1, dData2]
}]
}
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Bar(barChartData, {
responsive: true,
barValueSpacing: 10
});
if (barChartData.datasets[0].data=[dData1] < 75)
{
console.log("vermelho");
myChart.datasets[0].bars[0].fillColor = "rgba(243,124,138,1.00)";
myChart.update();
}
else if (dData1 > 76 && dData1 < 85)
{
console.log("amarelo");
myChart.datasets[0].bars[0].fillColor = "rgba(243,233,7,1.00)";
myChart.update();
}
else if (dData1 > 86)
{
console.log("verde");
myChart.datasets[0].bars[0].fillColor = "rgba(154,226,125,1.00)";
myChart.update();
} else
{
console.log("branco");
myChart.datasets[0].bars[0].fillColor = "rgba(255,255,255,1)";
myChart.update();
};
if (barChartData.datasets[0].data=[dData2] < 75)
{
console.log("vermelho2");
myChart.datasets[0].bars[1].fillColor = "rgba(243,124,138,1.00)";
myChart.update();
}
else if (dData2 > 76 && dData2 < 85)
{
console.log("amarelo2");
myChart.datasets[0].bars[1].fillColor = "rgba(243,233,7,1.00)";
myChart.update();
}
else if (dData2 > 86)
{
console.log("verde2");
myChart.datasets[0].bars[1].fillColor = "rgba(154,226,125,1.00)";
myChart.update();
} else
{
console.log("branco2");
myChart.datasets[0].bars[1].fillColor = "rgba(255,255,255,1)";
myChart.update();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.