我正在尝试在我的条形图上每五个条形更改同一数据集的两个条形的颜色。我想要这样的东西：红色红色蓝色蓝色蓝色蓝色红色红色蓝色...目前我有以下代码： 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... }});
1 回答
湖上湖
TA贡献2003条经验 获得超2个赞
您可以只设置为与条形图数据具有相同长度的颜色数组。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>
添加回答
举报
0/150
提交
取消