如何在Highcharts中创建指定样式的柱形图？

核心实现步骤 #

1. 实现柱子的起止值区间 #

使用Highcharts的columnrange系列类型，这是专门用于展示数值范围的柱形图类型，每个数据点通过low（起始值）和high（结束值）定义区间范围。注意需要引入highcharts-more.js扩展文件，否则无法使用该系列类型。

2. 实现柱子的线性渐变背景 #

通过Highcharts的渐变配置语法，为每个柱子单独定义color属性：

• linearGradient：数组格式[x1, y1, x2, y2]，用于指定渐变方向，例如[0,1,0,0]表示从柱子底部到顶部的垂直渐变。
• stops：数组格式，每个元素为[位置比例, 颜色值]，位置0对应渐变起点，1对应终点。

完整代码示例 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 80%; height: 400px;"></div>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'columnrange'
    },
    title: {
        text: '区间柱形图（带渐变）'
    },
    xAxis: {
        categories: ['类别A', '类别B', '类别C', '类别D']
    },
    yAxis: {
        title: {
            text: '数值范围'
        }
    },
    plotOptions: {
        columnrange: {
            borderWidth: 0,
            borderRadius: 4 // 可选：设置柱子圆角
        }
    },
    series: [{
        name: '数值区间',
        data: [
            {
                low: 12,
                high: 35,
                color: {
                    linearGradient: [0, 1, 0, 0],
                    stops: [
                        [0, '#FFE8CC'],
                        [1, '#FF7D00']
                    ]
                }
            },
            {
                low: 18,
                high: 42,
                color: {
                    linearGradient: [0, 1, 0, 0],
                    stops: [
                        [0, '#D4EDDA'],
                        [1, '#2E7D32']
                    ]
                }
            },
            {
                low: 8,
                high: 28,
                color: {
                    linearGradient: [0, 1, 0, 0],
                    stops: [
                        [0, '#E3F2FD'],
                        [1, '#1565C0']
                    ]
                }
            },
            {
                low: 22,
                high: 48,
                color: {
                    linearGradient: [0, 1, 0, 0],
                    stops: [
                        [0, '#F8BBD0'],
                        [1, '#C2185B']
                    ]
                }
            }
        ]
    }]
});
</script>

关键说明 #

• columnrange系列：必须依赖highcharts-more.js，每个数据点通过low和high确定柱子的上下边界。
• 渐变配置：可以根据需求调整linearGradient的参数实现水平或斜向渐变，也可以通过plotOptions统一设置渐变样式，再针对单个柱子修改。

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