我正在使用ChartJs 2.7.2绘制简单的条形图。在我的应用程序中,条形的数量在5到15之间变化。默认情况下,条形在图表的整个宽度上平均分布。但是,我希望这些条具有固定的宽度/向左对齐(因此,当只有5条时,它们不会占据整个宽度,而是保持向左对齐)。请查看下面的屏幕截图进行澄清。
答案 0 :(得分:2)
您可以提供一个labels
数组,该数组用空字符串填充到所需的长度,例如15。
这将确保轴上类别的数量保持一致,从而即使在较少的条(Fiddle)的情况下,也可以确保条保持相同的宽度并左对齐。
(如果愿意,也可以用data
填充0
数组,以保持一致性,但这不是必须的-labels
数组是确定轴外观的因素。 )
var data = [12, 19, 3, 5, 2];
var labels = ["a", "b", "c", "d", "e"];
for (var i = labels.length; i < 15; i++) {
labels.push("");
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Count',
data: data
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});