ハイチャートのツールチップ内のクリック可能なリンク

Question

データのリストを持つツールチップがあります。私は各データをその特定のデータのページにリダイレクトするリンクにしたいと思う。 Highchartsのツールチップの問題は、x軸に合わせて変化することです。 x軸が変更されるとすぐに、ツールチップがx軸の各コンポーネントに変更されます。だから私がリンクで作業しているツールチップを取得した場合、リンクをクリックするとすぐにツールチップが変わります。これに取り組むために、ツールチップをクリックするとすぐにツールチップを修正する方法を考え出しました。ここにそのコードがあります。

でも、クリックするとツールチップのリンクを作成する必要があります。私は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/それはあなたのケースで動作しているようだ