Könyvtárak betöltése
Ez az oldal a Google Chart könyvtárak betöltését mutatja be.
Alapvető könyvtárbetöltés
Néhány kivételtől eltekintve, a Google Chartokat tartalmazó weboldalaknak a következő sorokat kell tartalmazniuk a weblap <head> részében:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
A példa első sora magát a betöltőt tölti be. A betöltőt csak egyszer töltheti be, függetlenül attól, hogy hány diagramot kíván rajzolni. A betöltő betöltése után egy vagy több alkalommal meghívhatja a google.charts.load függvényt, hogy bizonyos diagramtípusokhoz tartozó csomagokat töltsön be.
A google.charts.load első argumentuma a verzió neve vagy száma,stringként. A 'current' megadása esetén a Google Charts legújabb hivatalos kiadása töltődik be. Ha a következő kiadás jelöltjét szeretné kipróbálni, használja helyette a 'upcoming' értéket. Általában nagyon kevés különbség lesz a kettő között, és teljesen azonosak lesznek, kivéve, ha egy új kiadás van folyamatban. A upcoming használatának gyakori oka, ha egy új grafikatípust vagy funkciót akarunk tesztelni, amelyet a Google a következő egy-két hónapban fog kiadni. (A közelgő kiadásokat bejelentjük a fórumunkon, és javasoljuk, hogy próbálja ki őket a bejelentéskor, hogy megbizonyosodjon arról, hogy a grafikonjait érintő változások elfogadhatóak-e.)
A fenti példa feltételezi, hogy egy corechart(bar, column, line, area, stepped area, bubble, pie, donut, combo,candlestick, histogram, scatter) ábrát szeretne megjeleníteni. Ha más vagy további diagramtípust szeretne, a fenti corechart helyébe a megfelelő csomagnevet kell tenni vagy hozzáadni (pl. {packages: }. A csomag nevét az egyes chartok dokumentációs oldalának “Loading” részében találja meg.
Ez a példa azt is feltételezi, hogy van egy drawChart nevű JavaScript-funkció definiálva valahol a weboldalán. Ezt a függvényt elnevezheti bárhogyan, de győződjön meg róla, hogy globálisan egyedi, és hogy definiálva van, mielőtt hivatkozik rá agoogle.charts.setOnLoadCallback hívásában.
Megjegyzés: A Google Charts korábbi verziói a fentiektől eltérő kódot használtak a könyvtárak betöltésére. A meglévő diagramok frissítéséhez, hogy az új kódot használja, lásd a Könyvtár betöltő kód frissítése.
Itt egy teljes példa egy kördiagram rajzolására az alap betöltési technikával:
<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>
Részletek betöltése
Először magát a betöltőt kell betölteni, ami egy külön script tagben történik a src="https://www.gstatic.com/charts/loader.js" segítségével. Ez a tag lehet a head vagy body dokumentumban, vagy dinamikusan beilleszthető a dokumentumba betöltés közben vagy a betöltés befejezése után.
<script src="https://www.gstatic.com/charts/loader.js"></script>
Miután a betöltő betöltődött, szabadon hívhatja a google.charts.load-et. A meghívás helye lehet egy script tagben a head vagy body dokumentumban, és meg lehet hívni akár a dokumentum betöltése közben, akár a betöltés befejezése után bármikor.
A 45-ös verziótól kezdve a google.charts.load többször is meghívható további csomagok betöltése érdekében, bár biztonságosabb, ha ezt elkerülhetjük. Minden alkalommal ugyanazt a verziószámot és nyelvi beállításokat kell megadnia.
Most már használhatja a régi JSAPI autoload URL paramétert, de ennek a paraméternek az értékét szigorú JSON formázással és URL kódolással kell megadni. JavaScriptben a jsonObject kódolást ezzel a kóddal végezheti el: encodeURIComponent(JSON.stringify(jsonObject)).
Korlátozások
Ha a v45 előtti verziókat használja, van néhány kisebb, de fontos korlátozás a Google Charts betöltésével kapcsolatban:
- A
google.charts.loadcsak egyszer hívhatja meg. De egyetlen hívásban felsorolhatja az összes szükséges csomagot, így nincs szükség külön hívásokra. - Ha ChartWrappert használ, akkor kifejezetten be kell töltenie az összes szükséges csomagot, és nem bízhat abban, hogy a ChartWrapper automatikusan betölti azokat.
- A Geochart és a Map Chart esetében a régi és az új könyvtárbetöltőt is be kell töltenie. Ez megint csak a v45 előtti verziókra vonatkozik, a későbbi verzióknál ezt nem kell megtennie.
<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>
A verzió neve vagy száma betöltése
A google.charts.load hívás első argumentuma a verzió neve vagy száma. Jelenleg csak két speciális verziónév létezik, és több befagyasztott verzió.
current Ez a legutolsó hivatalos kiadásra vonatkozik, amely minden új kiadás megjelenésekor változik. Ez a verzió ideális esetben jól tesztelt és hibamentes, de előfordulhat, hogy helyette egy bizonyos befagyasztott verziót akarsz megadni, miután meggyőződtél arról, hogy az működik. upcoming Ez a következő kiadásra vonatkozik, amíg még tesztelés alatt van, és mielőtt az a hivatalos aktuális kiadássá válna. Kérjük, rendszeresen tesztelje ezt a verziót, hogy a lehető leghamarabb megtudja, vannak-e olyan problémák, amelyeket ki kell küszöbölni, mielőtt ez a verzió hivatalos kiadássá válik.
Amikor a Google Charts új verzióit adjuk ki, a változások némelyike nagy, például teljesen új diagramtípusok. Más változások kisebbek, mint például a meglévő diagramok megjelenésének vagy viselkedésének javítása.
A Google Diagramok készítői közül sokan addig finomhangolják a diagramok kinézetét és hangulatát, amíg az pontosan olyan nem lesz, amilyet szeretnének. Egyes készítők talán jobban érzik magukat, ha tudják, hogy a grafikonjaik soha nem fognak változni, függetlenül attól, hogy milyen fejlesztéseket hajtunk végre a jövőben. Ezen felhasználók számára támogatjuk a befagyasztott Google Chartokat.
A befagyasztott chart verziókat számmal azonosítjuk, és a hivatalos kiadványainkban vannak leírva.Egy befagyasztott verzió betöltéséhez helyettesítse a current vagy upcoming számot a google.charts.load hívásában a befagyasztott verziószámmal:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
Azt várjuk, hogy a befagyasztott verziók korlátlan ideig elérhetőek maradnak, bár előfordulhat, hogy a biztonsági szempontból aggályos befagyasztott verziókat visszavonjuk. Általában nem nyújtunk támogatást a befagyasztott verziókhoz, kivéve, ha segítőkészen javasoljuk, hogy frissítsen egy újabb verzióra.
Load Settings
A google.charts.load hívásának második paramétere egy objektum a beállítások megadására. A beállításokhoz a következő tulajdonságok támogatottak.
packages Nulla vagy több csomagból álló tömb. Minden betöltött csomag tartalmazza a szükséges kódot egy bizonyos funkcionalitás, tipikusan egy diagramtípus támogatásához. A betöltendő csomagot vagy csomagokat az egyes diagramtípusok dokumentációja tartalmazza. A csomagok megadása elkerülhető, ha egy ChartWrapper segítségével automatikusan betölti a szükséges csomagokat. language Annak a nyelvnek vagy nyelvterületnek a kódja, amely a diagram részét képező szöveg testreszabásához szükséges. További részletekért lásd Locales. callback Egy függvény, amely a csomagok betöltése után meghívásra kerül. Alternatívaként megadhatja ezt a függvényt agoogle.charts.setOnLoadCallbackhívásával is, ahogy azt a fenti példa mutatja. További részletekért lásd Callback.
google.charts.load('current', { packages: , callback: drawChart });
mapsApiKey (v45) Ezzel a beállítással megadhat egy kulcsot, amelyet a Geochart és a Map Chart segítségével használhat. Érdemes ezt megtenni az alapértelmezett viselkedés használata helyett, ami a felhasználók számára a szolgáltatás időnkénti korlátozását eredményezheti. A “Google Maps JavaScript API” szolgáltatás használatához szükséges saját kulcs beállításának módja itt olvasható: Kulcs beszerzése/azonosítás. A kódja valahogy így fog kinézni:
var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });
safeMode (v47) Ha igazra van állítva, akkor a felhasználó által megadott adatokból HTML-t generáló összes grafikon és tooltip a nem biztonságos elemek és attribútumok eltávolításával szanálja azokat. Alternatívaként (v49+) a könyvtár biztonságos módban is betölthető egy parancsikon segítségével, amely ugyanazokat a betöltési beállításokat fogadja el, de mindig az “aktuális” verziót tölti be:
google.charts.safeLoad({ packages: });
Locales
A locales arra szolgál, hogy a szöveget egy országhoz vagy nyelvhez igazítsa, és befolyásolja az olyan értékek formázását, mint a valuták, dátumok és számok.
A Google Charts alapértelmezés szerint az “en” locale-val töltődik be. Ezt az alapértelmezést felülbírálhatja, ha a betöltési beállításokban kifejezetten megadja a nyelvterületet.
Egy adott nyelvterületre formázott diagram betöltéséhez használja a language beállítást a következőképpen:
// Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});
Kövesse ezt a linket egy élő példa megtekintéséhez.
Callback
Mielőtt a google.charts.load által betöltött csomagok bármelyikét használhatná, meg kell várnia a betöltés befejezését. Nem elég megvárni, hogy a dokumentum betöltése befejeződjön. Mivel eltarthat egy ideig, amíg ez a betöltés befejeződik, regisztrálnunk kell egy visszahívási függvényt. Ezt háromféleképpen lehet megtenni. Vagy megadunk egy callback beállítást a google.charts.load hívásban, vagy meghívjuk a setOnLoadCallback-et egy függvényt átadva argumentumként, vagy használjuk a google.charts.load hívása által visszaadott Promise-t.
Megjegyezzük, hogy mindezen módok esetében a függvény meghívása helyett egy függvénydefiníciót kell megadnunk. A megadott függvénydefiníció lehet egy megnevezett függvény (tehát csak a nevét kell megadni) vagy egy névtelen függvény. Amikor a csomagok betöltése befejeződött, ez a visszahívási függvény argumentumok nélkül meghívásra kerül. A betöltő a visszahívás meghívása előtt megvárja a dokumentum betöltésének befejezését is.
Ha egynél több diagramot akar rajzolni, akkor vagy több callback függvényt regisztrálhat a setOnLoadCallback segítségével, vagy egyesítheti őket egy függvénybe. Tudjon meg többet arról, hogyan rajzolhat több diagramot egy oldalon.
google.charts.setOnLoadCallback(drawChart1); google.charts.setOnLoadCallback(drawChart2); // OR google.charts.setOnLoadCallback( function() { // Anonymous function that calls drawChart1 and drawChart2 drawChart1(); drawChart2(); });
Visszahívás Promise-on keresztül
A visszahívás regisztrálásának másik módja a google.charts.load hívásból visszakapott Promise használata. Ezt úgy érhetjük el, hogy a then() metódushoz hozzáadunk egy hívást, amelynek kódja a következőképpen néz ki.
google.charts.load('upcoming', {packages: }).then(drawChart);
A Promise használatának egyik előnye, hogy így könnyedén több diagramot rajzolhat, egyszerűen több .then(anotherFunction) hívás láncolatával. A Promise használata a visszahívást az adott visszahíváshoz szükséges konkrét csomagokhoz is köti, ami fontos, ha több csomagot szeretnénk betölteni egy másik google.charts.load() hívással.
Könyvtárbetöltő kód frissítése
A Google Charts korábbi verziói más kódot használtak a könyvtárak betöltésére. Az alábbi táblázat a régi és az új könyvtárbetöltő kódot mutatja.
<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>
A meglévő diagramok frissítéséhez a régi könyvtárbetöltő kódot az új kóddal helyettesítheti.Tartsa azonban szem előtt a könyvtárak betöltésére vonatkozó, fent leírt korlátozásokat.
Leave a Reply