HighCharts Column Range系列：如何在高低值间显示虚线并标注数值

完全可以实现你需要的效果，以下是具体的实现思路和代码示例：

核心实现思路 #

借助Highcharts的图表渲染器（renderer）结合load事件，在图表加载完成后遍历每个数据点，计算对应像素坐标，绘制虚线分隔线并添加数值标注。

完整代码示例 #

Highcharts.chart('container', {
    chart: {
        type: 'columnrange',
        inverted: true,
        events: {
            load: function() {
                const chart = this;
                const series = chart.series[0];
                
                series.data.forEach(point => {
                    // 将数据值转换为图表像素坐标（适配反转后的布局）
                    const lowY = chart.yAxis[0].toPixels(point.low);
                    const highY = chart.yAxis[0].toPixels(point.high);
                    const centerX = chart.xAxis[0].toPixels(point.x) + series.pointWidth / 2;
                    
                    // 绘制low值对应的水平虚线
                    chart.renderer.path([
                        'M', centerX - 10, lowY,
                        'L', centerX + 10, lowY
                    ])
                    .attr({
                        stroke: '#000',
                        'stroke-dasharray': '3,3',
                        zIndex: 5
                    })
                    .add();
                    
                    // 绘制high值对应的水平虚线
                    chart.renderer.path([
                        'M', centerX - 10, highY,
                        'L', centerX + 10, highY
                    ])
                    .attr({
                        stroke: '#000',
                        'stroke-dasharray': '3,3',
                        zIndex: 5
                    })
                    .add();
                    
                    // 添加low数值标注
                    chart.renderer.text(point.low, centerX + 15, lowY + 5)
                    .attr({ zIndex: 6 })
                    .add();
                    
                    // 添加high数值标注
                    chart.renderer.text(point.high, centerX + 15, highY + 5)
                    .attr({ zIndex: 6 })
                    .add();
                });
            }
        }
    },
    yAxis: {
        title: { text: '数值范围' }
    },
    xAxis: {
        categories: ['类别1', '类别2']
    },
    series: [{
        name: '数据',
        data: [{
            x: 0,
            low: 7,
            high: 8
        },{
            x: 0,
            low: 8.1,
            high: 9,
            color: "#202020"
        },{
            x: 1,
            low: 6.5,
            high: 7.5
        },{ 
            x: 1,
            low: 7.5,
            high: 8.5,
            color: "#202020"
        }]
    }]
});

关键细节说明 #

1. 坐标转换：使用toPixels()方法将数据的low/high值、x值转换为图表像素坐标，确保虚线和标注位置精准匹配柱形。
2. 虚线样式：通过stroke-dasharray: '3,3'设置短虚线效果，zIndex参数确保虚线显示在柱形上方但不遮挡数值标注。
3. 位置微调：标注位置偏移centerX + 15和lowY + 5，避免与柱形、虚线重叠，可根据实际图表尺寸调整偏移量。

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