如何在react-chartjs-2中设置同一分类下的柱状图间距

要实现同一分类内柱子之间的间隙，关键是调整Chart.js中控制柱子宽度和布局的两个核心参数：barPercentage和categoryPercentage，具体操作如下：

核心原理 #

• barPercentage：单个柱子占其所属分类宽度的比例（取值0-1），同一分类下所有柱子的barPercentage总和小于1时，就会在柱子之间产生间隙。
• categoryPercentage：整个分类（包含所有柱子）占可用空间的比例，保持这个值可以保证不同分类间的原有间距不变。

具体修改方案 #

方案1：全局统一设置（推荐） #

在options的elements.bar中调整参数，对所有数据集生效：

export const options = {
  indexAxis: "y" as const,
  elements: {
    bar: {
      borderWidth: 2,
      categoryPercentage: 0.7, // 保留分类间原有间距
      barPercentage: 0.2 // 降低单个柱子占比，让同一分类多柱子总占比<1，从而留出间隙
    }
  },
  // 其他配置保持不变
};

同时删除所有dataset中单独设置的barPercentage和categoryPercentage，避免覆盖全局配置。

方案2：针对单个数据集设置 #

如果需要不同数据集的柱子宽度有差异，可以在每个dataset中单独调整barPercentage，确保同一分类下所有数据集的barPercentage总和小于1：

// 示例：每个dataset的barPercentage设为0.2
{
  label: "Selected Year Data 1",
  // 其他配置不变
  barPercentage: 0.2,
  categoryPercentage: 0.7 // 统一分类整体占比
},
// 其他dataset同理设置barPercentage为0.2

调整后的效果 #

修改后同一分类内的柱子会自动产生均匀间隙，同时保留不同分类间的原有间距，符合参考图的布局效果。

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