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 zeichnen Sie das Diagramm. 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. Das Kreisdiagramm basiert beispielsweise auf der Klasse google.visualization.PieChart, das Balkendiagramm auf der Klasse google.visualization.BarChart usw. Sowohl das Kreisdiagramm als auch das Balkendiagramm sind im Corechart-Paket enthalten, das Sie zu Beginn dieser Anleitung geladen haben. Falls Sie jedoch eine Strukturkarte oder ein Geo-Diagramm auf der Seite haben möchten, müssen Sie zusätzlich die Struktur- und Landkartenpakete 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 die Daten und Optionen vorbereitet haben, können Sie das Diagramm zeichnen.

Die Seite muss ein HTML-Element (normalerweise ein <div>-Element) enthalten, das das Diagramm enthält. Sie müssen dem Diagramm einen Verweis auf dieses Element übergeben. Weisen Sie ihm daher eine ID zu, mit der Sie mit document.getElementById() eine Referenz abrufen können. Alle Elemente in diesem Element werden beim Zeichnen durch das Diagramm ersetzt. Überlegen Sie, ob Sie die Größe dieses <div>-Elements explizit festlegen sollten, aber geben Sie die Diagrammgröße vorerst im HTML-Code <div> 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 und Sie können es ignorieren oder null übergeben, um die Standardoptionen des Diagramms zu verwenden.

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

Die Methode draw() ist asynchron, d. h., sie gibt sofort zurück, aber die zurückgegebene Instanz ist möglicherweise nicht sofort verfügbar. In vielen Fällen ist das in Ordnung. Das Diagramm wird schließlich gezeichnet. Wenn Sie jedoch Werte in einem Diagramm festlegen oder abrufen möchten, nachdem Sie draw() aufgerufen haben, müssen Sie warten, bis das Ereignis bereit ist. Dies bedeutet, dass es ausgefüllt ist. Auf der nächsten Seite erfahren Sie, wie Sie Ereignisse erfassen.

Fehlerbehebung

Wenn das Diagramm nicht auf der Seite angezeigt wird, findest du hier einige Ansätze, die dir bei der Lösung deiner Probleme helfen können:

  • 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 (Umschalttaste + Strg + J) verwenden.
  • Durchsuchen Sie die Diskussionsgruppe für die Google Visualization API. Wenn du keinen Beitrag findest, in dem deine Frage beantwortet wird, poste deine Frage in der Gruppe zusammen mit einem Link zu einer Webseite, auf der das Problem demonstriert wird.

 

 

 

Weitere Informationen