这看起来愚蠢的琐碎,但尝试,我可能无法找到如何设置一个默认颜色的酒吧在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让我注意到这个问题。
4条答案
按热度按时间aelbi1ox1#
你需要像这样在
datasets
数组中使用fillColor
属性-(而不是borderColor
,尝试像下面这样的strokeColor
)完整的工作示例可以从chartjs here的一个演示中看到。
ccrfmcuu2#
在最新版本中,我使用了
backgroundColor
而不是fillColor
js4nwp543#
你使用了一系列的颜色。Chart.js可以使用它,但会使用每个条形的颜色。如果你想让所有的条都是同一种颜色,不要使用数组,而是使用一个值。就像这样:
如果你想让每个条形图都有不同的颜色,可以使用数组,如下所示:
我还将边框设置为0,但这是个人偏好,如下所示:
borderWidth: 0,
rqmkfv5c4#
以下是Chart.js文档中的答案:
如果你对颜色没有任何偏好,你可以使用内置的颜色插件。它将循环通过七个Chart.js品牌颜色的调色板。你所需要做的就是导入并注册插件: