Share
Google Chart Tools oferă mai multe moduri de a adăuga cu ușurință diagrame la orice pagină web. Graficele pot fi statice sau interactive, iar în acest tutorial vom învăța cum să le folosim pe amândouă.
Există două tipuri diferite de grafice pe care Instrumentele grafice le pot genera: diagrame de imagini (grafice statice) și grafice interactive.
Graficele cu imagini sunt destul de ușor de utilizat, însă diagramele interactive sunt mult mai flexibile, deoarece pot declanșa evenimente pe care le putem folosi pentru a interacționa cu alte elemente din pagină.
Da, există o modalitate foarte ușoară de a include o diagramă în pagina dvs. - la fel de ușor ca și scrierea unei adrese URL ca aceasta:
images_27_3 / Easy-grafice-cu-google-chart-tools.jpg
dacă copiați și inserați această adresă URL în browserul dvs., veți vedea următoarele:
Puteți plasa imaginea oriunde în pagină utilizând URL-ul ca fiind src atributul unei etichete imagine:
Acesta este API-ul Google Charts. Cererile sunt trimise ca adrese URL GET sau POST, iar serverul de diagrame Google returnează o imagine PNG ca răspuns. Tipul de diagrame, date și opțiuni sunt specificate în interogarea URL-ului. API-ul definește cum se face acest lucru. Să examinăm diferitele opțiuni.
http://chart.apis.google.com/chart?
Acesta este URL-ul de bază; o vom folosi pentru toate cererile de imagini. Restul sunt parametrii în formularul nume = valoare separată de &.
Există doar trei parametri obligatorii: cht, chs și chd. Restul sunt opționale.
CHT = p3
Acesta este tipul de diagramă. Folosim o diagramă cu plăci 3D care este p3. Puteți vizita galeria de diagrame pentru toate tipurile de diagrame disponibile.
CHS = 450x200
Aceasta este dimensiunea graficului în pixeli (lățime x înălțime).
CHD = t: 2,4,3,1
Acestea sunt datele de afișat în diagramă. Prima literă (T) indică formatul datelor. În acest caz, folosim formatul textului de bază care este o listă de valori separate prin virgulă.
Fiecare tip de diagramă are câțiva parametri opționali pentru a configura anumite aspecte ale graficului: titlu, etichete, tipuri de fonturi, culori, gradienți etc. Acest lucru am inclus:
CHL = Telefoane | Calculatoare | Servicii | Alte
Etichete grafice pentru fiecare felie de plăcintă.
chtt = Companie% 20Sales
Titlul tabelului.
CHCO = ff0000
Culoarea diagramei în format hexazecimal rrggbb.
Dacă specificați o singură culoare, feliile vor avea gradări diferite. De asemenea, puteți specifica un gradient cu două culori (chco = ff0000,00ff00) sau o culoare pentru fiecare felie (chco = ff0000 | 3355aa | 8322c2 | 112233).
Aceasta este pentru diagramele de imagini. Nu este prea mult! Există o mulțime de tipuri diferite de diagrame disponibile și, dacă joci cu parametrii, poți obține niște rezultate foarte bune. Tabloul de joc Google Live Chart este un instrument excelent pentru a face acest lucru. Te joci cu parametrii și vezi schimbările din imaginea generată - o modalitate ușoară de a ajusta url-ul pentru graficul tău!
Pentru a include diagrame interactive în paginile dvs. web, trebuie să utilizați un API diferit: Google API pentru vizualizare. În acest caz, interfața nu este o adresă URL. Va trebui să utilizați o bibliotecă JavaScript și să scrieți câteva linii de cod - dar nu este nimic dificil.
Există o galerie de vizualizări gata făcute (grafice) pe care le puteți utiliza. De asemenea, puteți crea și distribui propriul grafic, dar vizualizările din galerie vor acoperi, probabil, majoritatea nevoilor dvs. de afișare a datelor.
Nivelul de interactivitate depinde de vizualizările particulare pe care le utilizați. De obicei, graficul va reacționa într-un anumit mod când se face clic (afișând un sfat sau animație), dar caracteristica cu adevărat puternică este că acestea pot declanșa evenimente și puteți înregistra callback-uri pentru a efectua orice acțiune legată de acel eveniment. Exemple de evenimente pot fi selectarea unei bare sau a unei plăci de felie, mouseover, mouseOut, etc.
Vom utiliza datele locale pentru a alimenta vizualizările în exemplele noastre, însă puteți obține datele dvs. în orice alt mod. O opțiune comună ar fi să preluați datele dintr-o bază de date utilizând AJAX. Puteți folosi chiar și Vizualizare API; definește de asemenea o modalitate de a solicita și de a oferi (pentru servere) date într-un format care poate fi utilizat imediat în orice vizualizare, dar nu vom acoperi aici.
Nu contează cum obținem datele noastre, dar toate vizualizările trebuie să le primească într-un obiect DataTable. Este în esență un tabel cu rânduri și coloane. Fiecare coloană este definită cu un anumit tip de date (și un ID și o etichetă care sunt opționale).
Pentru a face referire la o anumită celulă din tabel, utilizați perechea (rând, coloană). Rândul este întotdeauna un număr, începând cu zero. Coloana poate fi, de asemenea, un număr bazat pe zero sau un ID opțional.
Dacă vrem să afișăm câștigurile companiei în 2009 într-o diagramă a coloanelor, trebuie să pregătim datele în felul următor:
| Trimestrele 2009 | câștig |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| T4 | 123 |
Două coloane: prima (cu tipul 'şir') este eticheta pentru fiecare bara din grafic, iar a doua (cu tipul 'număr') este valoarea pentru bara respectivă. Avem patru rânduri care înseamnă că au patru bare de afișat.
Cum punem asta într-un obiect DataTable? Acesta este codul care face acest lucru - fiecare rând este explicat mai târziu:
Accentsconagua
// a crea tabelul de date object var dataTable = new google.visualization.DataTable (); // defini coloanele dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('număr', 'Câștiguri'); // definește rândurile de dateTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]); Mai întâi vom crea obiectul DataTable cu:
var dataTable = nou google.visualization.DataTable ();
Apoi definim cele două coloane din tabelul nostru folosind metoda addColumn (). Prima valoare este tipul și a doua valoare este eticheta opțională.
dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('număr', 'Câștiguri'); În final, definim rândurile de date utilizând metoda addRows ().
dateTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]);
Fiecare rând este o matrice și toate datele sunt, de asemenea, închise într-o altă matrice.
Rândurile pot fi, de asemenea, definite într-un singur rând:
dataTable.addRow ([ 'Q1', 308]);
sau chiar o singură celulă la un moment dat:
date.setValue (0, 0, 'Q1');
Aici, primele două numere sunt rândul și, respectiv, coloana.
Aceasta este modalitatea de a crea obiecte DataTable. Fiecare vizualizare trebuie să fie încărcată cu date în acest format. Asta nu înseamnă că masa este aceeași pentru fiecare vizualizare. Numărul și tipul particular al coloanelor și rândurilor trebuie să fie verificate în documentația pentru fiecare diagramă.
Pentru acest prim exemplu, vom folosi o diagramă a coloanei pentru a prezenta datele noastre. În Galeria de vizualizare Google, putem face clic pe orice tip de diagramă pentru a vedea documentația și exemplele.
Pentru a utiliza orice vizualizare, trebuie să încărcați API Google AJAX înainte; oferă funcționalitatea de bază necesară în multe alte aplicații Google API.
Acum putem încărca API-ul de vizualizare utilizând funcția google.load () (din AJAX API):
google.load ("vizualizare", "1", 'pachete': ['columnchart']); Al doilea parametru, "1", se referă la versiunea API care se încarcă ("1" înseamnă versiunea curentă). "pachetele" reprezintă o matrice cu toate vizualizările pe care le vom folosi. În acest caz, vom folosi doar una: graficul de coloane.
În acest moment, avem bibliotecile necesare pentru a crea obiectul DataTable și a afișa graficul nostru, cu toate acestea, trebuie să fim siguri că vizualizarea este complet încărcată, altfel vom primi erori de JavaScript și graficul nostru nu va fi afișat.
Modul de a face acest lucru este prin înregistrarea unui apel invers. Funcția va fi apelată când vizualizarea (API și pachet) este încărcată.
// setarea apelului google.setOnLoadCallback (createChart);
Funcția createChart este locul unde ne creăm tabelul de date și graficul nostru. Codul final, complet, este:
Google Charts Tutorial
Obiectul diagramei este creat cu această linie:
var diagramă = nou google.visualization.ColumnChart (document.getElementById ("diagramă")); Argumentul este referința DOM la elementul care conține vizualizarea. În acest caz, avem a
.Apoi, definim opțiunile dorite și desenați graficul:
var opțiuni = lățime: 400, înălțime: 240, is3D: true, titlu: "Câștigurile companiei"; chart.draw (dateTable, opțiuni);
Graficul nostru arată astfel:
Notă: toate imaginile sunt statice pentru a face tutorialul disponibil indiferent de browserul dvs. sau de setările JavaScript. Examinați demo-ul live pentru versiunea interactivă.
Avantajul de a avea un format de date clar definit este că, odată ce știi cum să creezi și să populezi un obiect DataTable, știi cum să hrănești orice vizualizare. Trebuie doar să verificați documentația pentru a vedea tabelul special (numărul și tipul de coloane) pe care trebuie să-l construiți.
Pentru o diagramă de plăci, putem folosi exact aceeași masă pe care o avem acum. Să adăugăm o diagramă în aceeași pagină.
Trebuie să adăugăm noul nostru pachet pe linia google.load ():
google.load ('vizualizare', '1', 'pachete': ['columnchart', 'piechart']); și să extindem funcția createChart cu aceste două linii:
var secondChart = noul google.visualization.PieChart (document.getElementById ('secondChart')); secondChart.draw (dateTable, opțiuni); Codul complet este:
Google Charts Tutorial
Diagramele generate:
Notă: verificați demonstrația live pentru versiunea interactivă.
Acest lucru a fost ușor în acest caz, deoarece ambele vizualizări au folosit aceleași coloane și rânduri de tabel. Dar există vizualizări care necesită mai multe coloane sau coloane de diferite tipuri și nu puteți utiliza tabelul de date direct. Cu toate acestea, puteți rezolva acest lucru generând o vedere diferită a tabelului original pentru a alimenta o vizualizare. Vom analiza acest lucru în scurt timp.
Tabelul de date pentru o diagramă de coloane nu trebuie să fie la fel de simplu ca în exemplul anterior. Putem avea baruri reprezentând câștigurile pentru fiecare trimestru, de exemplu, în ultimii trei ani. În acest caz, datele
tabel ar arata asa:
| Quarters | Câștigurile 2009 | Câștigurile 2008 | Câștigurile 2007 |
|---|---|---|---|
| Q1 | 308 | 417 | 500 |
| Q2 | 257 | 300 | 420 |
| Q3 | 375 | 350 | 235 |
| T4 | 123 | 100 | 387 |
Singurul cod pe care trebuie să îl schimbăm de la primul nostru exemplu este obiectul DataTable, pentru a adăuga încă două coloane și mai multe date în fiecare rând:
// a crea tabelul de date object var dataTable = new google.visualization.DataTable (); // defini coloanele dataTable.addColumn ('string', 'Quarters'); dataTable.addColumn ("numărul", "câștigurile 2009"); dataTable.addColumn ("numărul", "câștigurile 2008"); dataTable.addColumn ("număr", "Câștiguri 2007"); // definește rândurile de dateTable.addRows (['Q1', 308,417,500], ['Q2', 257,300,420], ['Q3', 375,350,235], ['Q4', 123,100,387]]; Restul codului nu se schimbă. Diagrama generată este:
Dar, dacă acum vrem să folosim o diagrama pentru a reprezenta o parte din aceste date? Nu putem folosi aceeasi tabel de date ca inainte, pentru ca graficele de tip pieptene necesita o tabela cu doua coloane (eticheta si valoarea de felie). Există o modalitate ușoară de a obține o tabelă diferită de un obiect DataTable existent și de ao utiliza pentru a alimenta o diagramă: Vizualizări de date.
Vizionările reprezintă o modalitate de a ne adapta tabelul pentru o vizualizare diferită. Dacă acum vrem să afișeze, în aceeași pagină, un tabel cu diagrama care arată distribuția trimestrială a câștigurilor pentru anul trecut, tabelul de care avem nevoie este doar acesta:
| Quarters | Câștigurile 2009 |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| T4 | 123 |
O vizualizare de date (obiectul DataView) vă permite să utilizați doar un subset al datelor originale. Puteți reordona sau duplica coloane și rânduri sau introduceți coloane cu valori calculate.
Mai întâi, creați obiectul View:
var view = nou google.visualization.DataView (dataTable);
O vizualizare de date este inițializată cu tabela originală și apoi vom folosi metodele DataView pentru a ascunde, afișa sau filtra coloane sau rânduri (setColumns (), hideColumns (), setRows (), hideRows (), getFilteredRows, getColumnRange, etc).
Putem filtra tabelul original pentru a obține numai primele două coloane (coloanele 0 și 1) folosind setColumns ():
view.setColumns ([0, 1]);
Acum, putem desena diagrama plăcii utilizând această vizualizare ca tabel de date:
secondChart.draw (vizualizare, opțiuni);
Amintiți-vă că trebuie să includeți pachetul piechart cu google.load () și trebuie să creați obiectul pieChart cu:
var secondChart = nou google.visualization.PieChart
Acum putem vedea ambele diagrame generate folosind același tabel de date:
Evenimentele oferă o modalitate ușoară de a conecta vizualizările dvs. cu alte elemente din pagină. Vizualizările pot declanșa anumite evenimente și puteți înregistra un ascultător pentru a reacționa la acel eveniment și pentru a efectua anumite acțiuni. Modelul de eveniment este similar cu modelul evenimentului browserului. Încă o dată, trebuie să examinăm documentația pentru a verifica evenimentele declanșate pentru fiecare vizualizare.
Pentru a arăta cum funcționează evenimentele, să ne întoarcem la primul exemplu, cea mai simplă diagramă a coloanelor:
Acest grafic declanșează evenimentele pe mouseover, pe mouseout și pe selectați. Asta înseamnă că o putem face mult mai interactiv decât este implicit.
Din moment ce acest grafic arată câștigurile pentru o companie, ar putea fi interesant să afișați un mesaj cu o scurtă explicație a celor mai importante realizări sau vânzări pentru fiecare trimestru atunci când utilizatorul plasează pointerul peste o coloană (onMouseOver eveniment).
Apelul nostru va fi arata detaliile(), și îl înregistrăm pentru onMouseOver eveniment:
google.visualization.events.addListener (diagramă, "onmouseover", showDetails);
Primul parametru este variabila care contine obiectul diagramei.
De asemenea, va trebui să ascundem mesajul când indicatorul iese din coloană, așa că avem nevoie de o altă funcție care să fie apelată când onMouseOut declanșatoare de evenimente:
google.visualization.events.addListener (diagramă, "onmouseout", hideDetails);
În cadrul
sau pagina noastră HTML trebuie să definim patru divuri cu mesajele:Acestea sunt detaliile pentru Q1 ...Aici aveți numerele pentru Q2 ...Explicații pentru al treilea trimestru ...Q4 a fost așa cum era de așteptat ...
Apoi, funcțiile de apel invers arată sau ascund mesajul corespunzător:
funcția showDetails (e) comutare (e ['rând']) caz 0: document.getElementById ('detalii0') style.visibility = 'vizibil'; pauză; cazul 1: document.getElementById ('details1'). style.visibility = 'vizibil'; pauză; cazul 2: document.getElementById ('details2'). style.visibility = 'visible'; pauză; cazul 3: document.getElementById ('details3'). style.visibility = 'visible'; pauză; funcția ascundeDetails (e) comutare (e ['rând']) caz 0: document.getElementById ('details0') style.visibility = 'ascuns'; pauză; cazul 1: document.getElementById ('details1'). style.visibility = 'ascuns'; pauză; cazul 2: document.getElementById ('details2'). style.visibility = 'ascuns'; pauză; cazul 3: document.getElementById ('details3'). style.visibility = 'ascuns'; pauză; Funcțiile noastre acceptă un singur parametru: evenimentul declanșat. Acest obiect are toate informațiile disponibile despre detaliile evenimentului.
Pentru a cunoaște ce bară am terminat, verificăm proprietatea "rând" a obiectului eveniment. Această informație se referă la rândurile și coloanele obiectului DataTable, dar știm că rândul 0 corespunde cu primul rând din Q1 și așa mai departe.
Notă: Nu toate evenimentele trec obiectul evenimentului. Uneori trebuie să utilizați metode pentru a obține informațiile de care aveți nevoie, citiți documentația de vizualizare pentru a afla cum să obțineți informațiile referitoare la evenimentul declanșat.
Următoarea înregistrare include codul complet pentru acest exemplu. Am inclus un scurt fragment intern de CSS pentru a ascunde divs-ul mesajului și pentru a oferi un format minimal.
Tutorial pentru Instrumentele Google Acestea sunt detaliile pentru Q1 ...Aici aveți numerele pentru Q2 ...Explicații pentru al treilea trimestru ...Q4 a fost așa cum era de așteptat ...
Și acesta este rezultatul:
Încă o dată, verificați demonstrația live pentru a vedea interactivitatea.
Ca și în cazul imaginilor statice, există un loc de joacă pentru coduri Google unde puteți să jucați cu vizualizările și parametrii dvs. și să vizualizați rezultatele:
Sperăm că acest lucru ar trebui să fie suficient pentru a începe să începeți cu Google Chart Tools. Odată ce obțineți atârnă de ea, veți găsi că un nivel imens de flexibilitate este disponibil pentru tine în aplicațiile dvs. web. Vă mulțumim pentru lectură!
