Google charts aufrufen onmouseover-Ereignis

Ich habe dieses problem untersucht, den ganzen Tag lang und ohne Erfolg. Ich habe eine google-Diagramm-Anzeige einige Daten, funktioniert Prima.

Habe ich gearbeitet, auf die etwas detailliertere Grafik, darunter über ein Dutzend Diagramm-Legende Elemente. Ich wollte meine Legende unterhalb der Grafik, damit ich es einstellen die position nach unten.

Aber die "hässlichen" Seitenumbruch generiert charts ist nicht wirklich Ansprechend für meinen manager.

Also habe ich es verborgen und neu gerendert, die den Elementen der Legende unterhalb des Diagramms ohne Seitenzählung mit einigen custom javascripting(tatsächlich sah ich den code von hier http://jsfiddle.net/asgallant/6Y8jF/2/)

var legend = document.getElementById('legend');
    var lis = [];

    var total = 0;
    for (var i = 0; i < data.length; i++) {
        var legendValue = data[i];

        if(legendValue.indexOf("PROVIDER") == -1){

            //create the legend entry
            lis[i] = document.createElement('li');
            lis[i].id = 'legend_' + legendValue;
            lis[i].className = 'legendary';
            lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';">' + legendValue + '</div>';

            //append to the legend list
            legend.appendChild(lis[i]);
        }
    }

Also fast mit der gleichen Funktionalität wie die eigentliche Grafik Legende, eine Sache fehlt aber. Bei der original google-Diagramm-Legende schwebte das Element auf dem Diagramm hervorgehoben werden, wie in diesem Beispiel :

http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper

Wenn Sie den Mauszeiger auf Deutschland oder den USA die Balken in der Grafik ausgewählt oder hervorgehoben wird.

Wie kann ich trigger das gleiche Verhalten von meiner Liste posten?

Ich versucht habe :

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
 }

$(document).on("hover", ".legendary", function(){
        eventFire(document.getElementById('graphico'),'select');
        eventFire(document.getElementById('graphico'),'onmouseover');
        $("#graphico").trigger("onmouseover");
        $("#graphico").trigger("select");
        console.log("fired hover event");
    });

Bekomme ich "gefeuert hover-Ereignis" Meldung im firebug, aber es passiert nichts in meinem Diagramm.

Habe ich den onmouseover-listener, um das Diagramm (Funktion wird ausgelöst) :

google.visualization.events.addListener(ga_chart, 'onmouseover', function(e) {
        console.log("listening bruv");
      });

Aber ich bin mir nicht sicher, wie Sie wählen Sie bestimmten Teil des Graphen.

Ich versuche, rufen Sie diese Ereignisse, die Ursache der Hervorhebung auf das main Diagramm :

https://developers.google.com/chart/interactive/docs/gallery/piechart#Events

Irgendwelche Ideen oder Anregungen wäre wirklich dankbar.

  • wenn Sie sicher sind, '#graphico' ist die richtige id zu nennen, versuchen Sie es mit $('#graphico').trigger('hover'); anstelle von onmouseover.
  • ja, ich bin mir sicher, dass da die "gefeuert" hover event" echoes in der Konsole
  • naja.. wenn Sie die Konsole.log($('#graphico')); bekommst du das element, das Sie brauchen? und ich habe gerade gelesen, es sollte $('#graphico').trigger('mouseenter'); stackoverflow.com/questions/11074815/...
  • ja ich bekomme das element, die ich brauche
Schreibe einen Kommentar