我正在尝试在我的条形图上更改同一数据集的每五个条形的两个条形的颜色。
我想要这样的东西：
红红蓝红红蓝红蓝红红蓝红红蓝蓝红红蓝蓝红蓝红蓝蓝目前我有以下代码：
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'dataset1',
fill: false,
// i want this to be red 2 times every 5 bars
backgroundColor: 'rgb(255,204,100)',
borderColor: 'rgb(255,204,100)',
hoverBackgroundColor: 'rgb(156,94,0)',
hoverBorderColor: 'rgb(156,94,0)',
data: data
} ]
},
options: {
responsive: true
//more code...
}
});
您可以将backgroundColor设置为与条形图数据长度相同的颜色数组。
例如：
const config = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Dataset 1',
backgroundColor: ['red', 'red', 'blue', 'blue', 'blue', 'red', 'red'],
borderWidth: 1,
data: [-3, 30, -10, 33, -9, 14, -11],
}
],
},
options: {
legend: {
display: false
}
}
};
const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, config);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>