这看起来愚蠢地微不足道,但尽我所能,我似乎无法找到如何为 Chart.js 中的条形图设置默认颜色。
我的图表正在从 ajax 请求中获取数据,并且图表渲染得很好。然而既不更新Chart.defaults.global.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
}
}]
}
}
});
}
Thanks.
UPDATE
如果它对任何人有帮助,问题是我正在设置背景颜色属性为只有一个条目的数组。如果您想为所有列默认它,那么它应该只设置为一个字符串。
感谢 @mp77 让我注意到这个问题。