Итак, я хотел бы визуализировать половину моих данных красным, а другую - зеленым. С текущей настройкой все в зеленом. Итак, мой вопрос: как мне разобрать красный цвет для половины моего набора данных, в то время как другая половина остается зеленой, как в настоящее время? Мой набор данных представляет собой список, состоящий из 50 чисел с плавающей точкой, которые я анализирую для функции drawChart.
Я уже пытался включить функцию, которая была объяснена в следующем потоке: ChartJS - разные цвета для каждой точки данных , но пока не удалось. Любая помощь будет принята с благодарностью!
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");
}
}
};```