2013-10-16 14 views
0

我正在使用HighChart插件来绘制饼图/条形图。点击饼图部分时,我想链接其他页面,换句话说,我想重定向到其他页面。需要在HighChart中链接URL

演示链接:http://www.highcharts.com/demo/pie-basic

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       { 
        name: 'Chrome', 
        y: 12.8, 
        sliced: true, 
        selected: true 
       }, 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7] 
      ] 
     }] 
    }); 
}); 

Fiddle Link:http://jsfiddle.net/aravindkumarit/M8a3X/

他们不是通过ID为零件,所以我不能够写的饼图部分的任何事件。

回答

8

添加

events:{ 
     click: function (event) { 
       alert(event.point.name); 
       // add your redirect code and u can get data using event.point 
    } 
} 

在plotOptions.pie

这样

plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       color: '#000000', 
       connectorColor: '#000000', 
       format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
      }, 
      events:{ 
       click: function (event) { 
        alert(event.point.name); 
        // add your redirect code and u can get data using event.point 
       } 
      } 
     } 
    } 

查阅DEMO

+0

谢谢你,它的工作.. http://api.highcharts.com/ highcharts#plotOptions.pie.events – TomPHP