Chart.js数据背景色正在覆盖点的背景色

Question

Chart.js数据背景色正在覆盖点的背景色

5

我正在使用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 已经正常工作，但是如果我删除第一个 backgroundColor 字段，point.backgroundColor 才会正常工作。

- Ian Fako

2个回答

2

看起来 Chart.defaults.global.elements.point.backgroundColor 只接受一个颜色字符串。

我不认为可以有不同颜色的点。这是它的文档页面。

我试图将一个数组插入到 backgroundColor 属性中，但它默认了一个不同的颜色。如果你想玩一下，可以看看这个 fiddle。

你可以随时提交一个功能请求。

- tyelford

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian Fako · Accepted Answer

我已经自己找到了解决办法。我没有意识到 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"
       }]
}
});