javascript - Highcharts:不同屏幕尺寸断点上的渲染器定位问题

Question

我正在使用 Highcharts` 渲染器在图表上渲染自定义图标(在我的例子中是列上方的奖杯图标，请参阅 fiddle )。

在不同的布局断点(xAxis 标签旋转变化)上，奖杯的位置被破坏(参见附图):

Correct positioning

Wrong positioning

图标定位的相关代码为:

this.renderer.image('http://www.myiconfinder.com/uploads/iconsets/256-256-6fc6f09b8c986ade7286aa71ba43c71e-trophy.png',
                     point.plotX - (imgWidth/5), 
                     point.plotY + imgHeight, 
                     imgWidth, 
                     imgHeight)
.attr({zIndex: 3})
.add()

这是一个错误还是我必须添加一些额外的动态填充？

谢谢

菲利普

Answer 1

您忘记在计算中包含 chart.plotTop。点的属性 plotX 和 plotY 与 plotArea 相关，并且 chart.renderer 方法包含整个图表。

this.renderer.image(
    url, 
    point.plotX - (imgWidth / 5), 
    point.plotY + this.plotTop - imgHeight, 
    imgWidth, 
    imgHeight
).attr({
    zIndex: 3
}).add();

现场演示:http://jsfiddle.net/BlackLabel/svp7rnkg/