Ladda biblioteken
Denna sida visar hur du laddar Google Chart-biblioteken.
Grundläggande biblioteksladdning
Med några få undantag bör alla webbsidor med Google Charts innehålla följande rader i webbsidans <head>:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
Den första raden i det här exemplet laddar själva laddaren. Du kan bara ladda laddaren en gång, oavsett hur många diagram du planerar att rita. När du har laddat laddaren kan du anropa funktionen google.charts.load en eller flera gånger för att ladda paket för särskilda diagramtyper.
Det första argumentet till google.charts.load är versionens namn eller nummer,som en sträng. Om du anger 'current', kommer detta att leda till att den senaste officiella versionen av Google Charts laddas. Om du vill prova kandidaten för nästa version använder du 'upcoming' i stället. I allmänhet kommer det att vara mycket liten skillnad mellan de två, och de kommer att vara helt identiska utom när en ny version är på gång. En vanlig anledning att använda upcoming är att du vill testa en ny diagramtyp eller funktion som Google kommer att släppa inom den närmaste månaden eller två. (Viannonserar kommande versioner på vårt forum och rekommenderar att du provar dem när de tillkännages, för att vara säker på att eventuella ändringar i dina diagram är acceptabla.)
Exemplet ovan utgår från att du vill visa en corechart (stapel, kolumn, linje, area, stepped area, bubbla, paj, donut, combo, ljusstake, histogram, scatter). Om du vill ha en annan eller ytterligare diagramtyp ersätter du corechart med eller lägger till lämpligt paketnamn för corechart ovan (t.ex. {packages: }). Du hittar paketnamnet i avsnittet ”Loading” på dokumentationssidan för varje diagram.
Det här exemplet förutsätter också att du har en JavaScript-funktion med namnet drawChart definierad någonstans på din webbsida. Du kan kalla funktionen vad du vill, men se till att den är globalt unik och att den är definierad innan du hänvisar till den i anropet till google.charts.setOnLoadCallback.
Anm.: Tidigare versioner av Google Charts använde kod som skiljer sig från ovanstående för att ladda biblioteken. Om du vill uppdatera dina befintliga diagram för att använda den nya koden, se Uppdatera koden för biblioteksladdare.
Här är ett komplett exempel på att rita ett cirkeldiagram med hjälp av den grundläggande laddningstekniken:
<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 laddning
Först måste du ladda själva laddaren, vilket görs i en separat script-tagg med src="https://www.gstatic.com/charts/loader.js". Denna tagg kan antingen finnas i head eller body i dokumentet, eller så kan den infogas dynamiskt i dokumentet medan det laddas eller efter att laddningen är klar.
<script src="https://www.gstatic.com/charts/loader.js"></script>
När laddaren har laddats är det fritt fram att anropa google.charts.load. Var du anropar den kan vara i en script-tagg i head eller body i dokumentet, och du kan anropa den antingen medan dokumentet fortfarande laddas eller när som helst efter att det har laddats färdigt.
Från och med version 45 kan du anropa google.charts.load mer än en gång för att ladda ytterligare paket, även om det är säkrare om du kan undvika att göra det. Du måste ange samma versionsnummer och språkinställningar varje gång.
Du kan nu använda den gamla JSAPI autoload URL-parametern, men värdet av denna parameter måste använda strikt JSON-formatering och URL-kodning. I JavaScript kan du göra kodningen av jsonObject med den här koden: encodeURIComponent(JSON.stringify(jsonObject)).
Begränsningar
Om du använder versioner före v45 finns det ett par mindre men viktiga begränsningar för hur du laddar Google Charts:
- Du kan bara anropa
google.charts.loaden gång. Men du kan lista alla paket som du behöver i ett anrop, så du behöver inte göra separata anrop. - Om du använder en ChartWrapper måste du uttryckligen ladda alla paket som du behöver, i stället för att förlita dig på att ChartWrapper automatiskt laddar dem åt dig.
- För Geochart och Map Chart måste du ladda både den gamla biblioteksladdaren och den nya biblioteksladdaren. Återigen gäller detta endast för versioner före v45, och du bör inte göra detta för senare versioner.
<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>
Ladda versionsnamn eller -nummer
Det första argumentet i ditt google.charts.load-anrop är versionsnamnet eller -numret. Det finns endast två speciella versionsnamn för närvarande, och flera frysta versioner.
current Detta är för den senaste officiella versionen som ändras varje gång vi skickar ut en ny version. Denna version är helst väl testad och felfri, men du kanske vill ange en särskild fryst version i stället när du är nöjd med att den fungerar. upcoming Detta är för nästa version, medan den fortfarande testas och innan den blir den officiella aktuella versionen. Testa den här versionen regelbundet så att du så snart som möjligt vet om det finns några problem som bör åtgärdas innan den här versionen blir den officiella versionen.
När vi släpper nya versioner av Google Charts är vissa ändringar stora, till exempel helt nya diagramtyper. Andra ändringar är små, t.ex. förbättringar av befintliga diagrams utseende eller beteende.
Många Google Chart-skapare finjusterar utseendet och känslan på sina diagram tills det är exakt som de vill ha det. Vissa skapare kanske känner sig mer bekväma när de vet att deras diagram aldrig kommer att ändras, oavsett vilka förbättringar vi gör i framtiden. För dessa användare har vi stöd för frysta Google Charts.
Frysta diagramversioner identifieras med ett nummer och de beskrivs i våra officiella utgåvor.För att ladda en fryst version ersätter du current eller upcoming i din anropning av google.charts.load med den frysta versionens nummer:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
Vi förväntar oss att frysta versioner kommer att förbli tillgängliga på obestämd tid, även om vi kan komma att ta bort frysta versioner som har säkerhetsproblem. Vi kommer vanligtvis inte att ge stöd för frysta versioner, förutom att vi hjälpsamt föreslår att du uppgraderar till en nyare version.
Ladda inställningar
Den andra parametern i ditt anrop av google.charts.load är ett objekt för att specificera inställningar. Följande egenskaper stöds för inställningar.
paket En matris med noll eller flera paket. Varje paket som laddas har den kod som krävs för att stödja en uppsättning funktioner, vanligtvis en typ av diagram. Paketet eller paketen som du behöver ladda anges i dokumentationen för varje typ av diagram. Du kan undvika att ange några paket om du använder en ChartWrapper för att automatiskt ladda det som behövs. language Koden för det språk eller den lokal som ska användas för att anpassa text som kan vara en del av diagrammet. Se Locales för mer information. callback En funktion som ska anropas när paketen har laddats. Alternativt kan du ange den här funktionen genom att anropagoogle.charts.setOnLoadCallbacksom visas i exemplet ovan. Se Callback för mer information.
google.charts.load('current', { packages: , callback: drawChart });
mapsApiKey (v45) Med den här inställningen kan du ange en nyckel som du kan använda med Geochart och Map Chart. Du kanske vill göra detta i stället för att använda standardbeteendet som kan resultera i tillfällig strypning av tjänsten för dina användare. Lär dig hur du ställer in en egen nyckel för att använda tjänsten ”Google Maps JavaScript API” här: Få en nyckel/autentisering. Din kod kommer att se ut ungefär så här:
var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });
safeMode (v47) När den är inställd på true kommer alla diagram och verktygstips som genererar HTML från data som tillhandahålls av användaren att renodla den genom att ta bort osäkra element och attribut. Alternativt (v49+) kan biblioteket laddas i safe mode med hjälp av en genväg som accepterar samma laddningsinställningar, men som alltid laddar den ”aktuella” versionen:
google.charts.safeLoad({ packages: });
Lokaler
Lokaler används för att anpassa texten till ett land eller språk, vilket påverkar formateringen av värden som valutor, datum och siffror.
Som standard laddas Google Charts med lokalinställningen ”en”. Du kan åsidosätta denna standard genom att uttryckligen ange en lokal i laddningsinställningarna.
För att ladda ett diagram som är formaterat för en specifik lokal använder du language-inställningen så här:
// Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});
Följ den här länken för att se ett levande exempel.
Callback
För att du ska kunna använda något av paketen som laddas av google.charts.load måste du vänta på att laddningen är klar. Det räcker inte att bara vänta på att dokumentet ska sluta laddas. Eftersom det kan ta tid innan denna laddning är klar måste du registrera en callback-funktion. Det finns tre sätt att göra detta på. Antingen anger du en callback-inställning i ditt google.charts.load-anrop, eller så anropar du setOnLoadCallback genom att överlämna en funktion som argument, eller så använder du den Promise som returneras av anropet av google.charts.load.
Observera att för alla dessa sätt måste du tillhandahålla en funktionsdefinition i stället för att anropa funktionen. Funktionsdefinitionen du tillhandahåller kan antingen vara en namngiven funktion (så att du bara anger dess namn) eller en anonym funktion. När paketen har laddats färdigt kommer den här callback-funktionen att anropas utan argument. Laddaren kommer också att vänta på att dokumentet är färdigt att laddas innan den anropar callback-funktionen.
Om du vill rita mer än ett diagram kan du antingen registrera mer än en callback-funktion med hjälp av setOnLoadCallback, eller så kan du kombinera dem till en funktion. Läs mer om hur du ritar flera diagram på en sida.
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
Ett annat sätt att registrera din callback är att använda Promise som returneras från google.charts.load-anropet. Du gör detta genom att lägga till ett anrop till then()-metoden med kod som ser ut som följande.
google.charts.load('upcoming', {packages: }).then(drawChart);
En fördel med att använda Promise är att du då enkelt kan rita fler diagram bara genom att kedja fler .then(anotherFunction)-anrop. Genom att använda Promise knyts även callbacken till de specifika paket som krävs för den callbacken, vilket är viktigt om du vill ladda fler paket med ett annat anrop av google.charts.load().
Uppdatera koden för biblioteksladdare
Förre versioner av Google Charts använde olika koder för att ladda biblioteken. Tabellen nedan visar den gamla koden för biblioteksladdning jämfört med den nya.
<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>
För att uppdatera dina befintliga diagram kan du byta ut den gamla koden för biblioteksladdning mot den nya koden.Tänk dock på de begränsningar för laddning av bibliotek som beskrivs ovan.
Leave a Reply