如何在Highcharts 5.0.x中將可單擊的HTML鏈接添加到工具提示中？

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]
        }]
    });
});