Cliquable Barres en js Highcharts?

J'ai horizontale graphique à barres avec Highcharts. Comment puis-je faire de chaque barre cliquable pour un événement, comme par exemple "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]
}];

Quoi de plus dois-je faire?

InformationsquelleAutor | 2012-05-16
  1. 34

    Vous pourriez trouver la Highcharts Référence Des Options un bon point de départ.

    De la référence, voici un exemple d'un diagramme à colonnes
    où cliquant 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/

    • Le lien ci-dessus est cassé malheureusement...
    • maintenant le lien fixe pour l'histogramme exemple. Il ressemble à la Highcharts équipe a encore de fixer les liens au sein de leur référence de l'API, si.
    • merci. Voici un autre exemple juste au cas où: jsfiddle.net/e7b4Z/311
    • J'ai emplacement des barres montrant l'état, j'ai besoin de renvoyer l'utilisateur vers une page en cliquant sur une barre donnée, quelqu'un peut me dire comment faire cela?
    InformationsquelleAutor mg1075
  2. 2

    J'avais besoin de faire quelque chose de similaire. Espérons que cela aide.

    Disclaimer: je suis en utilisant GWT Highcharts emballage!

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

    1) j'ai créé une interface FooCallback qui a une méthode de bar( int index ) et de la mise en œuvre, il

    2) a Créé une méthode getBarClickCallback qui renvoie un JavascriptObject (fonction), qui a la FooCallback comme un param

    3) j'ai ajouté un clic de rappel dans le graphique option /plotOptions/série/point/événements/cliquez sur, en lui passant getBarClickCallback

    4) une Fois que la barre est cliqué, FooCallback.bar( int index ) est invoquée

    ...

    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
}

    ...

    En outre, je voulais écouter de la catégorie étiquette clics
    (Je suis en train de montrer une inversion de la barre graphique catégories)

    1) a Créé une méthode qui permet de localiser les catégories dans les dom et ajouter cliquez sur événements.
    Je l'ai appelé addLabelClickHandler(FooCallback rappel, la Chaîne chartId) et utilisé jquery pour ajouter les événements.

    2) Ajouter un ChartLoadEventHandler que les appels addLabelClickHandler() qui transmet les params de addLabelClickHandler(FooCallback rappel, la Chaîne chartId)

    3) une Fois que l'axe de la catégorie est cliqué, FooCallback.bar( int index ) est invoquée
    ...

    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

    InformationsquelleAutor Jeff I