Chart.js v2.0 - 以不同的方式着色单个条形图

Question

我刚刚从v1转到chart.js v2.0但经过几个小时的搜索后，我无法弄清楚如何在条形图中更改单个条形（或条形图组）的颜色。 从这里的答案 - 以下代码将实现我想要的版本1.0

// Change 2nd bar to red (display).
wpChartChartTitleBar.datasets[0].bars[1].fillColor = "rgba(229,12,12,0.7)";
wpChartChartTitleBar.datasets[0].bars[1].strokeColor = "rgba(229,12,12,1)";

但是v2.0中的等价物是什么？ ...或者我应该恢复到v1.0？ ：）

Answer 1

您可以通过传入backgroundColor属性

的数组来设置它

预览

<强>脚本

var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["R", "B", "G", "Y"],
            datasets: [{
                    label: 'value',
                    data: [12, 19, 1, 14],
                    backgroundColor: ["red", "blue", "green", "yellow"],
            }]
        }
});

小提琴 - https://jsfiddle.net/Lbap3L37/

Answer 2

如果以这种方式初始化myChart，（chartjs v2.0）

var myChart = new Chart(ctx, {
  type: 'line',
  data: {

您必须通过此代码更改线条颜色

  myChart.data.datasets[0].backgroundColor[0] ="#87CEFA";

如果以这种方式初始化myChart，（chartjs v1.0）

myBar = new Chart(ctx).Line(barChartData, {

您必须通过此代码更改线条颜色

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";