javascript - Highcharts 工具提示中的可点击链接

Question

我有工具提示，里面有一个数据列表。我希望每个数据都是一个链接，可以重定向到该特定数据的页面。现在 Highcharts 工具提示的问题是它相对于 x 轴发生变化。一旦 x 轴发生变化，工具提示就会更改为 x 轴上的相应组件。因此，如果我的工具提示与链接一起使用，一旦我移动到单击链接，工具提示就会发生变化。为了解决这个问题，我想出了一种方法来在您单击工具提示时立即修复工具提示。这是它的代码。

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        if (cloneToolTip)
                        {
                            chart.container.firstChild.removeChild(cloneToolTip);
                        }
                        cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                        chart.container.firstChild.appendChild(cloneToolTip);
                    }
                }
            }
        }
    },

但即便如此，我也需要在工具提示中制作可点击的链接。我在 stackoverflow 上看到了一些他们已经完成的线程，但它在那里也不起作用。它将它们显示为链接，但它们不可点击。在此处发布一个工作示例。

JSFiddle working example

如有任何帮助，我们将不胜感激。

编辑 1:-这些都是我拥有的系列。可能是因为其他一些图表，工具提示被隐藏了。

series: [{
        type: 'column',
        name: 'Success',
        color: '#7deda2',
        yAxis: 1,
        tooltip: {
            pointFormatter: function(){
              return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
            }
        },
        data: [{{barSuccess}}]
    }, 
    {
      type: 'scatter',
      name: 'Incidents',
      yAxis: 1,
      data: scatterData,
      color: '#FFAE19',
      tooltip: {
            pointFormatter: function() {
              var string = '';
              Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
                string += '<a href="http://www.google.com">' + p + '</a><br>'
              });
              return string + "<br />";
            }
          },
    },
    {
        type: 'spline',
        name: 'Failure',
        tooltip: {
            pointFormatter: function(){
              return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
            }
        },
        data: [{{barFailure}}],
        marker: {
            lineWidth: 3,
            lineColor: Highcharts.getOptions().colors[8],
            fillColor: 'red'
        }
    },
    {{#if lu}}
       {
        type: 'spline',
        name: 'Unknown',
        tooltip: {
            pointFormatter: function(){
              return "Unknown: " + this.y + "%" + "<br />" + "Unknown docs: " + toolTipUnknown[this.series.data.indexOf( this )] + "<br />";
            }
        },
        data: [{{barUnknown}}],
        marker: {
            lineWidth: 3,
            lineColor: 'blue',
            fillColor: '#87CEFA'
        }
    }
    {{/if}}

Answer 1

工具提示的 useHTML 属性应该在全局工具提示属性中定义 - 但对于 <a>是不够的。更改 pointerEvents 属性是必要的 - 您可以在此处查看问题:https://github.com/highcharts/highcharts/issues/5722

tooltip: {
  useHTML: true,
  style: {
    pointerEvents: 'auto'
  }
},

示例:http://jsfiddle.net/SeCAB/216/