ApexCharts分组柱状图：调整组内柱子间距的方法

我正在使用带分组标签的ApexCharts柱状图，官方示例代码如下。想要调整组内柱子的间距，让2019、2020分组下的柱子间距几乎消失或大幅缩小。尝试设置columnWidth: '30%'仅调整了柱子宽度，也试过Stack Overflow上的计算公式，但都未达到预期效果，请问如何实现该需求？

官方示例代码 #

var options = {
  series: [{
    name: "sales",
    data: [{
      x: '2019/01/01',
      y: 400
    }, {
      x: '2019/04/01',
      y: 430
    }, {
      x: '2019/07/01',
      y: 448
    }, {
      x: '2019/10/01',
      y: 470
    }, {
      x: '2020/01/01',
      y: 540
    }, {
      x: '2020/04/01',
      y: 580
    }, {
      x: '2020/07/01',
      y: 690
    }, {
      x: '2020/10/01',
      y: 690
    }]
  }],
  chart: {
    type: 'bar',
    height: 380
  },
  xaxis: {
    type: 'category',
    labels: {
      formatter: function(val) {
        return "Q" + dayjs(val).quarter()
      }
    },
    group: {
      style: {
        fontSize: '10px',
        fontWeight: 700
      },
      groups: [
        { title: '2019', cols: 4 },
        { title: '2020', cols: 4 }
      ]
    }
  },
  title: {
    text: 'Grouped Labels on the X-axis',
  },
  tooltip: {
    x: {
      formatter: function(val) {
        return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
      }  
    }
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

尝试过的代码 #

var optimalColumnWidthPercent = 20 + (60 / (1 + 30*Math.exp(-seriesLength /3)));
plotOptions: {
  bar: {
    columnWidth: optimalColumnWidthPercent + "%"
  },
},

解决方案 #

要实现组内柱子间距大幅缩小甚至几乎消失的效果，需要同时调整以下几个核心参数：

• plotOptions.bar.barGap：控制同系列内柱子的间距，设置为0%或极小百分比（如1%），直接消除组内柱子间的空隙
• plotOptions.bar.columnWidth：适当增大柱子宽度，让柱子尽可能填满组内的空间，比如设置为80%
• xaxis.group.padding：可选，用来控制不同分组之间的间距，避免分组内柱子和其他分组的柱子过于靠近

修改后的完整代码 #

var options = {
  series: [{
    name: "sales",
    data: [{
      x: '2019/01/01',
      y: 400
    }, {
      x: '2019/04/01',
      y: 430
    }, {
      x: '2019/07/01',
      y: 448
    }, {
      x: '2019/10/01',
      y: 470
    }, {
      x: '2020/01/01',
      y: 540
    }, {
      x: '2020/04/01',
      y: 580
    }, {
      x: '2020/07/01',
      y: 690
    }, {
      x: '2020/10/01',
      y: 690
    }]
  }],
  chart: {
    type: 'bar',
    height: 380
  },
  // 新增plotOptions配置
  plotOptions: {
    bar: {
      columnWidth: '80%', // 增大柱子宽度，填满组内空间
      barGap: '0%' // 组内柱子间距设为0，完全贴合
    }
  },
  xaxis: {
    type: 'category',
    labels: {
      formatter: function(val) {
        return "Q" + dayjs(val).quarter()
      }
    },
    group: {
      style: {
        fontSize: '10px',
        fontWeight: 700
      },
      padding: 40, // 控制分组之间的横向间距，可按需调整
      groups: [
        { title: '2019', cols: 4 },
        { title: '2020', cols: 4 }
      ]
    }
  },
  title: {
    text: 'Grouped Labels on the X-axis',
  },
  tooltip: {
    x: {
      formatter: function(val) {
        return "Q" + dayjs(val).quarter() + " " + dayjs(val).format("YYYY")
      }  
    }
  },
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

参数说明 #

• barGap: '0%'：让同组内的柱子完全贴合，若需要极微小间距可设为1%
• columnWidth: '80%'：柱子宽度占每个X轴分类宽度的80%，确保柱子足够宽，填满组内空间
• xaxis.group.padding: 40：设置分组之间的横向间距，避免不同年份的组靠得太近，可根据图表整体宽度调整数值

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