Часто в tooltip нужно загрузить больше информации, чем мы передаем непосредственно в диаграмму. Или же загрузить дополнительные или обработанные данные. Вариантов — множество. Рассмотрим пример ajax-вызова при отображении tooltip в Highchart\Highstock.
Для изменения внешнего вида стандартного tooltip предусмотрен параметр formatter:
.....
tooltip: {
formatter: function() {
return 'Текст, который переопределит стандартный tooltip.' ;
},
......
}
....
Очевидно, что метод возвращает строку, отображаемую в подсказке. Все могло бы быть проще — но простая вставка $.ajax не поможет нам — т.к. метод отработается, не дожидаясь её выполнения. Поэтому идем на хитрость:
formatter: function() {
// переменная s содержит в себе текст будущей подсказки
var s = '' ;
var th = this;
// опрашиваем все Серии
$.each(this.points, function () {
s += '
' + this.series.name + ': ' ;
var value = '' ;
if( ( typeof(this.point.options.high)) != 'undefined' ){
var value = Math.abs( (this.point.options.high - this.point.options.low).toFixed(2) ) ; ;
}else{
if( ( typeof(this.point.options.labelValue)) != 'undefined' ){
value = this.point.options.labelValue ;
}else{
value = Math.abs( (this.point.options.y).toFixed(2) ) ; ;
}
}
s += value ;
});
$.post(
"/some-url",
{},
function( data ){
// data - условное содержимое, которое нужно добавить в подсказку
// строка ниже получет доступ к ПЕРВОЙ диаграмме на странице и устанавливает новое содержимое...
Highcharts.charts[0].tooltip.label.textSetter( s += data );
}
) ;
// содержимое tooltip пока не отработает ajax
return "... Загрузка ...";
}
Вот такой подход. Метод опробован на реальном проекте и отлично работает.
Пока всё — удачи!