Highcharts - fire legendItemClick event

Question

Desidero attivare lo stesso evento che viene attivato quando si seleziona una legenda di un elemento, ma da un pulsante html esterno. È possibile?

Ho creato un jsfiddle per mostrarlo: http://jsfiddle.net/YcJF8/1/.

$('#container').highcharts({ 
        chart : { 
         type : 'spline', 
        }, 

        xAxis : { 
         categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
        }, 

        series : [{ 
         data : [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 

        }], 

        plotOptions : { 
         series : { 

         cursor : 'pointer', 
        } 
       }, 
}); 

$('#button').click(function() { 
     alert("Fire legenditemclick event"); 
}); 

In questo jsfiddle, ho un tasto e voglio che quando fa clic sul pulsante che genera un evento o qualcosa che tracciare rileva e si comporta come elemento della legenda (serie 1) è stato cliccato.

La ringrazio molto

Answer 1

Basta usare:

$($('.highcharts-legend-item')[0]).click() 

Qualora il 0 è l'indice della serie che si desidera 'click'.

Aggiornamento fiddle.

modifiche

• highcharts-legend-item è la classe di ogni voce nella legenda. L'ho scoperto inserendo la legenda usando gli strumenti di sviluppo di Chrome.
• il $('.highcharts-legend-item') è un selettore jquery per restituire una matrice di tutti gli elementi di quella classe. Seleziono il primo per indice e il $() di convertire in un oggetto jQuery
• Il .click è questo: http://api.jquery.com/click/

Answer 2

Penso che la risposta di definire un click sul

$('.highcharts-legend-item')[0]) 

è non il migliore. È molto "costoso" poiché il DOM è probabilmente pesante. La mia soluzione è generalmente basata su CSS. È possibile impostare la posizione degli elementi della legenda del grafico alto proprio sopra gli elementi personalizzati che si desidera utilizzare e ogni elemento deve avere la larghezza uguale a & dell'altezza dell'elemento HTML personalizzato. Gli elementi grafici alti devono avere il valore di opacità 0 in modo che non siano visibili. Quindi, quando fai clic sul tuo elemento, infatti, fai clic sull'elemento della legenda del grafico alto. Se vuoi impostare alcuni CSS per il tuo elemento personalizzato devi definire il callback legendItemClick:

plotOptions: { 
    series: { 
     events: { 
      legendItemClick: function() { 
       var legenedItemIndex = this.index // index of highchart legend item 
       $("your html element:eq(" + legenedItemIndex + ")") //do something with your element 
      } 
     } 
    } 
}