Jak hiperłącze wykres słupkowy w highcharts

Question

Mam highcharts, które renderuje dane zgodnie z danymi w mojej bazie danych. Używam typu "bar". Teraz chcę, aby użytkownicy klikali pasek przekierowujący do konkretnej strony lub np. Innej strony internetowej. Ja googlowałem, ale nie mogłem uzyskać odpowiedzi. Oto kod, którego używam.

$(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']] 
     }] 
    }); 
}); 

}); 

Answer 1

Oto url dokumentacji, jak to zrobić: http://api.highcharts.com/highcharts#plotOptions.series.point.events.click

Oto dobry przykład: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

Część kodu chcesz zaktualizować jest tutaj:

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

    } 

Answer 2

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

Th jest błąd generowany przez następujący wiersz.

this.slice();

Usuń go.

demo

Demo powyżej spowoduje tylko kliknąć na serie który powiąże wydarzenia, jeśli chcesz powiązać go z wszystkich serii używać @Jamiec sugestię.