寻求Highcharts柱状对比图添加降幅箭头的实现方案

要直观展示series1在before和after之间的降幅，你可以利用Highcharts的**Annotations（标注）**功能，或者通过chart.renderer自定义绘制箭头与降幅文本。以下是两种可行方案：

方案一：使用Annotations官方标注功能（推荐） #

Annotations是Highcharts官方提供的标注模块，配置简洁且易于维护，适合快速实现需求：

修改后的完整代码 #

Highcharts.chart('chart1', {
    chart: {
        type: 'column',
    },
    title: { 
        text: 'Compare chart',
    },
    subtitle: null,
    xAxis: {
        categories: ['before', 'after'],
    },
    yAxis: [{
        title: {
            text: 'title1'
        },
    }, {
        title: {
            text: 'title2'
        },
        opposite: true,
    }],
    // 新增标注配置
    annotations: [{
        labels: [{
            point: {
                xAxis: 0,
                yAxis: 0,
                x: 0,
                y: 8652
            },
            text: '',
            align: 'right'
        }, {
            point: {
                xAxis: 0,
                yAxis: 0,
                x: 1,
                y: 4321
            },
            text: `↓ ${8652 - 4321} (${Math.round((8652 - 4321)/8652*100)}%)`,
            align: 'left',
            verticalAlign: 'top'
        }],
        connector: {
            type: 'arrow',
            endMarker: 'arrow',
            strokeWidth: 2,
            stroke: '#ff0000'
        }
    }],
    series: [{
        name: 'series1',
        color: '#f5b93d',
        data: [8652, 4321],

    }, {
        name: 'series2',
        color: '#42a7f4',
        data: [100, 50],
        yAxis: 1,
    }]
});

方案二：使用renderer自定义绘制（高度灵活） #

如果需要对箭头样式、文本位置做更精细化调整，可以在图表加载事件中用renderer绘制SVG元素：

修改后的核心配置（仅展示新增部分） #

chart: {
    type: 'column',
    events: {
        load: function() {
            const beforePoint = this.series[0].points[0];
            const afterPoint = this.series[0].points[1];
            const diff = beforePoint.y - afterPoint.y;
            const diffPercent = Math.round(diff / beforePoint.y * 100);
            
            // 绘制箭头图形
            this.renderer.path([
                'M', beforePoint.plotX + this.plotLeft + beforePoint.shapeArgs.width/2, beforePoint.plotY + this.plotTop,
                'L', afterPoint.plotX + this.plotLeft - 10, afterPoint.plotY + this.plotTop,
                'L', afterPoint.plotX + this.plotLeft, afterPoint.plotY + this.plotTop + 5,
                'L', afterPoint.plotX + this.plotLeft + 10, afterPoint.plotY + this.plotTop,
                'Z'
            ])
            .attr({
                fill: '#ff0000',
                stroke: '#ff0000',
                'stroke-width': 2
            })
            .add();
            
            // 绘制降幅文本
            this.renderer.text(
                `↓ ${diff} (${diffPercent}%)`,
                afterPoint.plotX + this.plotLeft + 20,
                afterPoint.plotY + this.plotTop + 5
            )
            .attr({
                align: 'left',
                fontSize: 12,
                color: '#333'
            })
            .add();
        }
    }
}

两种方案都能实现目标效果：Annotations适合快速落地的简单标注场景，renderer适合需要高度自定义的需求。

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