Diagramm zeichnen 

<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'));
      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>

Im letzten Schritt wird das Diagramm gezeichnet. Zuerst müssen Sie eine Instanz der Diagrammklasse instanziieren, die Sie verwenden möchten, und dann draw() dafür aufrufen.

Diagramm instanziieren

Jeder Diagrammtyp basiert auf einer anderen Klasse, die in der Dokumentation des Diagramms aufgeführt ist. Beispielsweise basiert das Kreisdiagramm auf der Klasse google.visualization.PieChart, das Balkendiagramm auf der Klasse google.visualization.BarChart usw. Sowohl Kreis- als auch Balkendiagramme sind im Corechart-Paket enthalten, das Sie zu Beginn dieser Anleitung geladen haben. Wenn Sie jedoch eine Strukturkarte oder ein Geo-Diagramm auf Ihrer Seite verwenden möchten, müssen Sie die Pakete „Strukturkarte“ oder „Geomap“ zusätzlich laden.

Google-Diagrammkonstruktoren verwenden einen einzelnen Parameter: einen Verweis auf das DOM-Element, in dem die Visualisierung gezeichnet werden soll.

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

Diagramm zeichnen

Nachdem Sie Ihre Daten und Optionen vorbereitet haben, können Sie Ihr Diagramm zeichnen.

Die Seite muss ein HTML-Element enthalten (normalerweise ein <div>), das das Diagramm enthält. Sie müssen Ihrem Diagramm einen Verweis auf dieses Element übergeben. Weisen Sie ihm daher eine ID zu, mit der Sie einen Verweis mit document.getElementById() abrufen können. Alles in diesem Element wird beim Zeichnen durch das Diagramm ersetzt. Überlegen Sie, ob Sie die Größe dieses <div>-Elements explizit festlegen sollten, geben Sie die Diagrammgröße vorerst jedoch im <div>-HTML-Code an.

Jedes Diagramm unterstützt eine draw()-Methode, die zwei Werte annimmt: ein DataTable- oder ein DataView-Objekt, das Ihre Daten enthält, und ein optionales Diagrammoptionsobjekt. Das Optionsobjekt ist nicht erforderlich. Sie können es ignorieren oder null übergeben, um die Standardoptionen des Diagramms zu verwenden.

Nachdem Sie draw() aufgerufen haben, wird Ihr Diagramm auf der Seite gezeichnet. Sie sollten die Methode draw() jedes Mal aufrufen, wenn Sie die Daten oder Optionen ändern und das Diagramm aktualisieren möchten.

Die Methode draw() ist asynchron, d. h., sie kehrt sofort zurück, aber die Instanz, die sie zurückgibt, ist möglicherweise nicht sofort verfügbar. In vielen Fällen ist dies in Ordnung. Das Diagramm wird schließlich fertig sein. Wenn Sie jedoch Werte in einem Diagramm festlegen oder abrufen möchten, nachdem Sie draw() aufgerufen haben, müssen Sie warten, bis das Ereignis „ready“ ausgelöst wird. Das bedeutet, dass es ausgefüllt ist. Auf der nächsten Seite wird das Überwachen von Ereignissen behandelt.

Fehlerbehebung

Wenn Ihr Diagramm nicht auf der Seite dargestellt wird, können Sie Ihre Probleme mit den folgenden Ansätzen lösen:

  • Suchen Sie nach Tippfehlern. Denken Sie daran, dass in JavaScript zwischen Groß- und Kleinschreibung unterschieden wird.
    • Verwenden Sie einen JavaScript-Debugger. In Firefox können Sie die JavaScript-Konsole, den Venkman Debugger oder das Firebug-Add-on verwenden. In Chrome kannst du die Entwicklertools verwenden (Umschalttaste + Strg + J).
  • Suchen Sie im Diskussionsforum zur Google Visualization API. Wenn Sie keinen Beitrag finden, der Ihre Frage beantwortet, können Sie Ihre Frage zusammen mit einem Link zu einer Webseite, auf der das Problem dargestellt wird, in der Gruppe posten.

 

 

 

Weitere Informationen