Chart.js 2.9.4 如何彻底移除0值柱形及对应空白间隙

这个需求可以实现，空白间隙是Chart.js 2.9.x版本分组柱状图的默认特性：每个分类下会为所有数据集均等分配宽度，即使对应数值为0也会预留占位。你可以通过以下方式解决：

方案1：直接隐藏0值柱子的占位 #

在原有配置的options中新增animation回调，强制将0值柱子的宽度设为0，完全消除间隙：

var myLineChart = new Chart(ctx, {
  // 原有type、data配置保持不变
  options: {
    // 新增以下animation配置
    animation: {
      onProgress: function(animation) {
        const chart = animation.chart
        chart.data.datasets.forEach((ds, dsIdx) => {
          ds.data.forEach((val, dataIdx) => {
            if (val <= 0) {
              const meta = chart.getDatasetMeta(dsIdx)
              meta.data[dataIdx]._view.width = 0
            }
          })
        })
      }
    },
    // 原有plugins、responsive、title等其他配置全部保留
  }
})

方案2：让有值柱子自动填充空余宽度 #

如果希望分类下的有效柱子自动占满整个分类宽度，可以在x轴配置中调整柱子占比参数：

xAxes: [{
  // 原有time、gridLines、ticks配置保持不变
  barPercentage: 1,
  categoryPercentage: 0.9
}]

方案3：数据预处理（最优） #

如果不需要保留原有数据集的0值占位逻辑，可以提前过滤掉每个分类下所有值为0的数据集项，重构labels和datasets结构，从数据源层面消除空占位。

内容的提问来源于stack exchange，提问作者Lhen