Articles /

Laden der Bibliotheken

Diese Seite zeigt, wie die Google Chart-Bibliotheken geladen werden.

Grundlegendes Laden der Bibliotheken

Mit wenigen Ausnahmen sollten alle Webseiten mit Google Charts die folgenden Zeilen im <head> der Webseite enthalten:

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

Die erste Zeile dieses Beispiels lädt den Loader selbst. Sie können den Loader nur ein einziges Mal laden, unabhängig davon, wie viele Diagramme Sie zu zeichnen beabsichtigen. Nachdem Sie den Lader geladen haben, können Sie die Funktion google.charts.load ein oder mehrere Male aufrufen, um Pakete für bestimmte Diagrammtypen zu laden.

Das erste Argument von google.charts.load ist der Versionsname oder die Versionsnummer als String. Wenn Sie 'current' angeben, wird die neueste offizielle Version von Google Charts geladen. Wenn Sie den Kandidaten für die nächste Version ausprobieren möchten, verwenden Sie stattdessen 'upcoming'. Im Allgemeinen gibt es kaum einen Unterschied zwischen den beiden, und sie sind völlig identisch, außer wenn eine neue Version in Arbeit ist. Ein häufiger Grund für die Verwendung von upcoming ist, dass Sie einen neuen Diagrammtyp oder eine neue Funktion testen möchten, die Google in den nächsten ein oder zwei Monaten veröffentlichen wird. (Wir kündigen neue Versionen in unserem Forum an und empfehlen Ihnen, sie auszuprobieren, wenn sie angekündigt werden, um sicherzustellen, dass alle Änderungen an Ihren Diagrammen akzeptabel sind.)

Das obige Beispiel geht davon aus, dass Sie ein corechart(Balken, Säule, Linie, Fläche, gestufte Fläche, Blase, Torte, Donut, Combo, Candlestick, Histogramm, Streuung) anzeigen möchten. Wenn Sie einen anderen oder zusätzlichen Diagrammtyp wünschen, ersetzen Sie corechart durch den entsprechenden Paketnamen oder fügen Sie ihn hinzu (z. B. {packages: }). Sie finden den Paketnamen im Abschnitt „Laden“ der Dokumentationsseite für jedes Diagramm.

Dieses Beispiel setzt außerdem voraus, dass Sie irgendwo auf Ihrer Webseite eine JavaScript-Funktion mit dem Namen drawChart definiert haben. Sie können diese Funktion benennen, wie Sie möchten, aber stellen Sie sicher, dass sie global eindeutig ist und dass sie definiert ist, bevor Sie sie in Ihrem Aufruf von google.charts.setOnLoadCallback referenzieren.

Hinweis: Frühere Versionen von Google Charts verwendeten einen anderen Code zum Laden der Bibliotheken als oben beschrieben. Um Ihre bestehenden Diagramme zu aktualisieren und den neuen Code zu verwenden, lesen Sie bitte den Abschnitt Bibliotheksladecode aktualisieren.

Hier ist ein vollständiges Beispiel für das Zeichnen eines Tortendiagramms mit der grundlegenden Ladetechnik:

<head> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); function drawChart() { // Define the chart to be drawn. var data = new google.visualization.DataTable(); data.addColumn('string', 'Element'); data.addColumn('number', 'Percentage'); data.addRows(, , ]); // Instantiate and draw the chart. var chart = new google.visualization.PieChart(document.getElementById('myPieChart')); chart.draw(data, null); } </script></head><body> <!-- Identify where the chart should be drawn. --> <div/></body>

Details zum Laden

Zuerst müssen Sie den Lader selbst laden, was in einem separaten script-Tag mit src="https://www.gstatic.com/charts/loader.js" geschieht. Dieser Tag kann sich entweder im head oder body des Dokuments befinden, oder er kann dynamisch in das Dokument eingefügt werden, während es geladen wird oder nachdem das Laden abgeschlossen ist. 

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

Nachdem der Lader geladen ist, können Sie google.charts.load aufrufen. Der Aufruf kann in einem script-Tag im head oder body des Dokuments erfolgen und kann entweder während des Ladens des Dokuments oder nach Abschluss des Ladens erfolgen.

Ab Version 45 können Sie google.charts.load mehr als einmal aufrufen, um zusätzliche Pakete zu laden, obwohl es sicherer ist, wenn Sie dies vermeiden können. Sie müssen jedes Mal die gleiche Versionsnummer und Spracheinstellung angeben.

Sie können jetzt den alten JSAPI-URL-Parameter autoload verwenden, aber der Wert dieses Parameters muss eine strenge JSON-Formatierung und URL-Kodierung verwenden. In JavaScript können Sie die Kodierung von jsonObject mit diesem Code vornehmen: encodeURIComponent(JSON.stringify(jsonObject)).

Einschränkungen

Wenn Sie Versionen vor v45 verwenden, gibt es ein paar kleine, aber wichtige Einschränkungen beim Laden von Google Charts:

  1. Sie können google.charts.load nur einmal aufrufen. Aber Sie können alle Pakete, die Sie benötigen, in einem Aufruf auflisten, so dass es nicht notwendig ist, separate Aufrufe zu machen.
  2. Wenn Sie einen ChartWrapper verwenden, müssen Sie explizit alle Pakete laden, die Sie benötigen, anstatt sich darauf zu verlassen, dass der ChartWrapper sie automatisch für Sie lädt.
  3. Für Geochart und Map Chart müssen Sie sowohl den alten Library Loader als auch den neuen Library Loader laden. Auch dies gilt nur für Versionen vor v45, und Sie sollten dies nicht für spätere Versionen tun. 
    <script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>

Versionsname oder -nummer laden

Das erste Argument Ihres google.charts.load-Aufrufs ist der Versionsname oder die Versionsnummer. Zur Zeit gibt es nur zwei spezielle Versionsnamen und mehrere eingefrorene Versionen.

current Dies ist die letzte offizielle Version, die sich jedes Mal ändert, wenn wir eine neue Version herausbringen. Diese Version ist im Idealfall gut getestet und fehlerfrei, aber vielleicht möchten Sie stattdessen eine bestimmte eingefrorene Version angeben, sobald Sie sich vergewissert haben, dass sie funktioniert. upcoming Dies ist für die nächste Version, während sie noch getestet wird und bevor sie die offizielle aktuelle Version wird. Bitte testen Sie diese Version regelmäßig, damit Sie so bald wie möglich wissen, ob es Probleme gibt, die behoben werden sollten, bevor diese Version die offizielle Version wird.

Wenn wir neue Versionen von Google Charts veröffentlichen, sind einige der Änderungen groß, wie zum Beispiel völlig neue Diagrammtypen. Andere Änderungen sind kleiner, wie z. B. Verbesserungen des Aussehens oder des Verhaltens bestehender Diagramme.

Viele Google Chart-Ersteller nehmen eine Feinabstimmung des Aussehens und des Verhaltens ihrer Diagramme vor, bis sie genau ihren Vorstellungen entsprechen. Für einige Ersteller ist es vielleicht angenehmer zu wissen, dass sich ihre Diagramme nie ändern werden, unabhängig davon, welche Verbesserungen wir in Zukunft vornehmen. Für diese Nutzer unterstützen wir eingefrorene Google Charts.

Eingefrorene Diagrammversionen sind durch eine Nummer gekennzeichnet und werden in unseren offiziellen Veröffentlichungen beschrieben.Um eine eingefrorene Version zu laden, ersetzen Sie current oder upcoming in Ihrem Aufruf von google.charts.load durch die Nummer der eingefrorenen Version:

<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>

Wir gehen davon aus, dass eingefrorene Versionen auf unbestimmte Zeit verfügbar bleiben, obwohl wir eingefrorene Versionen, die Sicherheitsbedenken aufweisen, möglicherweise aus dem Verkehr ziehen. Wir bieten normalerweise keinen Support für eingefrorene Versionen an, außer dass wir Ihnen vorschlagen, auf eine neuere Version zu aktualisieren.

Einstellungen laden

Der zweite Parameter in Ihrem Aufruf von google.charts.load ist ein Objekt zur Angabe von Einstellungen. Die folgenden Eigenschaften werden für Einstellungen unterstützt.

Pakete Ein Array mit null oder mehr Paketen. Jedes Paket, das geladen wird, enthält den Code, der zur Unterstützung einer bestimmten Funktionalität erforderlich ist, typischerweise eine Art von Diagramm. Das oder die zu ladenden Pakete sind in der Dokumentation für jeden Diagrammtyp aufgeführt. Sie können die Angabe von Paketen vermeiden, wenn Sie einen ChartWrapper verwenden, um automatisch die erforderlichen Pakete zu laden. language Der Code für die Sprache oder das Gebietsschema, das für die Anpassung von Text verwendet werden soll, der Teil des Diagramms sein könnte. Siehe Locales für weitere Details. callback Eine Funktion, die aufgerufen wird, sobald die Pakete geladen wurden. Alternativ können Sie diese Funktion auch durch den Aufruf von

google.charts.setOnLoadCallbackangeben, wie im obigen Beispiel gezeigt. Siehe Callback für weitere Details.

 google.charts.load('current', { packages: , callback: drawChart });

mapsApiKey (v45) Mit dieser Einstellung können Sie einen Schlüssel angeben, den Sie mit Geochart und Map Chart verwenden können. Sie sollten dies tun, anstatt das Standardverhalten zu verwenden, das zu einer gelegentlichen Drosselung des Dienstes für Ihre Benutzer führen kann. Hier erfahren Sie, wie Sie Ihren eigenen Schlüssel für die Nutzung des Dienstes „Google Maps JavaScript API“ einrichten können: Schlüssel/Authentifizierung abrufen. Ihr Code wird in etwa so aussehen:

 var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });

safeMode (v47) Wenn diese Option auf true gesetzt ist, werden alle Diagramme und Tooltips, die HTML aus vom Nutzer eingegebenen Daten generieren, bereinigt, indem unsichere Elemente und Attribute entfernt werden. Alternativ (v49+) kann die Bibliothek im sicheren Modus geladen werden, indem eine Verknüpfung verwendet wird, die dieselben Ladeeinstellungen akzeptiert, aber immer die „aktuelle“ Version lädt:

 google.charts.safeLoad({ packages: });

Locales

Locales werden verwendet, um Text für ein Land oder eine Sprache anzupassen, was die Formatierung von Werten wie Währungen, Daten und Zahlen beeinflusst.

Standardmäßig wird Google Charts mit dem Gebietsschema „en“ geladen. Sie können diesen Standard überschreiben, indem Sie explizit ein Gebietsschema in den Ladeeinstellungen angeben.

Um ein Diagramm zu laden, das für ein bestimmtes Gebietsschema formatiert ist, verwenden Sie die Einstellung language wie folgt:

 // Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});

Folgen Sie diesem Link für ein Live-Beispiel.

Callback

Bevor Sie eines der Pakete verwenden können, die durch google.charts.load geladen werden, müssen Sie warten, bis das Laden beendet ist. Es reicht nicht aus, nur darauf zu warten, dass das Dokument fertig geladen ist. Da es einige Zeit dauern kann, bis der Ladevorgang abgeschlossen ist, müssen Sie eine Callback-Funktion registrieren. Es gibt drei Möglichkeiten, dies zu tun. Entweder geben Sie eine callback-Einstellung in Ihrem google.charts.load-Aufruf an, oder Sie rufen setOnLoadCallback auf und übergeben eine Funktion als Argument, oder Sie verwenden das Promise, das durch den Aufruf von google.charts.load zurückgegeben wird.

Beachten Sie, dass Sie bei all diesen Möglichkeiten eine Funktionsdefinition bereitstellen müssen, anstatt die Funktion aufzurufen. Die Funktionsdefinition, die Sie bereitstellen, kann entweder eine benannte Funktion sein (Sie geben also nur ihren Namen an) oder eine anonyme Funktion. Wenn das Laden der Pakete abgeschlossen ist, wird diese Callback-Funktion ohne Argumente aufgerufen. Der Lader wird auch warten, bis das Dokument fertig geladen ist, bevor er den Callback aufruft.

Wenn Sie mehr als ein Diagramm zeichnen möchten, können Sie entweder mehrere Callback-Funktionen mit setOnLoadCallback registrieren oder sie in einer Funktion kombinieren. Erfahren Sie mehr darüber, wie Sie mehrere Diagramme auf einer Seite zeichnen können. 

 google.charts.setOnLoadCallback(drawChart1); google.charts.setOnLoadCallback(drawChart2); // OR google.charts.setOnLoadCallback( function() { // Anonymous function that calls drawChart1 and drawChart2 drawChart1(); drawChart2(); });

Callback über Promise

Eine weitere Möglichkeit, Ihren Callback zu registrieren, ist die Verwendung des Promise, das vom google.charts.load-Aufruf zurückgegeben wird. Dazu fügen Sie einen Aufruf der Methode then() mit Code hinzu, der wie folgt aussieht. 

 google.charts.load('upcoming', {packages: }).then(drawChart);

Ein Vorteil der Verwendung des Versprechens besteht darin, dass Sie dann einfach mehr Diagramme zeichnen können, indem Sie weitere .then(anotherFunction)-Aufrufe verketten. Die Verwendung von Promise bindet den Callback auch an die spezifischen Pakete, die für diesen Callback erforderlich sind, was wichtig ist, wenn Sie weitere Pakete mit einem weiteren Aufruf von google.charts.load() laden möchten.

Bibliotheksladecode aktualisieren

Vorherige Versionen von Google Charts verwendeten einen anderen Code zum Laden der Bibliotheken. Die folgende Tabelle zeigt den alten und den neuen Code für das Laden von Bibliotheken.

Alter Code für das Laden von Bibliotheken 

<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript"> google.load("visualization", "1", {packages:}); google.setOnLoadCallback(drawChart);</script>

Neuer Code für das Laden von Bibliotheken 

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

Um Ihre bestehenden Diagramme zu aktualisieren, können Sie den alten Code für das Laden von Bibliotheken durch den neuen Code ersetzen, beachten Sie jedoch die oben beschriebenen Einschränkungen beim Laden von Bibliotheken.

Leave a Reply