web-dev-qa-db-fra.com

Bars cliquables dans js Highcharts?

J'ai graphique à barres horizontal avec Highcharts . Comment puis-je rendre chaque barre cliquable pour un événement, par exemple comme "alerte"?

J'ai cette série par exemple:

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]
}];

Que dois-je faire de plus?

javascriptjqueryclickhighcharts
21
夏期劇場

Vous pourriez trouver --- Highcharts Options Reference un bon point de départ.

À partir de la référence, voici un exemple de graphique à colonnes dans lequel un clic sur une colonne déclenche une alerte.

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/

35
mg1075

J'avais besoin de faire quelque chose de similaire. J'espère que ça aide.

Avis de non-responsabilité: j'utilise le wrapper GWT Highcharts!

Voici les faits saillants de ce que j'ai fait:

1) J'ai créé une interface FooCallback qui a une barre de méthode (index int) et l'ai implémentée

2) Création d'une méthode getBarClickCallback qui renvoie un JavascriptObject (fonction), qui a le FooCallback comme paramètre

3) J'ajoute un rappel de clic dans l'option graphique/plotOptions/série/point/événements/clic, en le passant getBarClickCallback

4) Une fois qu'une barre est cliquée, FooCallback.bar (int index) est invoqué

...

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
}

...

De plus, je voulais écouter les clics sur les étiquettes de catégorie (à propos, je montre un graphique à barres inversé qui a des catégories)

1) Création d'une méthode qui localisera les catégories dans le dom et leur ajoutera des événements de clic. Je l'ai appelé addLabelClickHandler (rappel FooCallback, String chartId) et utilisé jquery pour ajouter les événements.

2) Ajoutez un ChartLoadEventHandler qui appelle addLabelClickHandler () qui transfère les paramètres à addLabelClickHandler (rappel FooCallback, String chartId)

3) Une fois qu'une catégorie d'axe est cliquée, FooCallback.bar (int index) est invoqué ...

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

2
Jeff I