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/ 그것은 당신의 경우에 작동하는 것 같군