首页 文章

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

提问于
浏览 次
2

这似乎是愚蠢的微不足道，但尝试我似乎无法找到如何为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
                    }
                }]
            }
        }
    });

}

谢谢 .

UPDATE

如果它可以帮助任何人，问题是我将 backgroundColor 属性设置为只有一个条目的数组 . 如果要为所有列默认它，则只应将其设置为字符串 . 感谢@ mp77让我注意到这个问题 .

javascript chart.js

1 回答

  • 8

    您需要在 datasets 数组中使用 fillColor 属性 - （而不是 borderColor ，请尝试 strokeColor ，如下所示）

    datasets: [
                label: label,
                data: data,
                fillColor: "rgba(14,72,100,1)"
                strokeColor: "brown",
                borderWidth: 1
            }]

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

    回复于

相关问题