我在尝试在 chart.js 中动态填充条形图时遇到了一些问题。我有两个数组,一个用于标签,一个用于价格,并且它们都已经填充了来自 firebase 的排序数据。这是我的代码:
var ctx = document.getElementById('brandChart').getContext("2d");
var data = {
labels: [],
datasets: [{
data: [],
backgroundColor: [
"#424242",
]
}]
};
var options = {
layout: {
padding: {
top: 5
}
},
responsive: true,
legend: {
display: true,
position: 'bottom',
// disable legend onclick remove slice
onClick: null
},
animation: {
animateScale: true,
animateRotate: true
},
};
var opt = {
type: "horizontalBar",
data: data,
options: options
};
if (brandChart) brandChart.destroy();
brandChart = new Chart(ctx, opt);
// dynamically populate chart
for(var i = 0; i < labelData.length; i++){
brandChart.config.data.labels.push(labelData[i]);
}
for(var i = 0; i < priceData.length; i++){
brandChart.config.data.datasets[0].data.push(priceData[i]);
}
brandChart.update();
我设法在条形图中显示了所有这些,但是,结果是这样的:
如果类别太多,每个标签之间会有一种挤压。此外,只有第一个条具有未定义的颜色和图例。有什么想法可以解决这些问题吗?
最佳答案
ɪꜱꜱᴜᴇ #1 - ꜱᴏʟᴜᴛɪᴏɴ
在图表选项中为 y 轴刻度添加回调:
options: {
scales: {
yAxes: [{
ticks: {
callback: function(t, i) {
if (!(i % 2)) return t;
}
}
}]
},
...
}
这只会在 y 轴上显示所有其他标签。
ɪꜱꜱᴜᴇ #2 - ꜱᴏʟᴜᴛɪᴏɴ
这是因为,您的 backgroundColor
数组中只有一种颜色。如果您想为每个条形使用不同的颜色,则需要使用多个颜色值填充此数组。
编辑:从您更新的问题看来,您已经有点明白了。
ɪꜱꜱᴜᴇ #3 - ꜱᴏʟᴜᴛɪᴏɴ
为您的 dataset
定义 label
属性,如下所示:
datasets: [{
label: 'Legend Title', //<- define this
data: [],
backgroundColor: ["#424242", ]
}]
关于javascript - Chart.js 不显示动态填充的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45427957/