2012-10-04 105 views
7

我有一个根据数据库中的数据呈现数据的高图。我正在使用'bar'类型。现在,我希望当用户点击栏时,它会重定向到特定的页面或例如另一个网站。我用Google搜索了它,但无法得到答案。这是我使用的代码。如何在超链接中超链接条形图

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'bar' 
     }, 
     title: { 
      text: 'Historic World Population by Region' 
     }, 
     subtitle: { 
      text: 'Source: Wikipedia.org' 
     }, 
     xAxis: { 
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Population (millions)', 
       align: 'high' 
      }, 
      labels: { 
       overflow: 'justify' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return ''+ 
        this.series.name +': '+ this.y +' millions'; 
      } 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -100, 
      y: 100, 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: '#FFFFFF', 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      type: 'bar', 
        point: { 
         events: { 
         click: function(e) { 

          this.slice(); 
var clicked = this; 
setTimeout(function(){ 
location.href = clicked.config[2]; 
          }, 500) 
          e.preventDefault(); 
         } 
        } 
        }, 
data: [['Com',107,'http://www.google.com']] 
     }] 
    }); 
}); 

}); 
+0

什么是错误? –

回答

9

这里是文档上如何做到这一点的网址:http://api.highcharts.com/highcharts#plotOptions.series.point.events.click

这里是一个很好的例子:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

要更新您的代码的一部分是在这里:

plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     }, 
     series: { 
      point: { 
       events: { 
        click: function(){ 
         // do whatever here 
        } 
       } 
      } 
     } 

    } 
0

Uncaught TypeError: Object #<Object> has no method 'slice'

钍是由以下行生成的错误。

this.slice();

删除它。

demo

演示上面会触发只有点击,如果你想全系列使用@Jamiec建议绑定它,你绑定的事件,意甲。