Highcharts风向玫瑰图脉动标记动画仅显示在容器左侧问题求助

在实现动态脉动标记效果时，你遇到了动画仅出现在容器左侧的问题，根源在于极坐标（风向玫瑰图）和直角坐标系的坐标转换逻辑不同，原代码使用的toPixels方法是针对直角坐标系的，不适用于极坐标场景。

原问题代码：

series.pulse
.attr({
    x: series.xAxis.toPixels(point.x, true),
    y: series.yAxis.toPixels(point.y, true),
    r: series.options.marker.radius,
    opacity: 1,
    fill: series.color
})
.animate({
    r: 20,
    opacity: 0
}, {
    duration: 1000
});

修正方案 #

直接使用Highcharts为极坐标点预计算的plotX和plotY属性，这两个属性代表点在画布上的绝对坐标，无需额外转换：

series.pulse
.attr({
    x: point.plotX,
    y: point.plotY,
    r: series.options.marker.radius,
    opacity: 1,
    fill: series.color
})
.animate({
    r: 20,
    opacity: 0
}, {
    duration: 1000
});

原理说明 #

风向玫瑰图属于极坐标图表，其轴的计算逻辑和普通直角坐标系差异很大。series.xAxis.toPixels和series.yAxis.toPixels方法是为直角坐标系设计的，用在极坐标下会得到错误的坐标值，导致动画元素偏移到容器左侧。而point.plotX和plotY是Highcharts内部已经处理好的画布坐标，无论坐标系类型如何，都能精准定位到数据点的位置。

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