2017-10-09 185 views
1

我正在使用Chart.js。我有一条具有特定颜色的数据线。我希望这些数据线的点的颜色不同。根据该文件,你可以用Chart.defaults.global.elements.point.backgroundColorChart.js数据背景颜色覆盖点背景颜色

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

我自己找到了解决方案。我不知道有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" 
     }] 
} 
}); 
0

它看起来像Chart.defaults.global.elements.point.backgroundColor只需要一个单独的颜色字符串。

我不相信将有可能有不同的颜色点。 Here is the documentation page for it.

我试图将数组插入到backgroundColor属性中,但默认为不同的颜色。 Have a look at this fiddle,如果你想玩。

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