如何在Highcharts中旋转标注标签？

问题原因 #

你之前通过style.transform设置旋转无效，是因为Highcharts标注标签是SVG元素，其旋转需要通过SVG原生的transform属性而非CSS样式控制，直接在style中设置会被内部逻辑覆盖。

解决方案 #

方案1：使用官方内置rotation属性

这是最直接的方式，Highcharts为标注标签提供了rotation配置项，直接设置角度数值即可（顺时针为正方向）：

Highcharts.chart('container', {
    ...
    annotations: [{
        labels: [{
            point: {
                xAxis: 0,
                yAxis: 0,
                x: 10,
                y: 15
            },
            text: 'Annotation Label',
            rotation: 90 // 设置顺时针旋转90度
        }]
    }],
    ...
});

方案2：通过attr手动配置SVG变换

如果你的Highcharts版本未支持rotation属性，可通过attr直接设置SVG的transform属性：

Highcharts.chart('container', {
    ...
    annotations: [{
        labels: [{
            point: {
                xAxis: 0,
                yAxis: 0,
                x: 10,
                y: 15
            },
            text: 'Annotation Label',
            attr: {
                // 仅设置角度：以元素左上角为原点旋转
                transform: 'rotate(90)'
                // 如需自定义旋转原点，格式为 rotate(角度 原点X 原点Y)
                // transform: 'rotate(90 20 30)'
            }
        }]
    }],
    ...
});

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