Highcharts: поместите всплывающую подсказку над столбцом на гистограмме

Question

Работая с высокими графиками, я пытаюсь заставить всплывающую подсказку на гистограмме парить прямо над правой стороной гистограммы.Например:

В настоящее время я использую функцию позиционера, но я не могу понять, что математика, чтобы заставить это работать.В настоящее время, когда я пытаюсь использовать опции point.plotX и point.plotY, всплывающая подсказка зависает в том, что кажется случайным пятном, и я не могу найти, где вы могли бы расположить правую позицию бара.Вот код, который я сейчас использую

positioner: function(width, height, point) {
   return {
     x: point.plotX,
     y: point.plotY,
   };
},

, и вот вывод, как это выглядит:

Answer 1

хорошо, из-за стилей меток.Положение всплывающей подсказки:.

Вот как я это исправил.

Этот пример работал с http://jsfiddle.net/fqbkozpr/1/

 return {
        x: Math.max(point.plotX, width), // To the right.
        y: point.plotY + height, // Make sure to be under the line
      };

Answer 2

Кажется, у вас есть опечатка в вашей функции positioner.Вы должны использовать plotY insted of ploty свойство:

tooltip: {
    positioner: function(width, height, point) {
        return {
            x: point.plotX,
            y: point.plotY,
        }
    }
}

Демонстрационная версия: http://jsfiddle.net/BlackLabel/poxv4wq1/

Справочник по API: https://api.highcharts.com/highcharts/tooltip.positioner

РЕДАКТИРОВАТЬ:

Функция позиционера возвращает координаты всплывающей подсказки относительно всей диаграммы.Значения point.plotX и point.plotY относятся к области графика, поэтому необходимо добавить значения chart.plotTop и chart.plotLeft:

    positioner: function(width, height, point) {
        var columnWidth = this.chart.series[0].options.pointWidth;

        return {
            x: point.plotX + this.chart.plotLeft,
            y: point.plotY - columnWidth / 2 + this.chart.plotTop - height
        };
    }

Демонстрационная версия: http://jsfiddle.net/BlackLabel/0cjftrsy/