Highcharts - fire legendeItemClick-Ereignis

Question

Ich möchte das gleiche Ereignis auslösen, das ausgelöst wird, wenn Sie eine Elementlegende, aber von einer externen HTML-Schaltfläche auswählen. Ist es möglich?

Ich habe eine jsfiddle erstellt, um es zu zeigen: 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 diesem jsfiddle habe ich einen Knopf, und ich möchte, dass, wenn ich auf die Schaltfläche es ein Ereignis oder etwas ausgelöst, das erkennt und wirkt wie Artikel Legende Diagramm (Serie 1) geklickt wurde.

Vielen Dank

Answer 1

Verwenden Sie einfach:

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

Wo der 0 der Index der Reihe ist es, Sie möchten 'Klick'.

Aktualisierung fiddle.

EDITS

• highcharts-legend-item die Klasse von jedem Eintrag in der Legende. Ich entdeckte dies, indem ich die Legende mithilfe von Chrome-Entwicklertools untersuchte.
• Die $('.highcharts-legend-item') ist ein jquery-Selektor, um ein Array aller Elemente dieser Klasse zurückzugeben. Ich wähle die erste von Index und die $() es in ein jQuery-Objekt dieses
• Die .click ist zu konvertieren: http://api.jquery.com/click/

Answer 2

Ich denke, die Antwort mit der Definition der Klick auf

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

ist nicht der beste. Es ist sehr "teuer", da das DOM wahrscheinlich schwer ist. Meine Lösung basiert in der Regel auf CSS. Sie können die Position von Highchart-Legendenelementen direkt über den benutzerdefinierten Elementen festlegen, die Sie verwenden möchten, und jedes Element sollte die Breite & Höhe wie das benutzerdefinierte HTML-Element haben. Highchart-Elemente sollten den Deckkraftwert 0 haben, damit sie nicht sichtbar sind. Wenn Sie also auf Ihr Element klicken, klicken Sie auf den Highchart-Legendeneintrag. Wenn Sie einige CSS für Ihr benutzerdefiniertes Element festlegen möchten, sollten Sie legendItemClick-Rückruf definieren:

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