因此,我想用红色显示我的一半数据,而我希望另一半用绿色。在当前设置下,所有内容均为绿色。所以我的问题是,如何解析红色到我的数据集的一半,而另一半保持绿色(当前状态)?我的数据集是一个由50个浮点数组成的列表,我将其解析为函数drawChart。
我已经尝试包含以下线程中介绍的功能:ChartJS - Different color per data point,但该功能尚未成功。任何帮助将不胜感激!
var ctx = document.getElementById("myChart");
ctx.style.backgroundColor = 'rgb(21,43,42)';
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: x,
datasets: [
{
label: 'Initial',
data: y,
backgroundColor: "rgba(58, 98, 87, 0.5)"
}, {
label: 'Profit',
data: z,
backgroundColor: "rgba(51, 204, 51, 0.9)"
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
},
stacked: true,
display: true,
scaleLabel: {
display: true,
labelString: w,
fontSize: 16,
fontColor: 'white'
},
ticks: {
fontColor: 'white'
}
}],
yAxes: [{
gridLines: {
color: 'rgba(153,153,153,0.2)'
},
stacked: true,
display: true,
scaleLabel: {
display: true,
labelString: "Order size",
fontSize: 16,
fontColor: 'white'
},
ticks: {
fontColor: 'white'
}
}]
},
tooltips: {
displayColors: false,
callbacks: {
title: function(tooltipItem) {
return `${w}: ${String(tooltipItem[0].xLabel)}`;
},
label: function(tooltipItemY) {
return "Total: " + `${Number(tooltipItemY.yLabel)}`;
}
}
}
}
});
for (i = 0; i < myChart.data.datasets[0].data.length; i++) {
if (myChart.data.datasets[0].data[i] > 25) {
y.backgroundColor.push("#90cd8a");
} else {
y.backgroundColor.push("#f58368");
}
}
};```