Javascript Chart.js v2.0-不同颜色的单条

我刚从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吗？：）

您可以通过为

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"],
            }]
        }
});

---

---

Fiddle-

您可以通过为

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"],
            }]
        }
});

---

---

Fiddle-

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

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

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

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

---

---

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

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

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

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

---

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

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

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

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

---

---

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

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

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

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

---

你是明星！一旦你知道了，这些事情中的一件是显而易见的。这也适用于后期创建。data.datasets[0]。backgroundColor=[“红色”、“蓝色”等]；干杯很高兴它成功了。不过，只需检查一件事（在您的Chart.js版本中）——如果我将第3个值设置为10，它不会显示。这似乎是一个库错误，但我不确定这是否是因为我链接到的库文件。注意-顺便说一句，这与颜色无关-即使没有按条着色也会发生。我认为这是因为y轴将其限制从[0->20]更改为[10->20]，所以10的值正好位于底部边缘。您可以强制y轴从零开始，但（至少对我来说）这通常没有帮助。我通过在条上有厚的边框来解决它，然后厚的顶部边框显示在x轴上。啊！我甚至没有注意到y轴已经改变，并且错误地认为这是一个问题。谢谢你指出这一点！你是明星！一旦你知道了，这些事情中的一件是显而易见的。这也适用于后期创建。data.datasets[0]。backgroundColor=[“红色”、“蓝色”等]；干杯很高兴它成功了。不过，只需检查一件事（在您的Chart.js版本中）——如果我将第3个值设置为10，它不会显示。这似乎是一个库错误，但我不确定这是否是因为我链接到的库文件。注意-顺便说一句，这与颜色无关-即使没有按条着色也会发生。我认为这是因为y轴将其限制从[0->20]更改为[10->20]，所以10的值正好位于底部边缘。您可以强制y轴从零开始，但（至少对我来说）这通常没有帮助。我通过在条上有厚的边框来解决它，然后厚的顶部边框显示在x轴上。啊！我甚至没有注意到y轴已经改变，并且错误地认为这是一个问题。谢谢你指出这一点！