chart.js - ChartJs 条形图 - 将条形保持在左侧而不是在宽度上均匀分布

Question

我正在使用 ChartJs 2.7.2 来绘制一个简单的条形图。在我的应用程序中，条形图的数量将在 5 到 15 之间变化。默认情况下，条形图均匀分布在图表的整个宽度上。但是，我希望这些条具有固定宽度/左对齐（所以当只有 5 个条时，它们不会占据整个宽度，而是保持左对齐）。请参阅下面的屏幕截图以进行说明。

标签： chart.jsbar-chart

Answer 1

您可以提供一个labels用空字符串填充到所需长度的数组，例如 15。

这将确保轴上的类别数量一致，从而确保即使条形较少（小提琴），条形也会保持相同的宽度并左对齐。

（如果您愿意，也可以data用 's 填充数组以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
        }
      }]
    }
  } 
});