嵌入式html鏈接的Highcharts復雜工具提示格式問題

Question

我正在嘗試在 highcharts 氣泡圖中格式化工具提示

我想用自定義格式等顯示很多信息，所以我正在使用格式化程序功能。 除了最后一行是 html 鏈接（href 標記）之外，一切正常。 我希望能夠單擊工具提示中的此鏈接並被重定向到新頁面，但是，目前，即使我可以看到用鏈接突出顯示的行，當它呈現時我也無法單擊該鏈接在工具提示中

這是代碼

const chartOptions  = {
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy',
            height: 600,
        },
        title: {text: null},
        legend: {
            enabled: true
        },
        
        tooltip: { 
                useHTML: true,
                formatter: function () {
                    return '<b>' + Highcharts.dateFormat('%e-%b', new Date(this.x)) + ' ' + this.y + '</b><br/>' +
                        '<b>' + 'ACV: ' + '</b>'+ '$' + Math.round(this.point.ACV / 1000).toFixed(1) + 'K' + '<br/>' +
                        'Type: ' + this.point.OPP_COB +  '<br/>' + 'Name: ' + this.point.REP_NAME + '<br/>' + 
                        'Link: ' + '<a href="http://www.mywebsite.com/"' + this.point.customID + ' target="_blank"> Click here </a>'
                        
                }
        },
}

一段時間以來，我嘗試了很多選擇，但沒有任何運氣。 任何幫助將非常感激。 謝謝

Answer 1

您需要將 pointerEvents 屬性設置為'auto' ：

tooltip: {
    style: {
        pointerEvents: 'auto'
    }
}

---

現場演示：http: //jsfiddle.net/BlackLabel/7nrvsp5y/

API 參考： https ://api.highcharts.com/highcharts/tooltip.style