Diagrammzeichnungstechniken

Auf dieser Seite werden die verschiedenen Möglichkeiten aufgeführt, wie Sie ein Diagramm auf der Seite instanziieren und zeichnen können. Jede Methode hat Vor- und Nachteile, die im Folgenden aufgeführt sind.

Inhalt

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. Weitere Informationen

chart.draw()

Dies ist die grundlegende Methode, die im Beispiel für ein Hello-Diagramm in dieser Dokumentation behandelt wird. Es sind drei grundlegende Schritte erforderlich:

  1. Laden Sie das gstatic-Bibliotheksladeprogramm, Google Visualization- und Diagrammbibliotheken.
  2. Daten vorbereiten
  3. Diagrammoptionen vorbereiten
  4. Instanziieren Sie die Diagrammklasse und übergeben Sie einen Handle an das Seitencontainerelement.
  5. Registrieren Sie sich optional, um Diagrammereignisse zu erhalten. Wenn Sie Methoden im Diagramm aufrufen möchten, sollten Sie auf das Ereignis „ready“ warten.
  6. Rufen Sie chart.draw() auf und übergeben Sie die Daten und Optionen.

Vorteile:

  • Sie haben die volle Kontrolle über jeden Schritt des Prozesses.
  • Sie können sich registrieren, um auf alle vom Diagramm ausgelösten Ereignisse zu warten.

Nachteile:

  • Ausführlich
  • Sie müssen alle erforderlichen Diagrammbibliotheken explizit laden.
  • Wenn Sie Abfragen senden, müssen Sie den Callback manuell implementieren, auf Erfolg prüfen, den zurückgegebenen DataTable extrahieren und an das Diagramm übergeben.

Example:

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

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

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

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

ChartWrapper

ChartWrapper ist eine Convenience-Klasse, die das Laden der entsprechenden Diagrammbibliotheken für Sie übernimmt und das Senden von Abfragen an Diagrammtools-Datenquellen vereinfacht.

Vorteile:

  • Viel weniger Code
  • Lädt alle erforderlichen Diagrammbibliotheken für Sie
  • Vereinfacht das Abfragen von Datenquellen durch die Erstellung des Query-Objekts und die Verarbeitung des Callbacks für Sie
  • Übergeben Sie die Containerelement-ID und ruft getElementByID für Sie auf.
  • Daten können in verschiedenen Formaten gesendet werden: als Array von Werten, als JSON-Literalstring oder als DataTable-Handle

Nachteile:

  • ChartWrapper gibt derzeit nur die Ereignisse „select“, „ready“ und „error“ weiter. Wenn Sie andere Ereignisse abrufen möchten, müssen Sie einen Handle für das umschlossene Diagramm abrufen und dort Ereignisse abonnieren. Beispiele finden Sie in der Dokumentation zu ChartWrapper.

Beispiele:

Hier sehen Sie ein Beispiel für ein Säulendiagramm mit lokal erstellten Daten, die als Array angegeben sind. Sie können keine Diagrammlabels oder Datum/Uhrzeit-Werte mithilfe der Array-Syntax angeben. Sie können jedoch manuell ein DataTable-Objekt mit diesen Werten erstellen und an die Eigenschaft dataTable übergeben.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Hier sehen Sie ein Beispiel für ein Liniendiagramm, bei dem die Daten aus einer Google-Tabelle abgerufen werden. Beachte, dass der Code den Callback nicht verarbeiten muss.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

In Kombination mit autoloading kann dadurch sehr kompakter Code entstehen:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Diagrammeditor mit ChartWrapper verwenden

Sie können das in Google Tabellen integrierte Dialogfeld „Diagrammeditor“ verwenden, um ein Diagramm zu entwerfen und dann den serialisierten String ChartWrapper anzufordern, der das Diagramm darstellt. Anschließend können Sie diesen String kopieren, einfügen und wie oben unter ChartWrapper beschrieben verwenden.

Sie können einen Diagrammeditor auf Ihrer eigenen Seite einbetten und Nutzern Methoden zur Verfügung stellen, mit denen sie eine Verbindung zu anderen Datenquellen herstellen und den String ChartWrapper zurückgeben können. Weitere Informationen finden Sie in der Referenzdokumentation zu ChartEditor.

 

DrawChart()

DrawChart ist eine globale statische Methode, die ein ChartWrapper umschließt.

Vorteile:

  • Wie bei ChartWrapper, aber etwas kürzer.

Nachteile:

  • Gibt kein Handle an den Wrapper zurück, sodass Sie keine Ereignisse verarbeiten können.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Weitere Informationen