Ho orizzontale grafico a barre con Highcharts. Come faccio a fare in modo che ogni barra clic su per ogni evento sia possibile per , ad esempio "avviso"?Barrette cliccabili in js Highcharts?
devo questa serie, ad esempio:
series : [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}];
Che altro devo fare?
È possibile trovare il Highcharts Options Reference un buon punto di partenza.
Dal riferimento, ecco un esempio di istogramma in cui fare clic su una colonna attiva un avviso.
avevo bisogno di fare un qualcosa di simile. Spero che sia d'aiuto.
Disclaimer: Sto usando il wrapper GWT Highcharts!
Ecco i punti salienti di quello che ho fatto:
1) Ho creato un FooCallback interfaccia che dispone di un bar metodo (int index) e attuato
2) Creato un metodo getBarClickCallback che restituisce un JavascriptObject (funzione), che ha la FooCallback come param
3) aggiungo un clic callback nell'opzione tabella/plotOptions/serie/punto/eventi/clic, passando getBarClickCallback
4) una volta che un bar è clic Ed, FooCallback.bar (int index) viene richiamato
...
chart.setOption("/plotOptions/series/point/events/click",getBarClickCallback(this));
private native static JavaScriptObject getBarClickCallback(FooCallback callback) /*-{
return function()
{
if(this.x !== "undefined" && this.x >= 0){
[email protected]::bar(I)(this.x);
}
};
}-*/;
public void bar(int index){
//handle chosen index
}
...
Inoltre ho voluto ascoltare categoria etichetta dei clic (A proposito sto mostrando un grafico a barre invertito che ha categorie)
1) Creato un metodo che localizzerà le categorie nella dom e aggiungerà loro gli eventi click. L'ho chiamato addLabelClickHandler (callback FooCallback, String chartId) e ho usato jquery per aggiungere gli eventi.
2) Aggiungere un ChartLoadEventHandler che chiama addLabelClickHandler() che inoltra params a addLabelClickHandler (FooCallback callback, String chartId)
3) Una volta che una categoria asse viene cliccato, FooCallback.bar (int index) viene richiamato . ..
chart.setLoadEventHandler(new ChartLoadEventHandler() {
@Override
public boolean onLoad(ChartLoadEvent chartLoadEvent) {
addLabelClickHandler();
return false;
}
});
private void addLabelClickHandler(){
addLabelClickHandler(this,chart.getElement().getId());
}
private native static void addLabelClickHandler(FooCallback callback, String chartId)/*-{
try {
var search = '#' + chartId + ' .highcharts-axis-labels:first text';
$wnd.jQuery(search).each(
function(i, j) {
$wnd.jQuery(this).css("cursor", "pointer");
$wnd.jQuery(this).click(function() {
[email protected]::bar(I)(this.x);
});
});
} catch (err) {
console.log(err);
}
}-*/;
Jeff
il link qui sopra è rotto purtroppo ... – Christian
@Christian - link ora fissata per l'esempio grafico a barre. Sembra che il team di Highcharts debba ancora correggere i collegamenti all'interno del loro riferimento API, comunque. – mg1075
grazie. Ecco un altro esempio nel caso in cui: http: // jsfiddle.net/e7b4Z/311/ – Christian