Chart.js数据背景颜色是覆盖点背景颜色

时间:2017-10-09 12:40:53

标签: javascript chart.js

我正在使用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字段时才有效。

2 个答案:

答案 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,如果你想玩的话。

您可以随时提交功能请求。