我想生成一个包含多个条形图的页面，并根据数组中的值全局设置每个颜色！
这是我到目前为止的代码..它可以使用其中一个值并将其分配给所有小节！我需要将RED分配为FALSE并将GREEN分配为TRUE的地方
var win = simpleData[0].myWin; //array containing either true or false
var myBorderColors = [];
$.each(win, function (index, value) {
if (value == true) {
myBorderColors[index] = "rgba(0, 177, 106, 1)";
} else {
myBorderColors[index] = "rgba(207, 0, 15, 1)";
}
});
Chart.defaults.global.elements.rectangle.backgroundColor = myBorderColors;
给定一个array包含boolean值的命名“ win” ，您可以使用来创建“ myBorderColors” array，如下所示Array.map。
var myBorderColors = win.map(b => b ? "rgba(0, 177, 106, 1)" : "rgba(207, 0, 15, 1)");
然后将以下分配用于Chart.defaults。
Chart.defaults.global.datasets.bar.borderColor = myBorderColors;
请查看下面的可运行代码段。
var win = [true, false, false, true];
var myBorderColors = win.map(b => b ? "rgba(0, 177, 106, 1)" : "rgba(207, 0, 15, 1)");
Chart.defaults.global.datasets.bar.borderColor = myBorderColors;
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: "My Dataset",
data: [3, 5, 4, 2],
borderWidth: 3
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});canvas {
max-width: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句