如何设置双列柱状图：消除系列间隙并保持固定柱宽

问题背景 #

需要制作包含两个Column系列的柱状图，要求：

• 系列之间无间隙
• 柱宽保持恒定

尝试过以下配置但存在问题：

• 设置pointWidth:30后，系列间出现间隙
• 调整groupPadding:0.32消除间隙后，窗口大小变化（如移动端）时布局失效

当前配置代码：

{  
  "chart": {    
    "style": {      
      "fontFamily": "Arial"    
    },    
    "type": "column",    
    "animation": false  
  },  
  "title": {    
    "text": ""  
  },  
  "legend": {    
    "enabled": true,    
    "symbolRadius": 2,    
    "margin": 0,    
    "itemHoverStyle": {      
      "color": "#000"    
    },    
    "itemHiddenStyle": {      
      "color": "#cccccc"    
    }  
  },  
  "credits": {    
    "enabled": false  
  },  
  "series": [{    
    "type": "column",    
    "pointPlacement": 0.2,    
    "name": "Series1",    
    "turboThreshold": 4,    
    "data": [{      
      "name": "abcd",      
      "y": 123.5    
    }],    
    "minPointLength": 3  
  }, {    
    "type": "column",    
    "pointPlacement": 0.2,    
    "name": "Series2",    
    "turboThreshold": 1,    
    "data": [{      
      "name": "abcd",      
      "y": 15.2    
    }],    
    "minPointLength": 3  
  }],  
  "plotOptions": {    
    "series": {      
      "animation": false,      
      "events": {}    
    },    
    "column": {      
      "pointPadding": 0,      
      "groupPadding": 0.3,      
      "borderWidth": 0,      
      "borderRadius": 2    
    }  
  }
}

解决方案 #

通过以下配置调整可实现需求：

核心配置修改 #

1. 移除系列偏移，对齐位置：将两个系列的pointPlacement设为0，避免错位产生间隙
2. 消除内边距：设置pointPadding:0和groupPadding:0，确保系列间无间隙
3. 固定柱宽+响应式适配：设置pointWidth为目标宽度，同时通过resize事件动态调整，避免窗口缩放时布局失效

调整后的完整配置 #

{  
  "chart": {    
    "style": {      
      "fontFamily": "Arial"    
    },    
    "type": "column",    
    "animation": false,
    "events": {
      "resize": function() {
        // 根据容器宽度动态限制柱宽，防止溢出
        const maxPointWidth = 30;
        const minPointWidth = 15;
        const containerWidth = this.container.clientWidth;
        // 按容器宽度比例计算合适的柱宽，取限制范围内的值
        const calculatedWidth = Math.max(minPointWidth, Math.min(maxPointWidth, containerWidth / 8));
        this.series.forEach(series => {
          series.update({ pointWidth: calculatedWidth }, false);
        });
        this.redraw();
      }
    }
  },  
  "title": {    
    "text": ""  
  },  
  "legend": {    
    "enabled": true,    
    "symbolRadius": 2,    
    "margin": 0,    
    "itemHoverStyle": {      
      "color": "#000"    
    },    
    "itemHiddenStyle": {      
      "color": "#cccccc"    
    }  
  },  
  "credits": {    
    "enabled": false  
  },  
  "series": [{    
    "type": "column",    
    "pointPlacement": 0,
    "name": "Series1",    
    "turboThreshold": 4,    
    "data": [{      
      "name": "abcd",      
      "y": 123.5    
    }],    
    "minPointLength": 3,
    "pointWidth": 30
  }, {    
    "type": "column",    
    "pointPlacement": 0,
    "name": "Series2",    
    "turboThreshold": 1,    
    "data": [{      
      "name": "abcd",      
      "y": 15.2    
    }],    
    "minPointLength": 3,
    "pointWidth": 30
  }],  
  "plotOptions": {    
    "series": {      
      "animation": false,      
      "events": {}    
    },    
    "column": {      
      "pointPadding": 0,
      "groupPadding": 0,
      "borderWidth": 0,      
      "borderRadius": 2    
    }  
  }
}

关键说明 #

• pointPlacement:0：让两个系列的柱子完全对齐在同一组位置，配合内边距为0，实现无间隙并排
• resize事件：当窗口尺寸变化时，动态计算柱宽，既保持恒定的视觉比例，又避免柱子溢出容器
• groupPadding:0：消除不同类别组之间的间隙，确保整体布局紧凑

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