作者:mobiledu2502932321 | 来源:互联网 | 2023-02-08 09:11
这似乎是愚蠢的微不足道,但尝试我似乎无法找到如何为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让我注意到这个问题.
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演示中可以看到一个完整的工作示例
供参考:在最新版本中,属性现在是"backgroundColor"
嗨,似乎fillColor不再适用于chart.js 2.尽管如此,谢谢.
出色的答案将我引向答案。我注意到了这个问题,我将backGroundColor设置为只有一个条目而不是一个简单字符串的数组。多谢您的协助。