Mit dem Diagramm interagieren

Das, was wir bisher behandelt haben, ist für viele Webseiten ausreichend: Sie haben Ihr Diagramm auf der Seite gezeichnet. Wenn Sie jedoch Klicks von Nutzern erfassen möchten oder Eigenschaften oder Daten in einem bereits gezeichneten Diagramm ändern möchten, müssen Sie auf die im Diagramm ausgelösten Ereignisse achten.

Alle Diagramme lösen einige Arten von Ereignissen aus. Im Folgenden werden die häufigsten Gründe aufgeführt:

  • ready: Wird ausgelöst, wenn das Diagramm auf der Seite gezeichnet wird und auf Methoden reagiert werden kann. Warten Sie auf dieses Ereignis, wenn Sie Informationen aus dem Diagramm anfordern müssen.
  • Auswählen: Wird ausgelöst, wenn der Nutzer etwas im Diagramm auswählt: in der Regel durch Klicken auf einen Balken oder ein Kreissegment.
  • error: Wird ausgelöst, wenn das Diagramm die übertragenen Daten nicht darstellen kann. Dies ist normalerweise auf das falsche DataTable-Format zurückzuführen.
  • onmouseover und onmouseout: Wird ausgelöst, wenn der Nutzer den Mauszeiger auf ein bestimmtes Diagrammelement bewegt.

Das Warten auf Ereignisse ist einfach: Rufen Sie einfach google.visualization.events.addListener() auf und übergeben Sie einen Handle auf das Diagramm, den Namen des zu erfassenden Ereignisses und den Namen eines Handlers, der beim Auslösen des Ereignisses aufgerufen werden soll. Sie können diese Methode mit einem beliebigen Diagramm-Handle aufrufen, auch wenn Sie draw() noch nicht aufgerufen haben. Sie können google.visualization.events.addOneTimeListener() aufrufen, wenn der Listener genau einmal aufgerufen werden soll, bevor er sich selbst entfernt.

Hier ist ein unvollständiges Code-Snippet, das zeigt, wie man sich registriert, um das select-Ereignis eines Diagramms zu erfassen:

load libraries...

function drawChart() {

  prepare data...

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var value = data.getValue(selectedItem.row, selectedItem.column);
      alert('The user selected ' + value);
    }
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.
  google.visualization.events.addListener(chart, 'select', selectHandler);

  draw the chart...

}

Im Folgenden sehen Sie das Codebeispiel für „Hello Charts“ mit einem neuen Select-Ereignis-Listener. Probier es selbst aus.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1], 
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
 
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            var topping = data.getValue(selectedItem.row, 0);
            alert('The user selected ' + topping);
          }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);    
        chart.draw(data, options);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

Weitere Informationen