2012-10-04 139 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建議綁定它,你綁定的事件,意甲。