如何在Chart.js中为条形设置默认颜色 [英] How to set default colour for bars in Chart.js

问题描述

这看起来似乎很琐碎，但我可能无法找到如何为chart.js中的条形设置默认颜色。

This seems stupidly trivial but try as I might I cannot seem to find how to set a default colour for bars in chart.js.

我的图表正在拍摄来自ajax请求的数据和图表正好呈现。但是，既不更新 Chart.defaults.global.defaultColor 也不会将 defaultColor 作为选项添加到数据集中有效。

My charts is taking its data from an ajax request and the chart is rendering just fine. However neither updating Chart.defaults.global.defaultColor nor adding defaultColor to the dataset as an option has any effect.

我非常感谢任何指点我正确方向的人。

I would very much appreciate anyone pointing me in the right direction here.

$.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让我注意到这个问题。

In case it helps anyone, the issue was that I was setting the backgroundColor property to an array with only a single entry. If you want to default it for all columns then it should only be set to a string. Credit to @mp77 for leading me to notice this issue.

推荐答案

你需要使用 fillColor 属性在数据集这样的数组中 -
（而不是 borderColor ，尝试 strokeColor 如下所示）

You need to use fillColor property in your datasets array like this - (and instead of borderColor, try strokeColor like below)

datasets: [{
    label: label,
    data: data,
    fillColor: "rgba(14,72,100,1)"//version >2 useus background color
    strokeColor: "brown",
    borderWidth: 1
}]

从中可以看到一个完整的工作示例chartjs的一个演示这里

A full working example can be seen from one of the demos of chartjs here

这篇关于如何在Chart.js中为条形设置默认颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！