Question

单击工具提示内的按钮没有任何操作，甚至设置onclick事件。以下是一个例子，

tooltip: {
        useHTML: true,
        formatter: function() {
                return '<div>' + this.point.date
                + '<br\><span>$' + this.y 
                + '</span><br\><button onclick="testAlert()">test test test</button></div>';
        },
    },



function testAlert() {
        alert('test');
};

Answer 1

将工具提示的指针事件属性更改为'auto'。

  tooltip: {
        // pointFormat: '<div>{point.date}<br\>{point.air}<br\>${point.y}</div><button>test</button>',
    useHTML: true,
    formatter: function() {
            return '<div>'+this.point.date+'<br\>'+this.point.air+'<br\><span>$'+this.y+'</span><br\><a href="http://www.w3schools.com">testtesttest</a></div>';
    },
    style: {
      pointerEvents: 'auto'
    }
},

实例

http://jsfiddle.net/emzmvth4/1/

Answer 2

工具提示中的链接有点棘手 - 特别是当你有很多点靠近在一起时，工具提示将移动到下一个点，然后你可以将鼠标移到链接上。

因此，您可能最好定义为每个点添加“url”属性，然后为点本身定义点击函数，如下所示：

    plotOptions: {
    series: {
        point: {
            events: {
                click: function () {
                    location.href = this.options.url;
                }
            }
        }
    }

API docs

Highcharts demo (bar chart)

工具提示内的（Highcharts）按钮无法触发

2 个答案:

实例