Share
Google Chart Tools bieden verschillende manieren om eenvoudig diagrammen aan een webpagina toe te voegen. Diagrammen kunnen statisch of interactief zijn en in deze zelfstudie leren we beide gebruiken.
Er zijn twee verschillende soorten grafieken die grafiekhulpprogramma's kunnen genereren: beeldkaarten (statische grafieken) en interactieve grafieken.
Afbeeldingen zijn vrij eenvoudig te gebruiken, maar interactieve diagrammen zijn veel flexibeler omdat ze gebeurtenissen kunnen activeren die we kunnen gebruiken om te communiceren met andere elementen op de pagina.
Ja, er is een supereenvoudige manier om een diagram op te nemen in uw pagina - net zo eenvoudig als het schrijven van een URL als deze:
images_27_3 / easy-grafieken-met-Google-chart-tools.jpg
als je deze URL in je browser kopieert en plakt, zie je het volgende:
U kunt de afbeelding overal op uw pagina plaatsen met de URL als src kenmerk van een afbeeldingstag:
Dat is de Google Charts API. Verzoek wordt verzonden als GET- of POST-URL's en de Google-hitlijsten-server retourneert een PNG-afbeelding als reactie. Het type diagram, gegevens en opties worden allemaal opgegeven in de querystring van de URL. De API definieert hoe dat moet. Laten we de verschillende opties bekijken.
http://chart.apis.google.com/chart?
Dit is de basis-URL; we zullen het gebruiken voor alle beeldkaartverzoeken. De rest zijn parameters in de vorm naam = waarde gescheiden door &.
Er zijn slechts drie verplichte parameters: cht, chs en chd. De rest is optioneel.
cht = p3
Dit is het grafiektype. We gebruiken een 3D-cirkeldiagram p3. U kunt de diagramgalerij bezoeken voor alle beschikbare diagramtypen.
chs = 450x200
Dit is de kaartgrootte in pixels (breedte x hoogte).
chd = t: 2,4,3,1
Dit zijn de gegevens die in het diagram moeten worden weergegeven. De eerste brief (t) geeft het gegevensformaat aan. In dit geval gebruiken we de standaardtekstindeling, een lijst met door komma's gescheiden waarden.
Elk diagramtype heeft enkele optionele parameters om enkele aspecten van uw grafiek te configureren: titel, labels, lettertypen, kleuren, verlopen enz. Dit hebben we opgenomen:
chl = telefoons | Computers | Diensten | Andere
Diagramlabels voor elk cirkelsegment.
chtt = Company% 20Sales
Grafiektitel.
CHCO = ff0000
Diagramkleur in hexadecimale indeling rrggbb.
Als u één kleur opgeeft, hebben de segmenten verschillende gradaties. U kunt ook een verloop opgeven met twee kleuren (chco = ff0000,00ff00) of een kleur voor elk segment (chco = ff0000 | 3355aa | 8322c2 | 112233).
Dit is het voor beeldgrafieken. Er is niet veel aan! Er zijn veel verschillende grafiektypen beschikbaar en als je met de parameters speelt, kun je een aantal hele mooie resultaten krijgen. De Google Live Chart Playground is een uitstekende tool om dit te doen. Je speelt met parameters en ziet de wijzigingen in de gegenereerde afbeelding - een eenvoudige manier om de URL voor je grafiek te verfijnen!
Als u interactieve diagrammen op uw webpagina's wilt opnemen, moet u een andere API gebruiken: de Google Visualization API. In dit geval is de interface geen URL. U moet een JavaScript-bibliotheek gebruiken en een paar regels code schrijven, maar niets moeilijks.
Er is een galerij van kant-en-klare visualisaties (grafieken) die u kunt gebruiken. U kunt ook uw eigen grafiek maken en delen, maar de visualisaties in de galerij zullen waarschijnlijk de meeste van uw behoeften voor het weergeven van gegevens dekken.
Het niveau van interactiviteit hangt af van de specifieke visualisaties die u gebruikt. Meestal reageert de grafiek op een bepaalde manier wanneer erop wordt geklikt (met een tooltip of animatie), maar de echt krachtige functie is dat ze gebeurtenissen kunnen activeren en u callbacks kunt registreren om elke actie met betrekking tot die gebeurtenis uit te voeren. Voorbeelden van gebeurtenissen zijn het selecteren van een balk of een cirkelsegment, mouse Over, mouseOut, enz.
We gebruiken lokale gegevens om de visualisaties in onze voorbeelden te voeden, maar u kunt uw gegevens op een andere manier verkrijgen. Een veel voorkomende optie zou zijn om de gegevens uit een database op te halen met AJAX. U kunt zelfs de Visualisatie-API; het definieert ook een manier om gegevens aan te vragen en aan te bieden (voor servers) in een formaat dat onmiddellijk in elke visualisatie kan worden gebruikt, maar we zullen dat hier niet behandelen.
Het maakt niet uit hoe we onze gegevens ontvangen, maar alle visualisaties moeten deze ontvangen in een DataTable-object. Het is eigenlijk een tabel met rijen en kolommen. Elke kolom wordt gedefinieerd met een bepaald gegevenstype (en een ID en een label die optioneel zijn).
Als u naar een bepaalde cel in de tabel wilt verwijzen, gebruikt u het paar (rij kolom). Rij is altijd een cijfer en begint met een nul. Kolom kan ook een op nul gebaseerd nummer of een optionele ID zijn.
Als we de inkomsten van ons bedrijf in 2009 in een kolomdiagram willen weergeven, moeten we de gegevens op de volgende manier voorbereiden:
| Kwartalen 2009 | verdiensten |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Twee kolommen: de eerste (met type 'draad') is het label voor elke balk in de grafiek en de tweede (met type 'aantal') is de waarde voor die balk. We hebben vier rijen, wat betekent dat er vier balken moeten worden weergegeven.
Hoe plaatsen we dat in een DataTable-object? Dit is de code om dit te doen - elke regel wordt later uitgelegd:
Accentsconagua
// create data table object var dataTable = new google.visualization.DataTable (); // definieer kolommen dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('nummer', 'Earnings'); // definieer rijen met data dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]); Eerst maken we ons DataTable-object met:
var dataTable = new google.visualization.DataTable ();
Vervolgens definiëren we de twee kolommen in onze tabel met de methode addColumn (). De eerste waarde is het type en de tweede waarde is het optionele label.
dataTable.addColumn ('string', 'Quarters 2009'); dataTable.addColumn ('nummer', 'Earnings'); En ten slotte definiëren we de gegevensrijen met behulp van de methode addRows ().
dataTable.addRows ([['Q1', 308], ['Q2', 257], ['Q3', 375], ['Q4', 123]]);
Elke rij is een array en alle gegevens bevinden zich ook in een andere array.
Rijen kunnen ook per rij worden gedefinieerd:
dataTable.addRow ([ 'Q1', 308]);
of zelfs één cel tegelijk:
data.setValue (0, 0, 'Q1');
Hier zijn de eerste twee nummers respectievelijk rij en kolom.
Dit is de manier om DataTable-objecten te maken. Elke visualisatie moet worden geladen met gegevens in dit formaat. Dat betekent niet dat de tabel voor elke visualisatie hetzelfde is. Het specifieke aantal en type kolommen en rijen moet worden gecontroleerd in de documentatie voor elke grafiek.
Voor dit eerste voorbeeld gebruiken we een kolomdiagram om onze gegevens te presenteren. In de Google Visualization Gallery kunnen we klikken op elk grafiektype om documentatie en voorbeelden te zien.
Om elke visualisatie te gebruiken, moeten we de Google AJAX API eerder laden; het biedt de kernfunctionaliteit die nodig is in veel andere Google API's.
Nu kunnen we de visualisatie-API laden met de functie google.load () (uit de AJAX API):
google.load ('visualization', '1', 'packages': ['columnchart']); De tweede parameter, '1', verwijst naar de versie van de te laden API ('1' betekent de huidige versie). 'pakketten' is een array met alle visualisaties die we gaan gebruiken. In dit geval gebruiken we er maar één: het kolomdiagram.
Op dit moment hebben we de nodige bibliotheken om ons DataTable-object te maken en onze grafiek weer te geven, maar we moeten er zeker van zijn dat de visualisatie volledig is geladen, anders krijgen we JavaScript-fouten en wordt onze grafiek niet weergegeven.
De manier om dit te doen is door een callback te registreren. De functie wordt aangeroepen wanneer de visualisatie (API en pakket) is geladen.
// stel callback google.setOnLoadCallback (createChart) in;
Met functie createChart maken we onze gegevenstabel en onze grafiek. De laatste complete code is:
Google Charts-zelfstudie
Het diagramobject wordt gemaakt met deze lijn:
var chart = new google.visualization.ColumnChart (document.getElementById ('grafiek')); Het argument is de DOM-verwijzing naar het element dat de visualisatie bevat. In dit geval hebben we een
.Vervolgens definiëren we de gewenste opties en tekenen we de grafiek:
var options = width: 400, height: 240, is3D: true, title: 'Company Earnings'; chart.draw (dataTable, opties);
Onze grafiek ziet er zo uit:
Opmerking: Alle afbeeldingen hier zijn statisch om de zelfstudie beschikbaar te maken, ongeacht uw browser of uw JavaScript-instellingen. Bekijk de live demo voor de interactieve versie.
Het voordeel van een duidelijk gedefinieerd gegevensformaat is dat wanneer u weet hoe u een DataTable-object maakt en vult, u weet hoe u elke visualisatie moet voeden. U hoeft alleen de documentatie te controleren om de specifieke tabel (aantal en type kolommen) die u moet bouwen te zien.
Voor een cirkeldiagram kunnen we exact dezelfde tabel gebruiken die we nu hebben. Laten we een cirkeldiagram toevoegen op dezelfde pagina.
We moeten ons nieuwe pakket toevoegen aan de regel google.load ():
google.load ('visualization', '1', 'packages': ['columnchart', 'piechart']); en breid onze createChart-functie uit met deze twee regels:
var secondChart = new google.visualization.PieChart (document.getElementById ('secondChart')); secondChart.draw (dataTable, opties); De volledige code is:
Google Charts-zelfstudie
En de gegenereerde grafieken:
Opmerking: bekijk de live demo voor de interactieve versie.
Dit was in dit geval eenvoudig, omdat beide visualisaties dezelfde tabelkolommen en rijen gebruikten. Maar er zijn visualisaties waarvoor meer kolommen of kolommen van verschillende typen nodig zijn en u kunt de gegevenstabel niet rechtstreeks gebruiken. U kunt dit echter oplossen door een andere weergave van de oorspronkelijke tabel te genereren voor een visualisatie. We zullen dat binnenkort bespreken.
De gegevenstabel voor een kolomdiagram hoeft niet zo eenvoudig te zijn als in het vorige voorbeeld. We kunnen bijvoorbeeld bars hebben die de inkomsten van elk kwartaal in de afgelopen drie jaar vertegenwoordigen. In dat geval de gegevens
tabel zou er zo uitzien:
| vertrekken | Earnings 2009 | Inkomsten 2008 | Inkomsten 2007 |
|---|---|---|---|
| Q1 | 308 | 417 | 500 |
| Q2 | 257 | 300 | 420 |
| Q3 | 375 | 350 | 235 |
| Q4 | 123 | 100 | 387 |
De enige code die we moeten wijzigen in ons eerste voorbeeld is het DataTable-object, om nog twee kolommen en meer gegevens in elke rij toe te voegen:
// create data table object var dataTable = new google.visualization.DataTable (); // definieer kolommen dataTable.addColumn ('string', 'Quarters'); dataTable.addColumn ('nummer', 'Earnings 2009'); dataTable.addColumn ('number', 'Earnings 2008'); dataTable.addColumn ('nummer', 'Earnings 2007'); // definieer rijen gegevensgegevensTabel.addRijen ([['Q1', 308.417.500], ['Q2', 257.300.420], ['Q3', 375.350.235], ['Q4', 123.100.387]]); De rest van de code verandert niet. De gegenereerde grafiek is:
Maar wat als we nu een cirkeldiagram willen gebruiken om een deel van deze gegevens te vertegenwoordigen? We kunnen dezelfde gegevenstabel niet gebruiken zoals we eerder deden, omdat cirkeldiagrammen een tabel met twee kolommen nodig hebben (plaklabel en waarde). Er is een eenvoudige manier om een andere tabel te verkrijgen uit een bestaand DataTable-object en deze te gebruiken om een grafiek te voeden: data Views.
Weergaven zijn een manier om onze tabel aan te passen voor een andere visualisatie. Als we nu op dezelfde pagina een cirkeldiagram willen weergeven van de driemaandelijkse winstverdeling voor vorig jaar, is de tabel die we nodig hebben alleen dit:
| vertrekken | Earnings 2009 |
|---|---|
| Q1 | 308 |
| Q2 | 257 |
| Q3 | 375 |
| Q4 | 123 |
Met een gegevensweergave (DataView-object) kunt u slechts een subset van de oorspronkelijke gegevens gebruiken. U kunt kolommen en rijen opnieuw rangschikken of dupliceren of kolommen met berekende waarden invoeren.
Maak eerst het View-object:
var view = new google.visualization.DataView (dataTable);
Een gegevensweergave wordt geïnitialiseerd met de oorspronkelijke tabel en vervolgens gebruiken we de DataView-methoden om kolommen of rijen te verbergen, te tonen of te filteren (setColumns (), hideColumns (), setRows (), hideRows (), getFilteredRows, getColumnRange, enz.).
We kunnen de originele tabel filteren om alleen de eerste twee kolommen (kolommen 0 en 1) te krijgen met behulp van setColumns ():
view.setColumns ([0, 1]);
Nu kunnen we het cirkeldiagram tekenen met behulp van deze weergave als een gegevenstabel:
secondChart.draw (weergave, opties);
Vergeet niet dat we het cirkeldiagrampakket moeten opnemen met google.load (), en we moeten het cirkeldiagram-object maken met:
var secondChart = new google.visualization.PieChart
Nu kunnen we beide diagrammen zien die met dezelfde gegevenstabel zijn gegenereerd:
Gebeurtenissen bieden een eenvoudige manier om uw visualisaties te verbinden met andere elementen op uw pagina. Visualisaties kunnen bepaalde gebeurtenissen activeren en u kunt een luisteraar registreren om op die gebeurtenis te reageren en wat actie uitvoeren. Het gebeurtenismodel is vergelijkbaar met het browsergebeurtenismodel. Nogmaals, we moeten de documentatie bekijken om de gebeurtenissen te controleren die worden geactiveerd voor elke visualisatie.
Om te laten zien hoe gebeurtenissen werken, laten we terugkeren naar ons eerste voorbeeld, de eenvoudigste kolomgrafiek:
Deze grafiek activeert gebeurtenissen op mouseover, op mouseout en op select. Dat betekent dat we het veel interactiever kunnen maken dan standaard.
Aangezien deze grafiek inkomsten voor een bedrijf weergeeft, kan het interessant zijn om een bericht weer te geven met een korte uitleg van de belangrijkste prestaties of verkopen voor elk kwartaal wanneer de gebruiker de muisaanwijzer op een kolom plaatst (onmouseover evenement).
Onze callback zal zijn toon details(), en we registreren het voor de onmouseover evenement:
google.visualization.events.addListener (diagram, 'onmouseover', showDetails);
De eerste parameter is de variabele die ons diagramobject bevat.
We zullen ook het bericht moeten verbergen wanneer de aanwijzer uit de kolom gaat, dus we hebben een andere functie nodig om te kunnen gebruiken wanneer onmouseout gebeurtenistriggers:
google.visualization.events.addListener (grafiek, 'onmouseout', hideDetails);
Binnen de
of onze HTML-pagina moeten we vier div's definiëren met de berichten:Dit zijn de details voor Q1 ...Hier heb je de nummers voor Q2 ...Verklaringen voor het derde kwartaal ...Q4 was zoals verwacht ...
En de callback-functies tonen of verbergen alleen het bijbehorende bericht:
functie showDetails (e) switch (e ['row']) case 0: document.getElementById ('details0'). style.visibility = 'visible'; breken; case 1: document.getElementById ('details1'). style.visibility = 'visible'; breken; case 2: document.getElementById ('details2'). style.visibility = 'visible'; breken; case 3: document.getElementById ('details3'). style.visibility = 'visible'; breken; function hideDetails (e) switch (e ['row']) case 0: document.getElementById ('details0'). style.visibility = 'hidden'; breken; case 1: document.getElementById ('details1'). style.visibility = 'hidden'; breken; case 2: document.getElementById ('details2'). style.visibility = 'hidden'; breken; case 3: document.getElementById ('details3'). style.visibility = 'hidden'; breken; Onze functies accepteren een enkele parameter: de gebeurtenis wordt afgevuurd. Dit object heeft alle beschikbare informatie over de afspraakdetails.
Om te weten in welke balk we zijn, controleren we de eigenschap 'row' van het gebeurtenisobject. Deze informatie verwijst naar de rijen en kolommen van het DataTable-object, maar we weten dat rij 0 overeenkomt met Q1, eerste kolom, enzovoort.
Opmerking: niet alle gebeurtenissen passeren het gebeurtenisobject. Soms moet je methoden gebruiken om de informatie te krijgen die je nodig hebt, lees de visualisatiedocumentatie om te weten hoe je de informatie over het evenement ontslagen kunt krijgen.
De volgende lijst bevat de volledige code voor dit voorbeeld. Ik heb een kort intern CSS-fragment toegevoegd om de bericht-divs te verbergen en een minimale opmaak te bieden.
Google Chart Tools-zelfstudie Dit zijn de details voor Q1 ...Hier heb je de nummers voor Q2 ...Verklaringen voor het derde kwartaal ...Q4 was zoals verwacht ...
En dit is het resultaat:
Controleer nogmaals de live demo om de interactiviteit te zien.
Net als bij de statische afbeeldingen, is er een Google Code Playground waar u kunt spelen met uw visualisaties en parameters en de resultaten kunt bekijken:
Hopelijk is dit voldoende om u op weg te helpen met Google Chart Tools. Als je het eenmaal onder de knie hebt, zul je zien dat er een enorme mate van flexibiliteit beschikbaar is in je webapplicaties. Bedankt voor het lezen!
