Как поместить всплывающую подсказку в highcharts.js
Точно так же, как есть всплывающие подсказки для отдельных точек на графике, например, на линейном графике, я хотел бы иметь всплывающую подсказку также при наведении курсора на метку. Какой самый простой способ сделать это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Пока нашел два варианта. Сначала будет своего рода внешний, и называется он инструментальной типипсией. Другой — с помощью плагина custom-events highcharts. Третий родной для высоких чартов, я думаю, что это правильный путь.
Пожалуйста, обратитесь к приведенному ниже примеру. Добавляя события mouseover и mouseout к элементу, вы можете вызвать встроенную всплывающую подсказку Highcharts:
chart: {
...,
events: {
load: function() {
var chart = this,
xAxis = chart.xAxis[0],
halfTooltipWidth,
posX,
posY;
for (var key in xAxis.ticks) {
(function(label) {
label
.on('mouseover', function(e) {
chart.tooltip.refresh({
series: chart.series[0],
getLabelConfig: function() {}
});
halfTooltipWidth = chart.tooltip.label.width / 2;
posX = label.xy.x - halfTooltipWidth;
posY = label.xy.y;
chart.tooltip.move(posX, posY, posX + halfTooltipWidth, posY - 10);
})
.on('mouseout', function(e) {
chart.tooltip.hide();
});
})(xAxis.ticks[key].label)
}
}
}
},
tooltip: {
headerFormat: '',
formatter: function() {
if (this.y) {
return 'Point'
}
return 'Custom tooltip'
}
}
Живая демонстрация: http://jsfiddle.net/BlackLabel/2jr0xdcw/
Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Tooltip
На вашей скрипке всплывающая подсказка всегда говорит «Пользовательская всплывающая подсказка».
Привет @Vladimir Despotovic, я использовал метод refresh, чтобы показать всплывающую подсказку, и метод move, чтобы расположить ее рядом с меткой. Внутренняя строка определена в tooltip.formatter — это всего лишь пример, вы можете отформатировать ее по своему усмотрению.
Формат идеальный. Однако я не могу получить в нем правильные данные. Кажется, он изолирован таким образом, как вы его реализовали, поэтому я не могу вводить в него какие-либо свои данные.
Обычный метод доступа к "this.pos" и "this" почему-то не работает. Эти переменные не дают мне значения индекса точки.
Вы можете добавить необходимые значения в функцию getLabelConfig, например: jsfiddle.net/BlackLabel/897fwohy
Хорошо, это приносит больше по оси x (не совсем то, что я хотел, но приближается). Но теперь всплывающая подсказка для самой точки испорчена (всегда появляется «Точка»).
Вам нужно отредактировать первую часть функции formatter, например здесь: jsfiddle.net/BlackLabel/5foLd170 Я использовал средство форматирования по умолчанию.
Привет @Potaczek. Я добавил скрипку о том, какие проблемы у меня сейчас. У меня также есть метка, представленная маленьким красным квадратом. Всплывающая подсказка всегда отображается под. Мне нужно, чтобы он отображался над меткой, и, похоже, я не могу этого сделать. Не могли бы вы взглянуть? Большое спасибо, кажется, вы эксперт в highcharts.
Я приму ваш ответ и открыл новый вопрос для вновь возникшей проблемы, которая у меня возникла:stackoverflow.com/questions/65321590/…
Я на самом деле не понимаю логики в вашей скрипке ..... можете ли вы написать подробнее?