Highcharts: проблема позиционирования рендерера на контрольных точках с разным размером экрана

Question

Я использую средство рендеринга Highcharts для отображения пользовательских значков на диаграмме (в моем случае значки трофеев над столбцами см. fiddle ).

В различных точках разрыва макета (при изменении поворота метки xAxis) расположение трофея нарушается (см. Прикрепленные изображения):

Правильное расположение

Неправильное позиционирование

Соответствующий код для позиционирования значка:

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/