Looking for google-visualization Keywords? Try Ask4Keywords

google-visualizationErste Schritte mit der Google-Visualisierung


Bemerkungen

Google Visualization bietet ein flexibles Javascript-basiertes Framework zum Erstellen einer Vielzahl interaktiver Diagramme, die in Webseiten eingebettet werden können. Diese Diagrammtypen umfassen:

Mit Google Visualization erstellte Diagramme können Daten aus verschiedenen Quellen verwenden, einschließlich JSON, Google Spreadsheets sowie in Javascript geschriebene, fest codierte Arrays.

Mit der Google Visualisierungs-API können Sie auch die Daten filtern und mehrere Diagramme mit einer einzigen Datenquelle verknüpfen, um interaktive Dashboards zu erstellen, die mehrere Dimensionen derselben Daten zeigen.

Versionen

Ausführung Syntax zur Auswahl dieser Version Veröffentlichungsdatum
Aktuell google.charts.load('current', {packages: ['corechart']}); 2016-02-23
44 google.charts.load('44', {packages: ['corechart']}); 2016-02-23
43 google.charts.load('43', {packages: ['corechart']}); 2015-10-02
42 google.charts.load('42', {packages: ['corechart']}); 2015-04-30
41 google.charts.load('41', {packages: ['corechart']}); 2015-02-23

Vollständige Liste der früheren Versionen hier .

Laden und Laufen

Google hat derzeit zwei Möglichkeiten, die JS-Bibliothek für Google Visualization (auch bekannt als Google Charts), gstatic loader ( https://www.gstatic.com/charts/loader.js ) und jsapi ( https://www.google.com/jsapi ) zu laden https://www.google.com/jsapi ).

Der gstatic loader wird empfohlen, da Google von jsapi zum gstatic loader wechselt. Siehe Übergangsreferenz

In beiden Fällen müssen Sie zunächst einen der Loader mit einem script Tag versehen, normalerweise im head Ihres Dokuments, wie folgt:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 

Nachdem Sie den Loader in Ihre Webseite aufgenommen haben, können Sie die gewünschten Bibliothekspakete load indem Sie eine Ladefunktion aufrufen.

Für Loader.js

google.charts.load('current', {packages: ['corechart']});
 

Für JSAPI

google.load('visualization', '1', {'packages':['corechart']});
 

Nachdem Sie die Bibliothekspakete geladen haben, müssen Sie warten, bis sie vollständig geladen sind, bevor Sie sie weiter verwenden. Warten Sie, indem setOnLoadCallback einen Rückruf einrichten, indem Sie eine setOnLoadCallback Funktion aufrufen.

Beispielcode (für den gstatic loader):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
 google.charts.load('current', {packages: ['corechart']});
 google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Group');
        data.addColumn('number', 'Gender');
        data.addRows([
          ['Males', 10],
          ['Females', 5]
        ]);

        var options = {
            'title':'Gender distribution',
            'width':300,
            'height':300};
        var chart = new google.visualization.PieChart(
            document.getElementById('gender_chart'));
        chart.draw(data, options);
      }
    </script>
 

HTML:

<div id="gender_chart"></div>
 

JSFIDDLE