如何减小Chart.js柱状图在数据条数较少时的柱子宽度

可以通过以下三个核心配置项灵活调整柱宽，适配少量数据的展示需求：

• barPercentage：控制单根柱子在所属分类区间的宽度占比，取值范围0-1，默认值为0.9，数值越小柱子越窄
• categoryPercentage：控制分类区间在X轴总宽度中的占比，取值范围0-1，默认值为0.8，数值越小分类间距越小，连带柱子整体占比缩小
• barThickness：直接固定柱子的宽度，单位为像素，设置后会覆盖上述两个百分比配置，无论数据量多少柱子宽度都保持固定

示例配置代码如下：

const barChartConfig = {
  type: 'bar',
  data: {
    labels: ['一季度', '二季度'], // 少量数据示例
    datasets: [{
      label: '销售额',
      data: [2300, 3100],
      // 也可单独为当前数据集设置柱宽，优先级高于全局配置
      // barThickness: 30
    }]
  },
  options: {
    scales: {
      x: {
        // 调整为你需要的比例即可
        categoryPercentage: 0.4,
        barPercentage: 0.5
      }
    }
  }
}

效果参考：

调整优先级说明：如果仅需要缩小单根柱子的宽度，优先调小barPercentage即可；如果同时需要缩小分类之间的空白间距，同步调小categoryPercentage；如果需要固定柱宽不受数据量影响，直接设置barThickness即可。以上配置适配Chart.js v2及以上所有主流版本。

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