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

62o28rlo  于 2023-10-18  发布在  Chart.js
关注(0)|答案(4)|浏览(166)

这看起来愚蠢的琐碎,但尝试,我可能无法找到如何设置一个默认颜色的酒吧在chart.js。
我的图表是从一个apache请求中获取数据,图表渲染得很好。但是,更新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让我注意到这个问题。

aelbi1ox

aelbi1ox1#

你需要像这样在datasets数组中使用fillColor属性-(而不是borderColor,尝试像下面这样的strokeColor

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

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

ccrfmcuu

ccrfmcuu2#

在最新版本中,我使用了backgroundColor而不是fillColor

js4nwp54

js4nwp543#

你使用了一系列的颜色。Chart.js可以使用它,但会使用每个条形的颜色。如果你想让所有的条都是同一种颜色,不要使用数组,而是使用一个值。就像这样:

backgroundColor: "#33AEEF",

如果你想让每个条形图都有不同的颜色,可以使用数组,如下所示:

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

我还将边框设置为0,但这是个人偏好,如下所示:
borderWidth: 0,

rqmkfv5c

rqmkfv5c4#

以下是Chart.js文档中的答案:
如果你对颜色没有任何偏好,你可以使用内置的颜色插件。它将循环通过七个Chart.js品牌颜色的调色板。你所需要做的就是导入并注册插件:

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

相关问题