创建IF以更改chart.js栏颜色 [英] Create IF to change chart.js bar color
本文介绍了创建IF以更改chart.js栏颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是JavaScript的新手,我使用chart.js来创建一些数据可视化,我需要改变不同值的整个栏的颜色,我迄今为止的代码是以下,但我不能让它工作,这不会给我任何错误,所以我不知道是否去。
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.
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";
};
推荐答案
。
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();
};
这篇关于创建IF以更改chart.js栏颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文