如何在 Chart.js 中设置条形的默认颜色

Question

这看起来愚蠢地微不足道，但尽我所能，我似乎无法找到如何在 Chart.js 中为条形图设置默认颜色。

我的图表正在从 ajax 请求中获取数据，并且图表渲染得很好。但是，更新 Chart.defaults.global.defaultColor 或将 defaultColor 作为选项添加到数据集都没有任何效果。

我非常感谢任何人在这里为我指明正确的方向。

$.ajax({
type: 'GET',
async: true,
url: "{{route('stats.monthlyData')}}",
dataType: 'json',
success: function (response) {
    var labels = [];
    var data = [];
    $.each(response, function () {
        labels.push(this.month_name);
        data.push(this.record_count);
    });
    drawChart('# of Records', labels, data);
}
});

function drawChart(label, labels, data){
    var ctx = document.getElementById("chart");
    //Chart.defaults.global.defaultColor = "#3498db"; Tried this but does not work
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: label,
                data: data,
                //defaultColor: ['#3498db'], Tried this but does not work
                backgroundColor: ['#3498db'], //Only the first bar gets set
                borderColor: [],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

}

谢谢。

更新

如果它对任何人有帮助，问题是我将 backgroundColor 属性设置为只有一个条目的数组。如果您想为所有列默认它，那么它应该只设置为一个字符串。 感谢 @mp77 让我注意到这个问题。

Answer 1

您需要在

fillColor

数组中使用

datasets

属性，如下所示 - （不要使用

borderColor

，而是尝试使用

strokeColor

，如下所示）

datasets: [{
    label: label,
    data: data,
    fillColor: "rgba(14,72,100,1)", // v2+ uses background color
    strokeColor: "brown",
    borderWidth: 1
}]

完整的工作示例可以从图表js的演示之一中看到这里

Answer 2

在最新版本中，我使用了

backgroundColor

而不是

fillColor

Answer 3

您使用了一系列颜色。 Chart.js 可以使用它，但随后会为每个条形使用一种颜色。如果您想让所有条形都具有相同的颜色，请不要使用数组，而应使用单个值。像这样：

backgroundColor: "#33AEEF",

如果您希望每个条形都有不同的颜色，请使用数组，如下所示：

backgroundColor: ["#FF0000", "#00FF00", "#0000FF", "#33AEEF"],

我也将边框设置为 0，但这是个人喜好，如下所示：

borderWidth: 0,

Answer 4

这是来自 Chart.js 文档的答案：

如果您对颜色没有任何偏好，您可以使用内置的 Colors 插件。它将循环显示七种 Chart.js 品牌颜色的调色板。您所需要做的就是导入并注册插件：

import { Colors } from 'chart.js';
Chart.register(Colors);