我正在使用Chart.js。我有一个具有特定颜色的数据线。我希望这些数据线的点具有不同的颜色。根据文档,您可以使用Chart.defaults.global.elements.point.backgroundColor
var ctxLine = document.getElementById("lineChart").getContext('2d');
lineChart = new Chart(ctxLine, {
type: 'line',
data: {
labels: dates,
datasets: [{
data: ['...'],
backgroundColor: "rgba(52,152,219,0.4)"
}]
},
options: {
elements: {
point: {
borderColor: "rgb(255,255,0)",
backgroundColor: "rgb(255,0,0)"
}
}
}
});
point.borderColor
工作正常,但point.backgroundColor
仅在删除第一个backgroundColor
字段时才有效。
答案 0 :(得分:3)
我自己找到了解决方案。我不知道有不同版本的chart.js
我使用的是v2.0,并且存在名为pointBackgroundColor
var ctxLine = document.getElementById("lineChart").getContext('2d');
lineChart = new Chart(ctxLine, {
type: 'line',
data: {
labels: dates,
datasets: [{
data: ['...'],
backgroundColor: "rgba(52,152,219,0.4)",
pointBackgroundColor: "#fff"
}]
}
});
答案 1 :(得分:0)
看起来Chart.defaults.global.elements.point.backgroundColor
只接受一个Color字符串。
我认为不可能有不同的颜色点。 Here is the documentation page for it.
我试图将一个数组插入到该backgroundColor属性中,但它默认为不同的颜色。 Have a look at this fiddle,如果你想玩的话。
您可以随时提交功能请求。