Как добавить интерактивную HTML-ссылку в подсказку в Highcharts 5.0.x?

Question

я следующая конфигурацией для Highcharts подсказки:

tooltip: { 
     useHTML: true, 
     style: { 
      padding: 0 
     }, 
     formatter: function() { 
      return '<a href="http://google.com">' + this.x + ': ' + this.y + '</a>' 
     } 
    } 

Пример: http://jsfiddle.net/maLqoyge/2/

Ссылка внутри подсказки видна, но это, кажется, не представляется возможным навести курсор мыши над ней: ссылка не получить подчеркнутую и курсор мыши не изменяется. Также не удается открыть URL-адрес, щелкнув ссылку.

В Highcharts 3.0.10 аналогичная всплывающая подсказка все еще работала. Возможно ли сделать ссылку внутри всплывающей подсказки, чтобы она функционировала так же в Highcharts 5.0.x?

Answer 1

Вы должны установить tooltip.style.pointerEvents в 'auto'.

tooltip: { 
    useHTML: true, 
    style: { 
    padding: 0, 
    pointerEvents: 'auto' 
    }, 
    formatter: function() { 
    return '<a href="http://google.com">' + this.x + ': ' + this.y + '</a>' 
    } 
}, 

пример: http://jsfiddle.net/zfwx6s9q/

Answer 2

В диаграмме добавьте эту часть для обработки событий щелчка.

$(function() { 
    Highcharts.chart('container', { 
     title: { 
      text: 'Full HTML tooltip with border, background and shadow' 
     }, 

     tooltip: { 
      useHTML: true, 
      style: { 
       padding: 0 
      }, 
      formatter: function() { 
       return '<a href="http://google.com">' + this.x + ': ' + this.y + '</a>' 
      } 
     },chart : { 
        events :{ 
     click : function(event){ 

     var url = 'http://google.com/#q='+event.chartX+': ' + event.chartY; 
     window.open(url,'_blank'); 
     } 
     }}, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }); 
});