2012-10-04 33 views
7

Tengo un gráficos altos que representa los datos según los datos en mi base de datos. Estoy usando el tipo 'bar'. Ahora quiero que cuando los usuarios hagan clic en la barra, se redireccionará a la página específica o, por ejemplo, a otro sitio web. Lo busqué en Google pero no pude obtener la respuesta. Aquí está el código que estoy usando.Cómo hipervínculo gráfico de barras en los gráficos altos

$(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

¿Cuál es el error? –

Respuesta

9

Aquí es la URL de la documentación sobre cómo hacer esto: http://api.highcharts.com/highcharts#plotOptions.series.point.events.click

Aquí es una buena muestra: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/

La parte de su código que desea actualizar está aquí:

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

    } 
0

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

Th es el error generado por la siguiente línea.

this.slice();

quitarlo.

demo

La demostración anterior se disparará clic sólo para la serie, que se enlaza los acontecimientos, si se quiere unir a todas las series utilizar la sugerencia de @Jamiec.

Cuestiones relacionadas