Javascript-onClick-Funktion für google GeoChart

Ich versuche, die Anzeige einer Karte mithilfe von google geochart https://developers.google.com/chart/interactive/docs/gallery/geochart

Die Karte zeigt die Daten und den angegebenen Ländern in Ordnung, aber ich kann nicht herausfinden, wie Sie eine link-onClick mit dem spezifischen Land, oder sogar alle onClick-Funktion für die Länder.

Dieser link beschreibt die Ereignisse 'regionClick' und 'select', das klingt wie ein Teil, was ich brauche, aber ich bin mir nicht sicher, wie Sie diese auslösen wird meine link-Funktion...Im javascript. Mit 'wählen', es scheint eine Methode zu "getSelected'

<scripts type='text/javascript'>
  google.load('visualization', '1', {'packages': ['geomap']});
  google.setOnLoadCallback(drawMap);
  function drawMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Projects'],
      ['Russia', 3],
      ['France', 2],
      ['Spain', 4]
    ]);

    var options = {};
    options['dataMode'] = 'regions';
    options['width'] = '834px';
    options['height'] = '521px';

    var container = document.getElementById('map_canvas');
    var chart = new google.visualization.GeoChart(container);
    chart.draw(data, options);
  };


  function myClickHandler(){
    var selection = chart.getSelection();

    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      if (item.row != null && item.column != null) {
        message += '{row:' + item.row + ',column:' + item.column + '}';
      } else if (item.row != null) {
        message += '{row:' + item.row + '}';
      } else if (item.column != null) {
        message += '{column:' + item.column + '}';
      }
    }
    if (message == '') {
      message = 'nothing';
    }
    alert('You selected ' + message);
  }
</script>

Jede Hilfe oder Richtung geschätzt.

  • Sind Sie versuchen, Ihre myClickHandler wenn der Benutzer klickt auf eine region? Suche nach "enableRegionInteractivity" in die GeoChart docs-url, die Sie spitz oben.
  • Sind Sie auch durch Zufall versuchen, einfach um zu zeigen, Russland, Frankreich und Spanien in die Karte ohne die anderen Länder?
  • Er sagt, seine aktiviert standardmäßig auf region-Modus, plus ich immer noch nicht weiß, wie man abholen, die diese Ereignisse auslösen. Nein, es wird in anderen Ländern (die meisten), dies ist nur ein test.
InformationsquelleAutor holmeswatson | 2014-01-24
  1. 13

    Gibt es ein paar Dinge, die Sie tun müssen. Erstens, da Ihre Funktion myClickHandler Referenzen das Objekt chart, seine Bedürfnisse werden in den gleichen Anwendungsbereich wie chart, so müssen Sie, um es in drawMap. Zweitens müssen Sie zum erstellen einer 'click' event-handler für das Diagramm verwendet, die myClickHandler Funktion. Hier ist, was der code sollte wie folgt Aussehen:

    function drawMap() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Projects'],
        ['Russia', 3],
        ['France', 2],
        ['Spain', 4]
    ]);

    var options = {
        dataMode: 'regions',
        width: 834,
        height: 521
    };

    var container = document.getElementById('map_canvas');
    var chart = new google.visualization.GeoChart(container);

    function myClickHandler(){
        var selection = chart.getSelection();
        var message = '';
        for (var i = 0; i < selection.length; i++) {
            var item = selection[i];
            if (item.row != null && item.column != null) {
                message += '{row:' + item.row + ',column:' + item.column + '}';
            } else if (item.row != null) {
                message += '{row:' + item.row + '}';
            } else if (item.column != null) {
                message += '{column:' + item.column + '}';
            }
        }
        if (message == '') {
            message = 'nothing';
        }
        alert('You selected ' + message);
    }

    google.visualization.events.addListener(chart, 'select', myClickHandler);

    chart.draw(data, options);
}
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap});

    jsfiddle: http://jsfiddle.net/asgallant/6dP28/

    InformationsquelleAutor asgallant
Schreibe einen Kommentar