Обновление всплывающей подсказки Highcharts при нажатии кнопки не работает с модулем повышения
Я использую Highcharts для рисования своих графиков с модулем повышения. У меня есть несколько рядов данных с общей подсказкой. Значения оси X одинаковы для всех рядов данных. Теперь, когда я нажимаю кнопку, я хочу показать общую всплывающую подсказку. Мой ввод - это индекс точки оси X. Вот мой код, для упрощения я использую два небольших массива данных и хочу показать всплывающую подсказку по индексу=2:
var chart=$('#container').highcharts({
boost: {
useGPUTranslations: true,
seriesThreshold: 1,
},
series: [{
name: 'Data1',
data: [24.2, 24.6, 26.7, 28.6, 30.1, 29.0, 27.5, 27.2, 27.4, 28.2, 27.4, 25.6]
}, {
name: 'Data2',
data: [14.1, 16.9, 22.4, 28.6, 32.8, 33.8, 31.0, 29.8, 29.2, 26.0, 20.3, 15.4]
}],
tooltip: {
crosshairs: [true],
shared: true,
}
}).highcharts();
$('#showTooltipID').on('click', function() {
chart.tooltip.refresh([chart.series[0].points[2], chart.series[1].points[2]]);
});
Пример с seriesThreshold: 1,http://jsfiddle.net/hu5qatjn/34/ -> не работает!
Пример с seriesThreshold: 3,http://jsfiddle.net/hu5qatjn/35/ -> работает! (модуль повышения не активен)
Так что я делаю не так с буст-модулем?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
При использовании модуля boost точка не визуализируется при начальной загрузке, чтобы сэкономить некоторую производительность, поэтому ваш текущий подход не работает - объект точки не имеет достаточно данных/свойств для запуска всплывающей подсказки. Нам нужно отобразить точку программно, прежде чем она будет передана функции tooltip.refresh.
$('#showTooltipID').on('click', function() {
const series1 = chart.series[0],
series2 = chart.series[1],
point1 = series1.getPoint(series1.points[2]),
point2 = series2.getPoint(series2.points[2]);
chart.tooltip.refresh([point1, point2]);
});
Демо: http://jsfiddle.net/BlackLabel/8gos3cx2/
@xFL, обратите внимание, что не все точки отображаются - это связано с ограничением усиления. Проверьте свой series.points.length в консоли — количество отображаемых точек зависит от ширины диаграммы. Как вы можете найти It bypasses some of the standard Highcahrts features, applies some trade-offs and focuses on handling and rendering as many data points as possible as quickly as possiblehighcharts.com/docs/advanced-chart-features/boost-module
поэтому единственное возможное решение с модулем повышения - это вычислить ближайший индекс, показанный на диаграмме? Примерно так: jsfiddle.net/uv8ypx6d/6 Или есть другой более приятный способ, который я упустил?
Еще одна идея, которая пришла мне в голову, состоит в том, чтобы визуализировать эти конкретные точки как выдающуюся фиктивную серию — это решение гарантирует, что эти точки существуют после каждого рендеринга: jsfiddle.net/BlackLabel/anw76js1
Спасибо за эту дополнительную идею. Но в моем последнем сценарии я не буду показывать всплывающую подсказку только один раз при нажатии кнопки. Я наведу курсор на трек gpx на карте, а затем выделю соответствующую всплывающую подсказку. Поэтому я думаю, что всегда показывать фиктивную точку на диаграмме менее эффективно, чем просто искать ближайшую точку, уже нарисованную на диаграмме.
@xFL Понятно, спасибо за информацию. Но нужно ли показывать именно эти данные или подойдет ближайшая точка?
Конечно, фактическая точка была бы хороша, но я не хочу снижать производительность. Так что на данный момент я могу показать ближайшую точку. Или вы думаете, что это возможно сделать производительным способом? Большое спасибо за ваши ответы :)
@xFL, все мои идеи требуют добавления этих точек, а также выполнения и обновления на графике, что определенно плохо скажется на производительности, поэтому такой большой объем данных для поиска ближайшей точки будет лучшим решением.
Хорошо, спасибо за совет, Себастьян! Я отмечу это как ответ, потому что теперь у меня есть решение с поиском ближайшей точки.
Спасибо, я думаю, что это идет в правильном направлении, но это не на 100% то, что я ищу. Вот обновленный пример на основе вашего кода: jsfiddle.net/4gnh5rmk/13 У нас есть два массива по 10000 элементов в каждом. Я хочу показать всплывающую подсказку по индексу 50, но всплывающая подсказка отображается по индексу 661 (=значение x).