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)"//version >2 useus background color
    strokeColor: "brown",
    borderWidth: 1
}]

可以从chartjs here

的其中一个演示中看到一个完整的工作示例

Answer 2

在最新版本中，我使用了enum Category: String, CaseIterable, Codable, Hashable { case featured = "Featured" case lakes = "Lakes" case rivers = "Rivers" case mountains = "Mountains" } struct FilterType: CaseIterable, Hashable, Identifiable { var name: String var category: Category? init(_ category: Category) { self.name = category.rawValue self.category = category } init(name: String) { self.name = name self.category = nil } static var all = FilterType(name: "All") static var allCases: [FilterType] { return [.all] + Category.allCases.map(FilterType.init) } var id: FilterType { return self } }而不是backgroundColor

Answer 3

您使用了多种颜色。 Chart.js可以使用它，但是随后将使用每个条的颜色。如果要使所有条形具有相同的颜色，请不要使用数组，而要使用单个值。像这样：

backgroundColor: "#33AEEF",

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

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

我还将边界设置为0，但这是个人喜好，例如：

enter code here borderWidth：0，

如何在Chart.js

3 个答案: