Laad de Bibliotheken
Deze pagina laat zien hoe de Google Grafieken bibliotheken geladen moeten worden.
Basis Bibliotheek Laden
Op enkele uitzonderingen na, moeten alle web pagina’s met Google Grafieken de volgende regels in de <head> van de web pagina bevatten:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
De eerste regel van dit voorbeeld laadt de loader zelf. Je kunt de loader maar één keer laden, ongeacht het aantal grafieken dat je wilt tekenen. Na het laden van de loader, kunt U de google.charts.load functie één of meerdere malen aanroepen om pakketten te laden voor bepaalde grafiek types.
Het eerste argument voor google.charts.load is de versienaam of -nummer, als een string. Als u 'current' opgeeft, zal de laatste officiële versie van Google Charts worden geladen. Als u de kandidaat voor de volgende release wilt proberen, gebruik dan 'upcoming' in plaats daarvan. In het algemeen zal er weinig verschil zijn tussen de twee, en ze zullen volledig identiek zijn, behalve wanneer er een nieuwe release onderweg is. Een veel voorkomende reden om upcoming te gebruiken is dat u een nieuw grafiektype of een nieuwe functie wilt testen die Google in de komende maand of twee gaat uitbrengen. (We kondigen aankomende releases op ons forum aan en raden u aan ze uit te proberen wanneer ze worden aangekondigd, om er zeker van te zijn dat eventuele wijzigingen in uw grafieken acceptabel zijn.)
Het bovenstaande voorbeeld gaat ervan uit dat u een corechart(bar, column, line, area, stepped area, bubble, pie, donut, combo,candlestick, histogram, scatter) wilt laten zien. Indien u een ander of aanvullend grafiektype wenst, vervangt of voegt u de juiste pakketnaam toe voor corechart hierboven (b.v. {packages: }. U kunt de pakketnaam vinden in de ‘Loading’ sectie van de documentatie pagina voor elke grafiek.
Dit voorbeeld gaat er ook van uit dat U een JavaScript functie met de naam drawChart ergens in uw web pagina heeft gedefinieerd. U kunt die functie elke naam geven die u maar wilt, maar zorg ervoor dat hij globaal uniek is en dat hij gedefinieerd is voordat u er in uw oproep naargoogle.charts.setOnLoadCallback naar verwijst.
Note: Eerdere versies van Google Charts gebruikten een code die afwijkt van de bovenstaande om de bibliotheken te laden. Om uw bestaande grafieken te updaten naar de nieuwe code, zie Update Library Loader Code.
Hier is een compleet voorbeeld van het tekenen van een taartdiagram met behulp van de basis laadtechniek:
<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>
Laad Details
Eerst moet u de lader zelf laden, wat wordt gedaan in een aparte script tag met src="https://www.gstatic.com/charts/loader.js". Deze tag kan ofwel in de head of body van het document staan, of hij kan dynamisch in het document worden ingevoegd terwijl het wordt geladen of nadat het laden is voltooid.
<script src="https://www.gstatic.com/charts/loader.js"></script>
Nadat de loader is geladen, bent u vrij om google.charts.load aan te roepen. Waar u het oproept, kan in een script-tag in de head of body van het document staan, en u kunt het oproepen terwijl het document nog wordt geladen of op enig moment nadat het laden is voltooid.
Vanaf versie 45 kunt u google.charts.load meer dan een keer aanroepen om extra pakketten te laden, hoewel het veiliger is als u dit kunt vermijden. U moet elke keer hetzelfde versienummer en dezelfde taalinstellingen opgeven.
U kunt nu de oude JSAPI autoload URL parameter gebruiken, maar de waarde van deze parameter moet een strikte JSON opmaak en URL encoding gebruiken. In JavaScript, kunt u de codering van jsonObject doen met deze code: encodeURIComponent(JSON.stringify(jsonObject)).
Beperkingen
Als u versies gebruikt die ouder zijn dan v45, zijn er een paar kleine maar belangrijke beperkingen met hoe u Google Charts laadt:
- U kunt
google.charts.loadmaar één keer aanroepen. Maar u kunt alle benodigde pakketten in één keer aanroepen, dus u hoeft geen afzonderlijke aanroepen te doen. - Als u een ChartWrapper gebruikt, moet u alle benodigde pakketten expliciet laden, in plaats van erop te vertrouwen dat de ChartWrapper ze automatisch voor u laadt.
- Voor Geochart en Map Chart moet je zowel de oude als de nieuwe library loader laden. Nogmaals, dit geldt alleen voor versies voorafgaand aan v45, en u moet dit niet doen voor latere versies.
<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>
Laad Versie Naam of Nummer
Het eerste argument van uw google.charts.load aanroep is de versie naam of nummer. Er zijn slechts twee speciale versienamen op dit moment, en verschillende bevroren versies.
current Dit is voor de laatste officiële release, die iedere keer verandert als we een nieuwe release uitbrengen. Deze versie is idealiter goed getest en vrij van bugs, maar misschien wilt u in plaats daarvan een bepaalde bevroren versie specificeren als u eenmaal tevreden bent dat deze werkt. upcoming Dit is voor de volgende release, terwijl deze nog wordt getest en voordat het de officiële huidige release wordt. Test deze versie regelmatig, zodat u zo snel mogelijk weet of er problemen zijn die moeten worden aangepakt voordat deze versie de officiële release wordt.
Wanneer we nieuwe versies van Google Charts uitbrengen, zijn sommige veranderingen groot, zoals geheel nieuwe grafiektypen. Andere wijzigingen zijn klein, zoals verbeteringen in het uiterlijk of het gedrag van bestaande diagrammen.
Veel makers van Google Charts stellen het uiterlijk en het gevoel van hun diagrammen net zo lang bij tot het precies is wat ze willen. Sommige makers vinden het misschien prettiger om te weten dat hun diagrammen nooit zullen veranderen, ongeacht de verbeteringen die we in de toekomst aanbrengen. Voor deze gebruikers ondersteunen we bevroren Google Charts.
Gevroren grafiekversies worden geïdentificeerd door een nummer, en ze worden beschreven in onze officiële Releases.Om een bevroren versie te laden, vervangt u current of upcoming in uw oproep van google.charts.load door het nummer van de bevroren versie:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
We verwachten dat bevroren versies voor onbepaalde tijd beschikbaar zullen blijven, hoewel we bevroren versies die veiligheidsrisico’s bevatten kunnen intrekken. We zullen gewoonlijk geen ondersteuning bieden voor bevroren versies, behalve dan dat we u vriendelijk aanraden om te upgraden naar een nieuwere versie.
Instellingen laden
De tweede parameter in uw oproep van google.charts.load is een object voor het specificeren van instellingen. De volgende eigenschappen worden ondersteund voor instellingen.
packages Een array van nul of meer packages. Elk pakket dat wordt geladen bevat de code die nodig is om een bepaalde functionaliteit te ondersteunen, meestal een grafiektype. Het pakket of de pakketten die je moet laden staan vermeld in de documentatie voor elk type grafiek. Je kunt het specificeren van packages vermijden als je een ChartWrapper gebruikt om automatisch te laden wat nodig is. language De code voor de taal of locale die gebruikt moet worden om tekst aan te passen die deel kan uitmaken van de grafiek. Zie Locales voor meer details. callback Een functie die aangeroepen wordt zodra de packages geladen zijn. U kunt deze functie ook specificeren door
google.charts.setOnLoadCallbackaan te roepen, zoals in het voorbeeld hierboven. Zie Callback voor meer details.
google.charts.load('current', { packages: , callback: drawChart });
mapsApiKey (v45) Met deze instelling kunt u een sleutel specificeren die u kunt gebruiken met Geochart en Map Chart. Misschien wilt u dit doen in plaats van het standaard gedrag te gebruiken dat kan resulteren in het af en toe beperken van de service voor uw gebruikers. Leer hier hoe u uw eigen sleutel kunt instellen voor het gebruik van de ‘Google Maps JavaScript API’-service: Sleutel verkrijgen/Authenticatie. Uw code ziet er ongeveer zo uit:
var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });
safeMode (v47) Indien ingesteld op true, zullen alle grafieken en tooltips die HTML genereren van door de gebruiker ingevoerde gegevens, deze zuiveren door onveilige elementen en attributen te verwijderen. Als alternatief (v49+) kan de bibliotheek worden geladen in de veilige modus met behulp van een snelkoppeling die dezelfde laad-instellingen accepteert, maar altijd de “huidige” versie laadt:
google.charts.safeLoad({ packages: });
Lokalen
Lokalen worden gebruikt om tekst aan te passen voor een land of taal, wat van invloed is op de opmaak van waarden zoals valuta, datums en getallen.
De standaardinstelling is dat de Google Charts worden geladen met de “en” lokalisatie. U kunt deze standaard opheffen door expliciet een locale te specificeren in de laad instellingen.
Om een grafiek te laden die is geformatteerd voor een specifieke locale, gebruikt u de language instelling als volgt:
// Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});
Volg deze link voor een live voorbeeld.
Callback
Voordat u gebruik kunt maken van een van de pakketten geladen door google.charts.load moet u wachten tot het laden is voltooid. Het is niet voldoende om gewoon te wachten tot het document klaar is met laden. Omdat het enige tijd kan duren voordat het laden is voltooid, moet u een callback-functie registreren. Er zijn drie manieren om dit te doen. Ofwel specificeer je een callback instelling in je google.charts.load oproep, ofwel roep je setOnLoadCallback aan met een functie als argument, ofwel gebruik je de Promise die wordt geretourneerd door de oproep van google.charts.load.
Merk op dat je voor al deze manieren een functie-definitie moet opgeven, in plaats van de functie aan te roepen. De functiedefinitie die u opgeeft, kan een functie met naam zijn (dus u geeft alleen de naam op) of een anonieme functie. Als de pakketten klaar zijn met laden, zal deze callback functie zonder argumenten aangeroepen worden. De loader zal ook wachten tot het document klaar is met laden voordat hij de callback aanroept.
Als u meer dan één grafiek wilt tekenen, kunt u ofwel meer dan één callback functie registreren met setOnLoadCallback, of u kunt ze combineren in één functie. Meer informatie over het tekenen van meerdere grafieken op een pagina.
google.charts.setOnLoadCallback(drawChart1); google.charts.setOnLoadCallback(drawChart2); // OR google.charts.setOnLoadCallback( function() { // Anonymous function that calls drawChart1 and drawChart2 drawChart1(); drawChart2(); });
Callback via Promise
Een andere manier om uw callback te registreren is om de Promise te gebruiken die wordt geretourneerd van de google.charts.load aanroep. U doet dit door een oproep toe te voegen aan de then() methode met code die er als volgt uitziet.
google.charts.load('upcoming', {packages: }).then(drawChart);
Een voordeel van het gebruik van de Belofte is dat je dan gemakkelijk meer grafieken kunt tekenen door gewoon meer .then(anotherFunction) aanroepen aan elkaar te rijgen. Het gebruik van de Belofte bindt de callback ook aan de specifieke pakketten die nodig zijn voor die callback, wat belangrijk is als je meer pakketten wilt laden met een andere aanroep van google.charts.load().
Update Library Loader Code
Vorige versies van Google Charts gebruikten verschillende code om de bibliotheken te laden. De tabel hieronder toont de oude en de nieuwe code voor het laden van de 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>
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart);</script>
Om uw bestaande grafieken te updaten, kunt u de oude code voor het laden van de bibliotheken vervangen door de nieuwe code.Houd echter rekening met de beperkingen voor het laden van bibliotheken die hierboven zijn beschreven.
Leave a Reply