Indlæs bibliotekerne
Denne side viser, hvordan du indlæser Google Chart-bibliotekerne.
Grundlæggende indlæsning af biblioteker
Med få undtagelser bør alle websider med Google Charts indeholde følgende linjer i <head> på websiden:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
Den første linje i dette eksempel indlæser selve indlæseren. Du kan kun indlæse loader’en én gang, uanset hvor mange diagrammer du planlægger at tegne. Når du har indlæst loaderen, kan du kalde funktionen google.charts.load en eller flere gange for at indlæse pakker til bestemte diagramtyper.
Det første argument til google.charts.load er versionsnavnet eller -nummeret,som en streng. Hvis du angiver 'current', medfører dette, at den seneste officielle udgave af Google Charts indlæses. Hvis du vil prøve kandidatversionen til den næsteudgave, skal du i stedet bruge 'upcoming'. Generelt vil der være meget lille forskel mellem de to, og de vil være fuldstændig identiske, undtagen når en ny udgivelse er undervejs. En almindelig grund til at bruge upcoming er, at du vil teste en ny diagramtype eller en ny funktion, som Google er ved at frigive i løbet af den næste måned eller to. (Vi annoncerer kommende udgivelser på vores forum og anbefaler, at du afprøver dem, når de er annonceret, for at være sikker på, at eventuelle ændringer i dine diagrammer er acceptable.)
I eksemplet ovenfor antages det, at du vil vise et corechart (bjælke, søjle, linje, område, trinvist område, boble, tærte, donut, combo, candlestick, histogram, spredning). Hvis du ønsker en anden eller yderligere diagramtype, skal du erstatte eller tilføje det relevante pakkenavn i stedet for corechart ovenfor (f.eks. {packages: }). Du kan finde pakkenavnet i afsnittet “Indlæsning” på dokumentationssiden for hvert diagram.
Dette eksempel forudsætter også, at du har en JavaScript-funktion med navnet drawChart defineret et sted på din webside. Du kan navngive den funktion, som du vil, men sørg for, at den er globalt unik, og at den er defineret, før du refererer til den i dit kald til google.charts.setOnLoadCallback.
Bemærk: Tidligere versioner af Google Diagrammer brugte kode, der afviger fra ovenstående, til at indlæse bibliotekerne. Hvis du vil opdatere dine eksisterende diagrammer til at bruge den nye kode, skal du se Opdater kode til biblioteksindlæsning.
Her er et fuldstændigt eksempel på tegning af et cirkeldiagram ved hjælp af den grundlæggende indlæsningsteknik:
<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>
Detaljer om indlæsning
Først skal du indlæse selve indlæseren, hvilket gøres i et separat script tag med src="https://www.gstatic.com/charts/loader.js". Dette tag kan enten være i head eller body i dokumentet, eller det kan indsættes dynamisk i dokumentet, mens det indlæses, eller efter at indlæsningen er afsluttet.
<script src="https://www.gstatic.com/charts/loader.js"></script>
Når loader er indlæst, står det dig frit for at kalde google.charts.load. Hvor du kalder det kan være i et script-tag i head eller body i dokumentet, og du kan kalde det enten mens dokumentet stadig er ved at blive indlæst eller når som helst efter endt indlæsning.
Fra og med version 45 kan du kalde google.charts.load mere end én gang for at indlæse yderligere pakker, selvom det er sikrere, hvis du kan undgå at gøre det. Du skal angive det samme versionsnummer og de samme sprogindstillinger hver gang.
Du kan nu bruge den gamle JSAPI autoload URL-parameter, men værdien af denne parameter skal anvende streng JSON-formatering og URL-kodning. I JavaScript kan du foretage kodningen af jsonObject med denne kode: encodeURIComponent(JSON.stringify(jsonObject)).
Begrænsninger
Hvis du bruger versioner før v45, er der et par mindre, men vigtige begrænsninger med hensyn til, hvordan du indlæser Google Charts:
- Du kan kun kalde
google.charts.loadén gang. Men du kan angive alle de pakker, du skal bruge, i ét kald, så der er ikke behov for at foretage separate kald. - Hvis du bruger en ChartWrapper, skal du eksplicit indlæse alle de pakker, du skal bruge, i stedet for at stole på, at ChartWrapper automatisk indlæser dem for dig.
- For Geochart og Map Chart skal du indlæse både den gamle biblioteksindlæser og den nye biblioteksindlæser. Igen, dette gælder kun for versioner før v45, og du bør ikke gøre dette for senere versioner.
<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>
Indlæs versionsnavn eller -nummer
Det første argument i dit google.charts.load-opkald er versionsnavnet eller -nummeret. Der findes kun to specielle versionsnavne på nuværende tidspunkt og flere frosne versioner.
current Dette er for den seneste officielle udgave, som ændres hver gang vi udsender en ny udgave. Denne version er ideelt set godt testet og fejlfri, men du ønsker måske at angive en bestemt frossen version i stedet, når du er tilfreds med, at den fungerer. upcoming Dette er for den næste version, mens den stadig er ved at blive testet, og før den bliver den officielle aktuelle version. Test denne version regelmæssigt, så du så hurtigt som muligt ved, om der er problemer, der skal løses, inden denne version bliver den officielle udgivelse.
Når vi udgiver nye versioner af Google Charts, er nogle af ændringerne store, f.eks. helt nye diagramtyper. Andre ændringer er små, f.eks. forbedringer af udseende eller adfærd i eksisterende diagrammer.
Mange Google Chart-skabere finjusterer udseendet og fornemmelsen af deres diagrammer, indtil det er præcis, som de ønsker det. Nogle udviklere føler sig måske mere trygge ved at vide, at deres diagrammer aldrig vil blive ændret, uanset hvilke forbedringer vi foretager i fremtiden. For disse brugere understøtter vi frosne Google-diagrammer.
Frosne diagramversioner identificeres ved et nummer, og de er beskrevet i vores officielle udgivelser.Hvis du vil indlæse en frossen version, skal du erstatte current eller upcoming i dit kald af google.charts.load med det frosne versionsnummer:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
Vi forventer, at frosne versioner vil forblive tilgængelige på ubestemt tid, selv om vi kan trække frosne versioner, der har sikkerhedsmæssige problemer, tilbage. Vi vil typisk ikke yde support for frosne versioner, bortset fra at foreslå, at du opgraderer til en nyere version.
Indlæs indstillinger
Den anden parameter i dit kald af google.charts.load er et objekt til angivelse af indstillinger. Følgende egenskaber understøttes for indstillinger.
pakker Et array af nul eller flere pakker. Hver pakke, der indlæses, indeholder den kode, der er nødvendig for at understøtte et sæt funktioner, typisk en type diagram. Den eller de pakker, du skal indlæse, er angivet i dokumentationen for hver diagramtype. Du kan undgå at angive nogen pakker, hvis du bruger en ChartWrapper til automatisk at indlæse det, der er nødvendigt. language Koden for det sprog eller den locale, der skal være for at tilpasse den tekst, der kan være en del af diagrammet. Se Locales for flere oplysninger. callback En funktion, der skal kaldes, når pakkerne er blevet indlæst. Alternativt kan du angive denne funktion ved at kalde
google.charts.setOnLoadCallbacksom vist i eksemplet ovenfor. Se Callback for flere oplysninger.
google.charts.load('current', { packages: , callback: drawChart });
mapsApiKey (v45) Med denne indstilling kan du angive en nøgle, som du kan bruge sammen med Geochart og Map Chart. Du ønsker måske at gøre dette i stedet for at bruge standardadfærden, som kan resultere i lejlighedsvis neddrosling af tjenesten for dine brugere. Få mere at vide om, hvordan du opretter din egen nøgle til brug af tjenesten “Google Maps JavaScript API” her: Få en nøgle/autentificering: Hent en nøgle/autentificering. Din kode vil se nogenlunde sådan ud:
var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });
safeMode (v47) Når den er indstillet til true, vil alle diagrammer og tooltips, der genererer HTML fra brugerleverede data, rense dem ved at fjerne usikre elementer og attributter. Alternativt (v49+) kan biblioteket indlæses i safe mode ved hjælp af en genvej, der accepterer de samme indlæsningsindstillinger, men altid indlæser den “aktuelle” version:
google.charts.safeLoad({ packages: });
Locales
Locales bruges til at tilpasse teksten til et land eller sprog, hvilket påvirker formateringen af værdier såsom valutaer, datoer og tal.
Som standard indlæses Google Charts med “en” locale. Du kan tilsidesætte denne standard ved udtrykkeligt at angive et lokalområde i indlæsningsindstillingerne.
For at indlæse et diagram formateret til et bestemt lokalområde skal du bruge language-indstillingen på følgende måde:
// Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});
Følg dette link for at få et levende eksempel.
Callback
Før du kan bruge nogen af de pakker, der indlæses af google.charts.load, skal du vente på, at indlæsningen er færdig. Det er ikke nok blot at vente på, at dokumentet er færdig med at blive indlæst. Da det kan tage noget tid, før denne indlæsning er færdig, skal du registrere en callback-funktion. Der er tre måder, hvorpå dette kan gøres. Enten kan du angive en callback-indstilling i dit google.charts.load-opkald, eller du kan kalde setOnLoadCallback ved at overgive en funktion som argument, eller du kan bruge den Promise, der returneres ved opkaldet af google.charts.load.
Bemærk, at du for alle disse måder skal angive en funktionsdefinition i stedet for at kalde funktionen. Den funktionsdefinition, du angiver, kan enten være en navngiven funktion (så du blot angiver dens navn) eller en anonym funktion. Når pakkerne er færdige med at indlæse pakkerne, vil denne callback-funktion blive kaldt uden argumenter. Indlæseren vil også vente på, at dokumentet er færdigindlæst, før den kalder callback-funktionen.
Hvis du ønsker at tegne mere end ét diagram, kan du enten registrere mere end én callback-funktion ved hjælp af setOnLoadCallback, eller du kan kombinere dem i én funktion. Få mere at vide om, hvordan du tegner flere diagrammer på én side.
google.charts.setOnLoadCallback(drawChart1); google.charts.setOnLoadCallback(drawChart2); // OR google.charts.setOnLoadCallback( function() { // Anonymous function that calls drawChart1 and drawChart2 drawChart1(); drawChart2(); });
Callback via løfte
En anden måde at registrere dit callback på er ved at bruge det løfte, der returneres fra google.charts.load-opkaldet. Det gør du ved at tilføje et kald til then()-metoden med kode, der ser ud som følgende.
google.charts.load('upcoming', {packages: }).then(drawChart);
En fordel ved at bruge Promise er, at du så nemt kan tegne flere diagrammer blot ved at kæde flere .then(anotherFunction)-opkald sammen. Brug af Promise binder også callbacken til de specifikke pakker, der kræves for denne callback, hvilket er vigtigt, hvis du ønsker at indlæse flere pakker med et andet kald af google.charts.load().
Aktualiser kode til indlæsning af biblioteker
Forrige versioner af Google Charts brugte forskellig kode til at indlæse bibliotekerne. Tabellen nedenfor viser den gamle kode til indlæsning af biblioteker i forhold til den nye.
<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>
For at opdatere dine eksisterende diagrammer kan du erstatte den gamle kode til indlæsning af biblioteker med den nye kode, men husk på de begrænsninger for indlæsning af biblioteker, der er beskrevet ovenfor.
Leave a Reply