Highcharts分组柱状图实现问题咨询

看起来你现在的代码是通过关闭分组+设置不同pointPadding来手动错开柱子，但你想要的是每个月份下多个城市的柱子成组排列的标准分组柱状图对吧？完全可以用Highcharts的grouping配置来实现，这也是最直接的方式——你之前的代码刚好把关键的分组开关关掉了，调整几个配置就能达到你要的效果。

关键修改要点 #

• 把plotOptions.bar.grouping从false改为true（其实Highcharts默认就是开启分组的，你直接删掉这个配置项也可以），这样Highcharts会自动将同属一个月份的所有城市柱子归为一组。
• 删除每个series里的pointPadding配置，分组模式下Highcharts会自动管理柱子的间距和分组内的间隙，不需要手动设置。
• 如果你需要显示图例来区分不同城市，把legend.enabled从false改为true（默认的图例位置就很实用，也可以根据需求调整布局）。

修改后的完整代码示例 #

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    legend: {
        // 开启图例，方便区分不同城市
        enabled: true,
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        shadow: true
    },
    tooltip: {
        shared: true,
        valueSuffix: ' mm'
    },
    plotOptions: {
        bar: {
            // 开启分组，这是实现你需求的核心开关
            grouping: true,
            shadow: false
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'New York',
        data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    }]
});

补充说明 #

修改后，每个月份下的Tokyo、New York、London、Berlin柱子会自动挨在一起形成一个组，不同月份的组之间保持合理间距，完全符合你想要的分组效果。

针对你的疑问：完全可以用grouping来实现你的需求，你之前的思路刚好走反了——关闭分组+手动设置pointPadding是用来做“无分组的分散/重叠柱子”，而开启分组才是实现同类别下成组排列的标准方式。如果之后你需要更复杂的排列（比如部分系列分组、部分不分组），可以单独给某个系列设置grouping: false来覆盖全局配置，但对于你的基础需求来说，开启全局的bar分组就足够了。

内容来源于stack exchange