Highcharts复杂的工具提示格式问题与嵌入的html链接

ehxuflar  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(126)

我正在尝试将工具提示格式化为highcharts气泡图
有很多信息我想用自定义格式显示,所以我使用了formatter函数。除了最后一行是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>'

                }
        },
}

我已经尝试了很多选择一段时间,但没有任何运气。任何帮助将不胜感激。谢谢

n8ghc7c1

n8ghc7c11#

您需要将pointerEvents属性设置为'auto'

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

现场演示:http://jsfiddle.net/BlackLabel/7nrvsp5y/
API引用:https://api.highcharts.com/highcharts/tooltip.style

相关问题