Share
Google Chart Tools gir flere måter å enkelt legge til diagrammer på en hvilken som helst nettside. Diagrammer kan være statiske eller interaktive, og i denne opplæringen lærer vi hvordan de skal brukes begge.
Det finnes to forskjellige typer grafer som Chart Tools kan generere: bilde diagrammer (statiske grafer) og interaktive diagrammer.
Bildediagrammer er ganske enkle å bruke, men interaktive diagrammer er langt mer fleksible, fordi de kan utløse hendelser som vi kan bruke til å samhandle med andre elementer på siden.
Ja, det er en super enkel måte å inkludere et diagram på siden din - så enkelt som å skrive en nettadresse slik:
images_27_3 / lett-grafer-med-google-chart-tools.jpg
Hvis du kopierer og limer inn denne nettadressen i nettleseren din, ser du følgende:
Du kan plassere bildet hvor som helst på siden din ved hjelp av nettadressen som src Attributt for en bildetikett:
Det er Google Charts API. Forespørsel sendes som GET- eller postadresser, og Google-diagramserveren returnerer et PNG-bilde som svar. Typen av diagram, data og alternativer er alle angitt i forespørselsstrengen til nettadressen. API definerer hvordan du gjør det. La oss se gjennom de ulike alternativene.
http://chart.apis.google.com/chart?
Dette er basen URL; Vi bruker den til alle bilde diagramforespørsler. Resten er parametere i formnavn = verdi separert av &.
Det er bare tre obligatoriske parametere: cht, chs og chd. Resten er valgfri.
CHT = p3
Dette er diagramtypen. Vi bruker et 3D-kaken diagram som er p3. Du kan besøke diagramgalleriet for alle tilgjengelige diagramtyper.
CHS = 450x200
Dette er diagrammets størrelse i piksler (bredde x høyde).
CHD = t: 2,4,3,1
Dette er dataene som skal vises i diagrammet. Første bokstav (t) angir dataformatet. I dette tilfellet bruker vi grunnleggende tekstformat som er en liste over kommaseparerte verdier.
Hver diagramtype har noen valgfrie parametere for å konfigurere noen aspekter av grafen din: tittel, etiketter, skrifttyper, farger, gradienter, etc. Dette er hva vi har tatt med:
CHL = Phones | Computers | Tjenester | Andre
Diagrammer for hver pauseskive.
chtt = Selskapet% 20Sales
Titteltittel.
CHCO = ff0000
Diagramfarge i rrggbb hexadecimalt format.
Hvis du angir en enkelt farge, vil skivene ha forskjellige graderinger. Du kan også angi en gradient med to farger (chco = ff0000,00ff00) eller en farge for hvert stykke (chco = ff0000 | 3355aa | 8322c2 | 112233).
Dette er det for bildediagrammer. Det er ikke mye til det! Det finnes mange forskjellige karttyper tilgjengelige, og hvis du spiller med parametrene, kan du få noen veldig fine resultater. Google Live Chart Playground er et utmerket verktøy for å gjøre dette. Du spiller med parametere og ser endringene i det genererte bildet - en enkel måte å finjustere url for grafen din!
For å inkludere interaktive diagrammer på websidene dine må du bruke en annen API: Google Visualiserings-API. I dette tilfellet er grensesnittet ikke en nettadresse. Du må bruke et JavaScript-bibliotek, og skrive noen linjer med kode - men ikke noe vanskelig.
Det er et galleri med ferdige visualiseringer (grafer) som du kan bruke. Du kan også lage og dele din egen graf, men visualiseringene i galleriet vil trolig dekke de fleste av dine behov for visning av data.
Nivået på interaktivitet avhenger av de spesielle visualiseringene du bruker. Vanligvis vil grafen reagere på en bestemt måte når du klikker (viser et verktøytips eller animerer), men den virkelig kraftige funksjonen er at de kan utløse hendelser, og du kan registrere tilbakeringinger for å utføre handlinger relatert til den hendelsen. Eksempler på hendelser kan være å velge en bar eller et kakestykke, mouseOver, mouseOut, osv.
Vi bruker lokale data for å mate visualiseringene i våre eksempler, men du kan hente dataene dine på annen måte. Et vanlig alternativ ville være å hente dataene fra en database ved hjelp av AJAX. Du kan til og med bruke Visualiserings-API; Det definerer også en måte å be om og tilby (for servere) data i et format som umiddelbart kan brukes i enhver visualisering, men vi vil ikke dekke det her.
Det spiller ingen rolle hvordan vi får dataene våre, men alle visualiseringer må motta det i et DataTable-objekt. Det er i utgangspunktet et bord med rader og kolonner. Hver kolonne er definert med en bestemt datatype (og en ID og en etikett som er valgfri).
For å referere til en bestemt celle i bordet bruker du paret (rad kolonne). Row er alltid et tall, og starter null. Kolonne kan også være et nullbasert nummer eller en valgfri ID.
Hvis vi ønsker å vise inntektene til vårt selskap i 2009 i et kolonnediagram, må vi forberede dataene på følgende måte:
| Kvartaler 2009 | Inntjening |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
To kolonner: den første (med type 'Streng') er etiketten for hver linje i diagrammet, og den andre (med type 'Nummer') er verdien for den linjen. Vi har fire rader som betyr at vi har fire barer å vise.
Hvordan setter vi det i et DataTable-objekt? Dette er koden for å gjøre det - hver linje forklares senere:
Accentsconagua
// lage data tabellen objekt var dataTable = new google.visualization.DataTable (); // definere kolonner dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('number', 'Earnings'); // definere rader med data dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]); Først oppretter vi vårt DataTable-objekt med:
var dataTable = ny google.visualization.DataTable ();
Deretter definerer vi de to kolonnene i vårt bord ved hjelp av metoden addColumn (). Den første verdien er typen og den andre verdien er valgfri etikett.
dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('number', 'Earnings'); Og til slutt definerer vi datarollene ved hjelp av addRows () -metoden.
dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]);
Hver rad er en matrise, og alle data er også vedlagt i en annen matrise.
Rader kan også defineres en rad om gangen:
dataTable.addRow ([ 'Q1', 308]);
eller til og med en celle om gangen:
data.setValue (0, 0, 'Q1');
Her er de to første tallene henholdsvis rad og kolonne.
Dette er måten å opprette DataTable-objekter på. Hver visualisering må lastes med data i dette formatet. Det betyr ikke at bordet er det samme for hver visualisering. Det bestemte nummeret og typen av kolonner og rader må kontrolleres i dokumentasjonen for hvert diagram.
For dette første eksempelet bruker vi et kolonnediagram for å presentere våre data. I Google Visualiseringsgalleriet kan vi klikke på en hvilken som helst diagramtype for å se dokumentasjon og eksempler.
For å bruke noen visualisering må vi laste inn Google AJAX API før; Det gir kjernefunksjonaliteten som trengs i mange andre Google APIer.
Nå kan vi laste inn Visualiserings-API ved hjelp av google.load () -funksjonen (fra AJAX API):
google.load ('visualization', '1', 'packages': ['columnchart']); Den andre parameteren, '1', refererer til versjonen av API for å laste ('1' betyr den nåværende versjonen). 'pakker' er en serie med alle visualiseringene vi skal bruke. I dette tilfellet bruker vi bare ett: kolonnediagrammet.
På dette tidspunktet har vi de nødvendige bibliotekene for å lage vårt DataTable-objekt og vise grafen vår, men vi må være sikre på at visualiseringen er fullstendig lastet, ellers får vi JavaScript-feil og grafen vår vil ikke vises.
Måten å gjøre dette på er å registrere en tilbakeringing. Funksjonen vil bli kalt når visualisering (API og pakke) er lastet.
// angi tilbakeringing google.setOnLoadCallback (createChart);
Funksjon createChart er der vi lager vår datatabell og vårt diagram. Den endelige, komplette koden er:
Google Maps-opplæringen
Kartobjektet er opprettet med denne linjen:
var diagram = ny google.visualization.ColumnChart (document.getElementById ('diagram')); Argumentet er DOM-referansen til elementet som inneholder visualiseringen. I dette tilfellet har vi en
.Deretter definerer vi alternativene vi vil ha og tegner diagrammet:
var options = bredde: 400, høyde: 240, is3D: sant, tittel: 'Selskapets inntjening'; chart.draw (dataTable, alternativer);
Vår graf ser slik ut:
Merk: Alle bildene her er statiske for å gjøre opplæringen tilgjengelig uavhengig av nettleseren eller JavaScript-innstillingene dine. Se gjennom live demo for den interaktive versjonen.
Fordelen med å ha et klart definert datformat er at når du vet hvordan du lager og fyller et DataTable-objekt, vet du hvordan du kan matte hvilken som helst visualisering. Du må bare sjekke dokumentasjonen for å se det aktuelle tabellen (antall og type kolonner) du må bygge.
For et kakediagram kan vi bruke nøyaktig samme tabell vi har nå. La oss legge til et kakediagram på samme side.
Vi må legge til vår nye pakke i google.load () -linjen:
google.load ('visualization', '1', 'packages': ['columnchart', 'piechart']); og utvide vår createChart-funksjon med disse to linjene:
var secondChart = ny google.visualization.PieChart (document.getElementById ('secondChart')); secondChart.draw (dataTable, alternativer); Den komplette koden er:
Google Maps-opplæringen
Og de genererte diagrammene:
Merk: sjekk live demo for den interaktive versjonen.
Dette var lett i dette tilfellet, fordi begge visualiseringene brukte de samme tabell kolonnene og radene. Men det er visualiseringer som trenger flere kolonner eller kolonner av forskjellige typer, og du kan ikke bruke datatabellen direkte. Du kan imidlertid løse dette ved å generere en annen visning av det opprinnelige tabellen for å gi en visualisering. Vi vurderer det snart.
Datatabellen for et kolonnediagram trenger ikke å være så enkelt som i forrige eksempel. Vi kan ha barer som representerer inntektene for hvert kvartal i de siste tre årene, for eksempel. I så fall dataene
bordet ville se slik ut:
| Quarters | Inntekter 2009 | Inntekter 2008 | Inntekter 2007 |
|---|---|---|---|
| Q1 | 308 | 417 | 500 |
| Q2 | 257 | 300 | 420 |
| Q3 | 375 | 350 | 235 |
| Q4 | 123 | 100 | 387 |
Den eneste koden vi må bytte fra vårt første eksempel er DataTable-objektet, for å legge til to flere kolonner og flere data i hver rad:
// lage data tabellen objekt var dataTable = new google.visualization.DataTable (); // definere kolonner dataTable.addColumn ('string', 'Quarters'); dataTable.addColumn ('number', 'Earnings 2009'); dataTable.addColumn ('number', 'Earnings 2008'); dataTable.addColumn ('number', 'Earnings 2007'); // definere rader med data dataTable.addRows ([['Q1', 308,417,500], ['Q2', 257,300,420], ['Q3', 375,350,235], ['Q4', 123,100,387]]); Resten av koden endres ikke. Det genererte diagrammet er:
Men hva om vi nå vil bruke et kakediagram for å representere en del av disse dataene? Vi kan ikke bruke samme datatabell som vi gjorde før, fordi kakediagrammer trenger en tabell med to kolonner (skiveetikett og verdi). Det er en enkel måte å skaffe et annet bord fra et eksisterende DataTable-objekt, og bruk det til å mate et diagram: datavisninger.
Visninger er en måte å tilpasse bordet på for en annen visualisering. Hvis vi nå vil vise, på samme side, et kakediagram som viser kvartalsinntektsfordelingen for fjoråret, er tabellen vi trenger bare dette:
| Quarters | Inntekter 2009 |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
En datavisning (DataView-objekt) lar deg bruke bare en delmengde av de opprinnelige dataene. Du kan omordne eller duplisere kolonner og rader eller introdusere kolonner med beregnede verdier.
Opprett først Vis-objektet:
var view = ny google.visualization.DataView (dataTable);
En datavisning initialiseres med den opprinnelige tabellen, og vi bruker DataView-metodene til å skjule, vise eller filtrere kolonner eller rader (sett kolonnene (), skjul kolonnene (), setRows (), hideRows (), getFilteredRows, getColumnRange, osv.).
Vi kan filtrere den opprinnelige tabellen for å bare få de to første kolonnene (kolonnene 0 og 1) ved hjelp av setColumns ():
view.setColumns ([0, 1]);
Nå kan vi tegne kakediagrammet ved hjelp av denne visningen som datatabell:
secondChart.draw (se, alternativer);
Husk at vi må inkludere piechart-pakken med google.load (), og vi må opprette pieChart-objektet med:
var secondChart = ny google.visualization.PieChart
Nå kan vi se begge diagrammer generert ved hjelp av samme datatabell:
Hendelser gir en enkel måte å koble dine visualiseringer til med andre elementer på siden din. Visualiseringer kan utløse noen hendelser, og du kan registrere en lytter til å reagere på den hendelsen og utføre en handling. Hendelsesmodellen ligner på nettleserhendelsesmodellen. Igjen må vi se på dokumentasjonen for å sjekke hendelsene som utløses for hver visualisering.
For å vise hvordan hendelser fungerer, la oss gå tilbake til vårt første eksempel, det enkleste kolonnediagrammet:
Denne grafen utløser hendelser på mouseover, på mouseout og på velg. Det betyr at vi kan gjøre det mye mer interaktiv enn det som standard.
Siden denne grafikken viser inntekter for et selskap, kan det være interessant å vise en melding med en kort forklaring på de viktigste prestasjonene eller salget for hvert kvartal når brukeren plasserer pekeren over en kolonne (onmouseover begivenhet).
Vår tilbakeringing vil være Vis detaljer(), og vi registrerer det for onmouseover begivenhet:
google.visualization.events.addListener (diagram, 'onmouseover', showDetails);
Den første parameteren er variabelen som inneholder vårt diagramobjekt.
Vi må også skjule meldingen når pekeren går ut av kolonnen, slik at vi trenger en annen funksjon som skal kalles når onmouseout Hendelses utløser:
google.visualization.events.addListener (diagram, 'onmouseout', hideDetails);
Innen
eller vår HTML-side må vi definere fire divs med meldingene:Dette er detaljene for Q1 ...Her har du tallene for Q2 ...Forklaringer for tredje kvartal ...Q4 var som forventet ...
Og da tilbakekallingsfunksjonene bare viser eller skjuler den tilsvarende meldingen:
funksjonshowDetaljer (e) switch (e ['row']) case 0: document.getElementById ('details0'). style.visibility = 'visible'; gå i stykker; tilfelle 1: document.getElementById ('detaljer1'). style.visibility = 'synlig'; gå i stykker; tilfelle 2: document.getElementById ('detaljer2'). style.visibility = 'synlig'; gå i stykker; tilfelle 3: document.getElementById ('detaljer3'). style.visibility = 'visible'; gå i stykker; funksjon hideDetails (e) switch (e ['row']) tilfelle 0: document.getElementById ('details0'). style.visibility = 'hidden'; gå i stykker; tilfelle 1: document.getElementById ('detaljer1'). style.visibility = 'hidden'; gå i stykker; tilfelle 2: document.getElementById ('detaljer2'). style.visibility = 'hidden'; gå i stykker; tilfelle 3: document.getElementById ('detaljer3'). style.visibility = 'hidden'; gå i stykker; Våre funksjoner aksepterer en enkelt parameter: hendelsen skutt. Dette objektet har all tilgjengelig informasjon om hendelsesdetaljene.
For å vite hvilken bar vi er over, kontrollerer vi egenskapen "Rute" til hendelsesobjektet. Denne informasjonen refererer til rader og kolonner i DataTable-objektet, men vi vet at raden 0 tilsvarer Q1, første kolonne og så videre.
Merk: Ikke alle hendelser passerer hendelsesobjektet. Noen ganger må du bruke metoder for å få informasjonen du trenger, les dokumentasjonsdokumentasjonen for å få vite hvordan du får informasjonen i forhold til hendelsen.
Følgende liste inkluderer den komplette koden for dette eksemplet. Jeg har tatt med en kort intern CSS-kode for å skjule meldingsdelene, og gi minimal formatering.
Google-kartverktøys veiledning Dette er detaljene for Q1 ...Her har du tallene for Q2 ...Forklaringer for tredje kvartal ...Q4 var som forventet ...
Og dette er resultatet:
Igjen, sjekk live demo for å se interaktiviteten.
Som med de statiske bildene er det en Google Code Playground hvor du kan spille med visualiseringer og parametere, og se resultatene:
Forhåpentligvis bør dette være nok til å komme i gang med Google Chart Tools. Når du får tak i det, vil du oppdage at et stort fleksibilitetsnivå er tilgjengelig for deg i dine webprogrammer. Takk for at du leste!
