如何使用Highcharts沿X轴绘制横向图表

要实现你需求中的横向图表，可通过以下两种简洁方式完成：

方法一：直接使用bar图表类型 #

Highcharts内置的bar类型默认采用横向布局，是最直接的实现方式：

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '横向条形图示例'
    },
    xAxis: {
        categories: ['分类1', '分类2', '分类3', '分类4']
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    series: [{
        name: '数据系列',
        data: [15, 23, 18, 27]
    }]
});

方法二：反转坐标轴实现横向柱状图 #

若需基于常规柱状图（column类型）转换为横向，只需启用坐标轴反转配置：

Highcharts.chart('container', {
    chart: {
        type: 'column',
        inverted: true // 反转坐标轴，将柱状图转为横向
    },
    title: {
        text: '反转坐标轴的横向柱状图'
    },
    xAxis: {
        categories: ['分类A', '分类B', '分类C', '分类D']
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    series: [{
        name: '数据系列',
        data: [12, 20, 16, 24]
    }]
});

核心配置说明 #

• chart.type: 'bar'：创建横向图表的首选方案，无需额外调整坐标轴，布局默认符合需求。
• chart.inverted: true：适用于将其他图表类型（如柱状图、折线图）转为横向展示的场景，会交换X轴与Y轴的位置。
• 数据系列、坐标轴标签、样式等配置与常规图表完全一致，可根据实际需求自定义调整。

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