2014-02-24 4 views
1

하이 차트에서 시리즈를 클릭 할 수있는 방법을 아는 사람이 있습니까? 항목 중 하나를 클릭하면 외부 링크로 연결됩니다.Highcharts에서 시리즈 만들기 click

문서를 검토 한 결과 하이 차트에서 옵션을 찾을 수 없습니다. 여기

http://www.highcharts.com/docs/chart-concepts/series

는 문서에 제공된 바이올린이다. 누군가가 시리즈를 클릭 할 수있게 만들면 멋지게 될 것입니다!

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays/

$(function() { 
    $('#container').highcharts({ 
     chart: { 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]   
     }] 
    }); 
}); 

당신을 감사합니다!

답변

1

포인트 객체에 url을 설정하거나 전역을 사용하여 포인트에서 클릭 이벤트를 catch하고 window.location을 실행할 수 있습니다.

plotOptions: { 
       series: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function() { 
           var url = this.options.url; 
           window.open(url); 
          } 
         } 
        }, 
       } 
      }, 
    series: [{ 
       data: [{ 
        x: 0, 
        y: 29.9, 
        url: 'http://www.google.com' 
       }, { 
        x: 1, 
        y: 71.5, 
        url: 'http://www.yahoo.com' 
       }] 
      }] 

http://jsfiddle.net/287JP/2/

1

series: { 
cursor: 'pointer', 
     point: { 
      events: { 
        click: function() { 
         //your logic 
        } 
        } 
       } 
} 

More info

1

이 시도 시도 할 수 있습니다. demo을 실행하십시오. -

$(function() { 
$('#container').highcharts({ 
    chart: { 
    }, 
    xAxis: { 
     minPadding: 0.05, 
     maxPadding: 0.05 
    }, 

    series: [{ 
     data: [ 
      [0, 29.9], 
      [1, 71.5], 
      [3, 106.4] 
     ] 
    }], 


    plotOptions: { 
      series: { 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          //do your stuff 
          alert([this.x,this.y]); 
         } 
        } 
       }, 
       marker: { 
        lineWidth: 1 
       } 
      } 
     }, 
}); 

});

관련 문제