Highcharts. Ajax-загрузка сообщения в tooltip.


Часто в 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 "... Загрузка ..."; }

Вот такой подход. Метод опробован на реальном проекте и отлично работает.

Пока всё — удачи!

,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *