하이라이트 : 마커 클릭시 URL로 리디렉션

Question

Highcharts 시계열에서 세 번째 값 (예 : ID 번호)을 전달하여 마커 클릭을 기반으로 새 창을 열려면 어떻게해야합니까? JsFiddle here.

이 방법은 범주가있는 simple chart에 익숙하지만 시간 계열은 아닙니다.

일반적으로 Highcharts 시계열은 [1401285311000,1]과 같은 일련의 배열을 허용하며 event.point.options.x 및 event.point.options.y이라는 클릭 이벤트에서 읽을 수 있습니다.

각 포인트에 id을 추가 한 다음 지점의 클릭 이벤트 콜백에서 읽는 방법이 있습니까? 나는 그것을 세 번째 값 (Highcharts가 완전히 무시 함)으로 전달하거나 차트를 손상시키는 두 값 ([1401285311000, 1, id: {1}]) 뒤에 id 아래에 넣으려고했습니다.

아이디어가 있으십니까? 이 때문에

// Replacing ajax call with a simple array for simplicity's sake 
var data = [{"name":"Value","unit":"","data":[[1401285311000,5, 1],[1401288036000,10, 2],[1401289436000,8, 3],[1401291099000,15, 4]]}, {"name":"Value 2","unit":"","data":[[1401285311000,10, 1],[1401288036000,12, 2],[1401289436000,5, 3],[1401291099000,9, 4]]}] 


$(function() { 
    $('#container').highcharts({ 
     chart: { 
      zoomType: 'x' 
     }, 
     title: { 
      text: 'Time Series' 
     }, 
     subtitle: { 
      text: document.ontouchstart === undefined ? 
        'Click and drag in the plot area to zoom in' : 
        'Pinch the chart to zoom in' 
     }, 
     xAxis: { 
      type: 'datetime', 
      minRange: 14 * 24 * 3600 // fourteen days 
     }, 
     yAxis: { 
      title: { 
       text: '' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
         plotOptions: { 
        series: { 
         lineWidth: 3, 
         marker: { 
          fillColor: null, 
          lineWidth: 2, 
          lineColor: null, // inherit from series 

         }, 
         events:{ 
           click: function (event, i) { 
            console.log(event.point); 
           } 
          } 
        }, 
        line: { 
         dataLabels:{ 
          enabled: false 
         } 
        }, 
       }, 

     series: data 
    }); 
}); 

Answer 1

그냥 시간 데이터는 배열 대신 point objects을 사용할 수 없습니다 의미하지는 않습니다

var data = [{ 
    "name": "Value", 
     "unit": "", 
    "data": [ 
     {x: 1401285311000, y: 5, id: 1}, 
     {x: 1401288036000, y: 10, id: 2}, 
     {x: 1401289436000, y: 8, id: 3}, 
     {x: 1401291099000, y: 15, id: 4} 
    ] 
}, { 
    "name": "Value 2", 
     "unit": "", 
     "data": [ 
     {x: 1401285311000, y: 10, id: 1}, 
     {x: 1401288036000, y: 12, id: 2}, 
     {x: 1401289436000, y: 5, id: 3}, 
     {x: 1401291099000, y: 9, id: 4} 
    ] 
}]; 

는 fiddle 업데이트되었습니다.