在Highcharts中组合columnrange与stackedcolumn图表的实现需求

以下以Highcharts为例，实现你需要的多类型图表组合效果，核心是通过多系列配置，指定不同图表类型并控制它们在x轴上的位置：

核心实现思路 #

• 共用同一x轴，通过data数组的位置指定每个系列对应到目标列
• 堆叠柱形图通过stack属性绑定同一堆叠组，实现同列堆叠
• 柱形范围图（columnrange）使用[最小值, 最大值]格式的数据集
• 关闭系列分组（grouping: false），确保不同类型图表能在对应列独立渲染

代码示例 #

Highcharts.chart('container', {
    chart: {
        height: 400,
        width: 600
    },
    xAxis: {
        categories: ['第一列', '第二列', '第三列', '第四列'],
        gridLineWidth: 1
    },
    yAxis: {
        title: { text: '数值' },
        min: 0,
        max: 30
    },
    plotOptions: {
        column: {
            grouping: false,
            pointPadding: 0.2,
            borderWidth: 0
        },
        columnrange: {
            grouping: false,
            pointPadding: 0.2
        }
    },
    legend: {
        align: 'center',
        verticalAlign: 'bottom'
    },
    series: [
        // 第一列：堆叠柱形图系列1
        {
            name: '堆叠项A',
            type: 'column',
            stack: 'stack-group',
            data: [10, null, null, null],
            color: '#7cb5ec'
        },
        // 第一列：堆叠柱形图系列2
        {
            name: '堆叠项B',
            type: 'column',
            stack: 'stack-group',
            data: [15, null, null, null],
            color: '#434348'
        },
        // 第二列：柱形范围图
        {
            name: '范围区间1',
            type: 'columnrange',
            data: [null, [5, 20], null, null],
            color: '#90ed7d'
        },
        // 第三列：柱形范围图
        {
            name: '范围区间2',
            type: 'columnrange',
            data: [null, null, [8, 25], null],
            color: '#f7a35c'
        },
        // 第四列：普通柱形图
        {
            name: '普通柱项',
            type: 'column',
            data: [null, null, null, 18],
            color: '#8085e9'
        }
    ]
});

关键配置说明 #

1. 堆叠柱形图：两个系列设置相同的stack值，且data仅在第一列位置有数值，其余为null，确保堆叠效果仅出现在第一列
2. 柱形范围图：系列类型设为columnrange，数据格式为[low, high]，同样通过null填充非目标列的位置
3. 分组控制：关闭grouping避免不同类型系列自动分组，保证每个系列对应到指定的x轴列位置
4. 自定义样式：通过color属性设置各系列颜色，匹配设计需求；调整pointPadding控制列之间的间距

如果使用其他图表库（如Chart.js），核心逻辑一致：创建多系列并指定类型，通过数据位置控制系列在x轴的对应列，调整布局参数避免重叠。

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