如何在React-Chart-JS柱状图中居中所有柱子（无需添加空标签）

我用React-Chart-JS构建了垂直柱状图，当前柱子紧贴X轴左右两侧，无额外空白。希望在不改变柱子宽度的前提下，给所有柱子的左右两侧添加空白，让柱子整体居中对齐（期望效果为柱子整体居中，左右两侧留有明显空白，柱子宽度保持不变）。

我试过以下配置，但只会改变柱子宽度，达不到需求：

scales: {
    xAxes: [{
        categoryPercentage: 1.0,
        barPercentage: 1.0
    }]
}

要实现柱子宽度不变且整体居中，可通过以下两种方式配置：

方式一：X轴内边距+偏移配置（推荐） #

在X轴配置中添加offset: true并设置左右内边距，既能保留柱子宽度，又能在X轴两侧留出空白：

// Chart.js v3+ 版本配置
scales: {
  x: {
    offset: true,
    padding: {
      left: 30, // 左侧空白大小，按需调整
      right: 30 // 右侧空白大小，按需调整
    },
    categoryPercentage: 0.8, // 控制柱子在分类区域内的占比，保持宽度稳定
    barPercentage: 1.0
  }
}

// Chart.js v2 版本配置
scales: {
  xAxes: [{
    offset: true,
    padding: {
      left: 30,
      right: 30
    },
    categoryPercentage: 0.8,
    barPercentage: 1.0
  }]
}

方式二：手动设置X轴范围 #

如果需要更精准的控制，可手动定义X轴的最小/最大值，给两侧留出额外空间：

// 假设你有5个分类（索引0-4）
scales: {
  x: { // v3+版本
    min: -0.5, // 向左偏移0.5个单位
    max: 4.5, // 向右偏移0.5个单位
    categoryPercentage: 1.0,
    barPercentage: 1.0
  }
}

// v2版本
scales: {
  xAxes: [{
    min: -0.5,
    max: 4.5,
    categoryPercentage: 1.0,
    barPercentage: 1.0
  }]
}

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