Încărcarea bibliotecilor
Această pagină arată cum se încarcă bibliotecile Google Chart.
Încărcarea de bază a bibliotecilor
Cu câteva excepții, toate paginile web cu Google Charts ar trebui să includă următoarele linii în <head> paginii web:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
Prima linie din acest exemplu încarcă încărcătorul propriu-zis. Nu puteți încărca încărcătorul decât o singură dată, indiferent de numărul de diagrame pe care intenționați să le desenați. După ce încărcați încărcătorul, puteți apela funcția google.charts.load de una sau mai multe ori pentru a încărca pachete pentru anumite tipuri de diagrame.
Primul argument al funcției google.charts.load este numele sau numărul versiunii, sub forma unui șir de caractere. Dacă specificați 'current', aceasta determină încărcarea celei mai recente versiuni oficiale a Google Charts. Dacă doriți să încercați candidatul pentru următoarea versiune, utilizați în schimb 'upcoming'. În general, va exista foarte puțină diferență între cele două, și vor fi complet identice, cu excepția cazului în care o nouă versiune este în curs de lansare. Un motiv obișnuit pentru a utiliza upcoming este acela că doriți să testați un nou tip de grafic sau o nouă caracteristică pe care Google urmează să o lanseze în următoarea lună sau două. (Anunțăm lansările viitoare pe forumul nostru și vă recomandăm să le încercați atunci când sunt anunțate, pentru a fi siguri că orice modificare a graficelor dvs. este acceptabilă.)
Exemplul de mai sus presupune că doriți să afișați un corechart(bară, coloană, linie, zonă, zonă în trepte, bulă, plăcintă, gogoașă, combinație, sfeșnic, histogramă, dispersie). Dacă doriți un tip de grafic diferit sau suplimentar, înlocuiți sau adăugați numele pachetului corespunzător pentru corechart de mai sus (de exemplu, {packages: }. Puteți găsi numele pachetului în secțiunea „Loading” (Încărcare) din pagina de documentație pentru fiecare grafic.
Acest exemplu presupune, de asemenea, că aveți o funcție JavaScript cu numele drawChart definită undeva în pagina dumneavoastră web. Puteți numi această funcție cum doriți, dar asigurați-vă că este unică la nivel global și că este definită înainte de a face referire la ea în apelul cătregoogle.charts.setOnLoadCallback.
Nota: Versiunile anterioare ale Google Charts au folosit un cod care diferă de cel de mai sus pentru a încărca bibliotecile. Pentru a vă actualiza diagramele existente pentru a utiliza noul cod, consultați Actualizarea codului de încărcare a bibliotecilor.
Iată un exemplu complet de desenare a unei diagrame circulare folosind tehnica de încărcare de bază:
<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>
Detalii de încărcare
Mai întâi trebuie să încărcați încărcătorul propriu-zis, ceea ce se face într-o etichetă script separată cu src="https://www.gstatic.com/charts/loader.js". Această etichetă poate fi fie în head sau body din document, fie poate fi inserată dinamic în document în timp ce acesta este încărcat sau după ce încărcarea este finalizată.
<script src="https://www.gstatic.com/charts/loader.js"></script>
După ce încărcătorul este încărcat, sunteți liber să apelați google.charts.load. Locul în care îl apelați poate fi într-o etichetă script din head sau body a documentului și îl puteți apela fie în timp ce documentul este încă în curs de încărcare, fie în orice moment după ce acesta a terminat de încărcat.
Începând cu versiunea 45, puteți apela google.charts.load de mai multe ori pentru a încărca pachete suplimentare, deși este mai sigur dacă puteți evita să faceți acest lucru. Trebuie să furnizați de fiecare dată același număr de versiune și aceleași setări de limbă.
Puteți utiliza acum vechiul parametru URL JSAPI autoload, dar valoarea acestui parametru trebuie să utilizeze formatarea JSON strictă și codificarea URL. În JavaScript, puteți realiza codificarea jsonObject cu acest cod: encodeURIComponent(JSON.stringify(jsonObject)).
Limitări
Dacă utilizați versiuni anterioare v45, există câteva limitări minore, dar importante în ceea ce privește modul de încărcare a Google Charts:
- Puteți apela
google.charts.loaddoar o singură dată. Dar puteți lista toate pachetele de care veți avea nevoie într-un singur apel, deci nu este nevoie să faceți apeluri separate. - Dacă utilizați un ChartWrapper, trebuie să încărcați în mod explicit toate pachetele de care veți avea nevoie, în loc să vă bazați pe ChartWrapper pentru a le încărca automat pentru dumneavoastră.
- Pentru Geochart și Map Chart, trebuie să încărcați atât vechiul încărcător de bibliotecă, cât și noul încărcător de bibliotecă. Din nou, acest lucru este valabil numai pentru versiunile anterioare v45, și nu ar trebui să faceți acest lucru pentru versiunile ulterioare.
<script src="https://www.gstatic.com/charts/loader.js"></script><script src="https://www.google.com/jsapi"></script>
Load Version Name or Number
Primul argument al apelului google.charts.load este numele sau numărul versiunii. Există doar două nume de versiuni speciale în acest moment și mai multe versiuni înghețate.
current Aceasta este pentru cea mai recentă versiune oficială, care se schimbă de fiecare dată când lansăm o nouă versiune. În mod ideal, această versiune este bine testată și fără erori, dar este posibil să doriți să specificați în schimb o anumită versiune înghețată, odată ce sunteți convins că funcționează. upcoming Aceasta este pentru următoarea versiune, în timp ce este încă testată și înainte de a deveni versiunea curentă oficială. Vă rugăm să testați această versiune în mod regulat, astfel încât să știți cât mai curând posibil dacă există probleme care trebuie rezolvate înainte ca această versiune să devină versiunea oficială.
Când lansăm noi versiuni ale Google Charts, unele dintre schimbări sunt mari, cum ar fi tipuri de diagrame complet noi. Alte modificări sunt mici,cum ar fi îmbunătățiri ale aspectului sau comportamentului graficelor existente.
Mulți creatori de diagrame Google Chart ajustează fin aspectul și senzația graficelor lor până când este exact ceea ce își doresc. Unii creatori s-ar putea simți mai confortabil știind că graficele lor nu se vor schimba niciodată,indiferent de îmbunătățirile pe care le vom face în viitor. Pentru acei utilizatori, susținem Google Charts înghețate.
Versiunile înghețate ale graficelor sunt identificate prin număr și sunt descrise în comunicatele noastre oficiale.Pentru a încărca o versiune înghețată, înlocuiți current sau upcoming în apelul dvs. de google.charts.load cu numărul versiunii înghețate:
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('43', {packages: }); google.charts.setOnLoadCallback(drawChart); ...</script>
Ne așteptăm ca versiunile înghețate să rămână disponibile pe termen nedefinit, deși este posibil să retragem versiunile înghețate care prezintă probleme de securitate. În mod normal, nu vom oferi asistență pentru versiunile înghețate, cu excepția faptului că vă vom sugera cu amabilitate să treceți la o versiune mai nouă.
Load Settings
Cel de-al doilea parametru din apelul dvs. către google.charts.load este un obiect pentru specificarea setărilor. Următoarele proprietăți sunt acceptate pentru setări.
pachete O matrice de zero sau mai multe pachete. Fiecare pachet care este încărcat va avea codul necesar pentru a susține un set de funcționalități, de obicei un tip de grafic. Pachetul sau pachetele pe care trebuie să le încărcați sunt enumerate în documentația pentru fiecare tip de grafic. Puteți evita specificarea oricărui pachet dacă utilizați un ChartWrapper pentru a încărca automat ceea ce va fi necesar. language Codul limbii sau al limbii locale care ar trebui să fie pentru a personaliza textul care ar putea face parte din grafic. Consultați Locales pentru mai multe detalii. callback O funcție care va fi apelată după ce pachetele au fost încărcate. Alternativ, puteți specifica această funcție prin apelarea
google.charts.setOnLoadCallback, așa cum este demonstrat în exemplul de mai sus. Consultați Callback pentru mai multe detalii.
google.charts.load('current', { packages: , callback: drawChart });
mapsApiKey (v45) Această setare vă permite să specificați o cheie pe care o puteți utiliza cu Geochart și Map Chart. Este posibil să doriți să faceți acest lucru mai degrabă decât să utilizați comportamentul implicit, care poate duce la o limitare ocazională a serviciului pentru utilizatorii dvs. Aflați cum să vă configurați propria cheie pentru a utiliza serviciul „Google Maps JavaScript API” aici: Obțineți o cheie/Autentificare. Codul dvs. va arăta cam așa:
var myMapsApiKey = 'SomeMagicToSetThis'; google.charts.load('45', { packages: , mapsApiKey: myMapsApiKey });
safeMode (v47) Când este setat la true, toate graficele și tooltipurile care generează HTML din datele furnizate de utilizator le vor curăța prin eliminarea elementelor și atributelor nesigure. Alternativ (v49+), biblioteca poate fi încărcată în modul sigur folosind o comandă rapidă care acceptă aceleași setări de încărcare, dar care încarcă întotdeauna versiunea „curentă”:
google.charts.safeLoad({ packages: });
Locales
Locales sunt folosite pentru a personaliza textul pentru o țară sau o limbă, afectând formatarea valorilor cum ar fi valutele, datele și numerele.
În mod implicit, Google Charts este încărcat cu localele „en”. Puteți suprascrie această valoare implicită prin specificarea explicită a unei localități în setările de încărcare.
Pentru a încărca un grafic formatat pentru o anumită localitate, utilizați setarea language astfel:
// Load Google Charts for the Japanese locale. google.charts.load('current', {'packages':, 'language': 'ja'});
Să urmați acest link pentru un exemplu real.
Callback
Înainte de a putea utiliza oricare dintre pachetele încărcate de google.charts.load trebuie să așteptați ca încărcarea să se termine. Nu este suficient să așteptați doar ca documentul să se termine de încărcat. Deoarece poate dura ceva timp până la terminarea acestei încărcări, trebuie să înregistrați o funcție callback. Există trei moduri în care se poate face acest lucru. Fie specificați o setare callback în apelul google.charts.load, fie apelați setOnLoadCallback trecând o funcție ca argument, fie utilizați Promise-ul care este returnat de apelul lui google.charts.load.
Rețineți că, pentru toate aceste modalități, trebuie să furnizați o definiție a funcției, mai degrabă decât să apelați funcția. Definiția funcției pe care o furnizați poate fi fie o funcție cu nume (deci trebuie doar să îi dați numele), fie o funcție anonimă. Când pachetele au terminat de încărcat, această funcție de rechemare va fi apelată fără argumente. De asemenea, încărcătorul va aștepta ca documentul să se termine de încărcat înainte de a apela funcția de rechemare.
Dacă doriți să desenați mai mult de o diagramă, puteți fie să înregistrați mai multe funcții callback folosind setOnLoadCallback, fie să le combinați într-o singură funcție. Aflați mai multe despre cum să desenați mai multe grafice pe o singură pagină.
google.charts.setOnLoadCallback(drawChart1); google.charts.setOnLoadCallback(drawChart2); // OR google.charts.setOnLoadCallback( function() { // Anonymous function that calls drawChart1 and drawChart2 drawChart1(); drawChart2(); });
Callback prin Promise
O altă modalitate de a vă înregistra callback-ul este de a utiliza Promise-ul care este returnat de la apelul google.charts.load. Acest lucru se face prin adăugarea unui apel la metoda then() cu un cod care să arate după cum urmează.
google.charts.load('upcoming', {packages: }).then(drawChart);
Un avantaj al utilizării Promise este că astfel puteți desena cu ușurință mai multe diagrame doar prin înlănțuirea mai multor apeluri .then(anotherFunction). Utilizarea Promise leagă, de asemenea, callback-ul de pachetele specifice necesare pentru acel callback, ceea ce este important dacă doriți să încărcați mai multe pachete cu un alt apel de google.charts.load().
Update Library Loader Code
Versiunile anterioare ale Google Charts foloseau un cod diferit pentru a încărca bibliotecile. Tabelul de mai jos prezintă vechiul cod de încărcare a bibliotecilor față de cel nou.
<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>
Pentru a actualiza hărțile existente, puteți înlocui vechiul cod de încărcare a bibliotecilor cu noul cod.Totuși, țineți cont de limitările privind încărcarea bibliotecilor descrise mai sus.
Leave a Reply