Grafici Google GWT - Guida rapida
Google Chartsè una libreria di grafici basata su JavaScript puro pensata per migliorare le applicazioni web aggiungendo funzionalità di creazione di grafici interattivi. Supporta un'ampia gamma di grafici. I grafici vengono disegnati utilizzando SVG nei browser standard come Chrome, Firefox, Safari, Internet Explorer (IE). Nella versione precedente di IE 6, VML viene utilizzato per disegnare la grafica.
Google Chart Java Moduleè una libreria open source basata su java che fornisce visualizzazioni di Google Charts eleganti e ricche di funzionalità all'interno di un'applicazione GWT e può essere utilizzata insieme alle librerie di widget GWT. Ci sono capitoli che discutono tutti i componenti di base di Google Charts con esempi appropriati all'interno di un'applicazione GWT.
Caratteristiche
Di seguito sono riportate le caratteristiche salienti della libreria di Google Charts.
Compatability - Funziona perfettamente su tutti i principali browser e piattaforme mobili come Android e iOS.
Multitouch Support- Supporta il multitouch su piattaforme basate su touch screen come Android e iOS. Ideale per iPhone / iPad e smartphone / tablet basati su Android.
Free to Use - Open source ed è gratuito da usare per scopi non commerciali.
Lightweight - la libreria principale loader.js, è una libreria estremamente leggera.
Simple Configurations - Utilizza json per definire varie configurazioni dei grafici e molto facile da imparare e da usare.
Dynamic - Permette di modificare il grafico anche dopo la generazione del grafico.
Multiple axes- Non limitato agli assi x, y. Supporta più assi sui grafici.
Configurable tooltips- Il suggerimento viene visualizzato quando un utente passa il mouse su un punto qualsiasi di un grafico. googlecharts fornisce un formattatore integrato di tooltip o un formattatore callback per controllare il tooltip in modo programmatico.
DateTime support- Gestisci la data e l'ora in modo speciale. Fornisce numerosi controlli integrati su categorie datate.
Print - Stampa grafico utilizzando la pagina web.
External data- Supporta il caricamento dinamico dei dati dal server. Fornisce il controllo sui dati utilizzando le funzioni di callback.
Text Rotation - Supporta la rotazione delle etichette in qualsiasi direzione.
Tipi di grafici supportati
La libreria di Google Charts fornisce i seguenti tipi di grafici:
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 | Line Charts Utilizzato per disegnare grafici basati su linee / spline. |
2 | Area Charts Utilizzato per disegnare grafici area wise. |
3 |
Pie Charts Utilizzato per disegnare grafici a torta. |
4 |
Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Utilizzato per disegnare grafici sparsi. |
5 |
Bubble Charts Utilizzato per disegnare grafici a bolle. |
6 |
Dynamic Charts Utilizzato per disegnare grafici dinamici in cui l'utente può modificare i grafici. |
7 |
Combinations Utilizzato per disegnare combinazioni di varietà di grafici. |
8 |
3D Charts Utilizzato per disegnare grafici 3D. |
9 |
Angular Gauges Utilizzato per disegnare grafici di tipo tachimetro. |
10 |
Heat Maps Utilizzato per disegnare mappe di calore. |
11 |
Tree Maps Utilizzato per disegnare mappe ad albero. |
Nei prossimi capitoli, discuteremo ogni tipo di grafici sopra menzionati in dettaglio con esempi.
Licenza
Google Charts è open source ed è gratuito. Segui il link: Termini di servizio .
Questo tutorial ti guiderà su come preparare un ambiente di sviluppo per iniziare il tuo lavoro con Google Charts e GWT Framework. Questo tutorial ti insegnerà anche come configurare JDK, Tomcat ed Eclipse sulla tua macchina prima di configurare GWT Framework -
Requisito del sistema
GWT richiede JDK 1.6 o superiore, quindi il primo requisito è avere JDK installato nella tua macchina.
JDK | 1.6 o superiore. |
---|---|
Memoria | nessun requisito minimo. |
Spazio sul disco | nessun requisito minimo. |
Sistema operativo | nessun requisito minimo. |
Segui i passaggi indicati per configurare il tuo ambiente per iniziare con lo sviluppo di applicazioni GWT.
Passaggio 1: verifica l'installazione di Java sulla macchina
Ora apri la console ed esegui il seguente comando java.
OS | Compito | Comando |
---|---|---|
Windows | Apri la Console di comando | c: \> java -version |
Linux | Apri Terminale di comando | $ java -version |
Mac | Apri Terminale | macchina: ~ joseph $ java -version |
Verifichiamo l'output per tutti i sistemi operativi
Sr.No. | OS e output generato |
---|---|
1 |
Windows versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM client Java HotSpot (TM) (build 17.0-b17, modalità mista, condivisione) |
2 |
Linux versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM client ava HotSpot (TM) (build 17.0-b17, modalità mista, condivisione) |
3 |
Mac versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM server Java HotSpot (TM) a 64 bit (build 17.0-b17, modalità mista, condivisione) |
Passaggio 2: configurazione del Java Development Kit (JDK)
Se non si dispone di Java installato, è possibile installare Java Software Development Kit (SDK) dal sito Java di Oracle: Download di Java SE . Troverai le istruzioni per l'installazione di JDK nei file scaricati, segui le istruzioni fornite per installare e configurare il setup. Infine impostare le variabili di ambiente PATH e JAVA_HOME in modo che facciano riferimento alla directory che contiene java e javac, tipicamente java_install_dir / bin e java_install_dir rispettivamente.
Impostare il JAVA_HOMEvariabile di ambiente in modo che punti alla posizione della directory di base in cui Java è installato sulla macchina. Per esempio
Sr.No. | OS e output |
---|---|
1 |
Windows Imposta la variabile d'ambiente JAVA_HOME su C: \ Program Files \ Java \ jdk1.6.0_21 |
2 |
Linux export JAVA_HOME = / usr / local / java-current |
3 |
Mac export JAVA_HOME = / Library / Java / Home |
Aggiungi la posizione del compilatore Java al percorso di sistema.
Sr.No. | OS e output |
---|---|
1 |
Windows Aggiungi la stringa;% JAVA_HOME% \ bin alla fine della variabile di sistema, Path. |
2 |
Linux export PATH = $ PATH: $ JAVA_HOME / bin / |
3 |
Mac non richiesto |
In alternativa, se utilizzi un IDE (Integrated Development Environment) come Borland JBuilder, Eclipse, IntelliJ IDEA o Sun ONE Studio, compila ed esegui un semplice programma per confermare che l'IDE sa dove hai installato Java, altrimenti esegui la corretta configurazione come indicato nel documento dell'IDE.
Passaggio 3: configurazione dell'IDE di Eclipse
Tutti gli esempi in questo tutorial sono stati scritti utilizzando Eclipse IDE. Quindi ti suggerirei di avere l'ultima versione di Eclipse installata sulla tua macchina in base al tuo sistema operativo.
Per installare Eclipse IDE, scarica gli ultimi binari Eclipse da https://www.eclipse.org/downloads/. Dopo aver scaricato l'installazione, decomprimere la distribuzione binaria in una posizione comoda. Ad esempio in C: \ eclipse su Windows, o / usr / local / eclipse su Linux / Unix e infine imposta la variabile PATH in modo appropriato.
Eclipse può essere avviato eseguendo i seguenti comandi sulla macchina Windows, oppure puoi semplicemente fare doppio clic su eclipse.exe
%C:\eclipse\eclipse.exe
Eclipse può essere avviato eseguendo i seguenti comandi su una macchina Unix (Solaris, Linux, ecc.) -
$/usr/local/eclipse/eclipse
Dopo un avvio riuscito, se tutto va bene, dovrebbe visualizzare il risultato
Passaggio 4: installa GWT SDK e plug-in per Eclipse
Seguire le istruzioni fornite al collegamento Plugin for Eclipse (incl. SDK) per installare GWT SDK e Plugin per versione Eclipse installati sulla macchina.
Dopo una corretta configurazione per il plug-in GWT, se tutto va bene, dovrebbe essere visualizzata la seguente schermata con Google icon contrassegnato con un rettangolo rosso.
Passaggio 5: installa Google Charts
Scarica l'ultimo jar di Google Charts dalla sua pagina MVN Repository e aggiungilo al classpath del progetto.
Aggiungi la seguente voce nel file <nome-progetto> .gwt.xml
<inherits name = "com.googlecode.gwt.charts.Charts"/>
In questo capitolo, mostreremo la configurazione richiesta per disegnare un grafico utilizzando l'API di Google Charts in GWT.
Passaggio 1: crea l'applicazione GWT
Segui i passaggi seguenti per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -
Passo | Descrizione |
---|---|
1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione . |
2 | Modifica HelloWorld.gwt.xml , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato. |
3 | Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata. |
Di seguito è riportato il contenuto del descrittore del modulo modificato src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<inherits name = 'com.google.gwt.user.User'/>
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<inherits name="com.googlecode.gwt.charts.Charts"/>
<source path = 'client'/>
<source path = 'shared'/>
</module>
Di seguito è riportato il contenuto del file host HTML modificato war/HelloWorld.html.
<html>
<head>
<title>GWT Highcharts Showcase</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</head>
<body>
</body>
</html>
Vedremo il HelloWorld.java aggiornato alla fine dopo aver compreso le configurazioni.
Passaggio 2: creare configurazioni
Carica la libreria e crea un grafico
Carica la libreria utilizzando ChartLoader e quindi crea il grafico.
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
PieChart chart = new PieChart();
}
});
Tabella dati
Configura i dettagli creando una tabella dati.
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);
// Draw the chart
chart.draw(data);
Taglia
Configurare la larghezza e l'altezza da impostare.
chart.setWidth("700px");
chart.setHeight("700px");
Passaggio 3: aggiungi il grafico al pannello principale.
Stiamo aggiungendo il grafico al pannello principale.
RootPanel.get().add(chart);
Esempio
Considera il seguente esempio per comprendere ulteriormente la sintassi della configurazione:
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.PieChart;
public class HelloWorld implements EntryPoint {
private PieChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new PieChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);
// Draw the chart
chart.draw(data);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}
Risultato
Verifica il risultato.
I grafici ad area vengono utilizzati per disegnare grafici basati su area. In questa sezione discuteremo i seguenti tipi di grafici basati su area.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Area di base
Grafico ad area di base |
2 |
Area con valori negativi
Grafico ad area con valori negativi. |
3 |
Area in pila
Grafico con aree impilate l'una sull'altra. |
4 |
Area con punti mancanti
Grafico con punti mancanti nei dati. |
I grafici a barre vengono utilizzati per disegnare grafici basati su barre. In questa sezione discuteremo i seguenti tipi di grafici a barre.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Bar di base
Grafico a barre di base |
2 |
Grafico a barre raggruppato
Grafico a barre raggruppato. |
3 |
Barra in pila
Grafico a barre con barre impilate l'una sull'altra. |
4 |
Barra negativa
Grafico a barre con stack negativo. |
5 |
Grafico a barre delle differenze
Grafico a barre che mostra le differenze. |
I grafici a bolle vengono utilizzati per disegnare grafici a bolle. In questa sezione discuteremo i seguenti tipi di grafici basati su bolle.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Bolla di base
Grafico a bolle di base. |
2 |
Grafico a bolle con etichette dati
Grafico a bolle con etichette dati. |
I grafici a candela vengono utilizzati per mostrare il valore di apertura e chiusura su una variazione di valore e sono normalmente utilizzati per rappresentare le azioni. In questa sezione discuteremo i seguenti tipi di grafici basati su candele.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Candeliere di base
Grafico a candela di base. |
2 |
Candeliere con colori personalizzati
Grafico a candela personalizzato. |
I grafici a colonne vengono utilizzati per disegnare grafici basati su colonne. In questa sezione discuteremo i seguenti tipi di grafici basati su colonne.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Colonna di base
Grafico colonne di base |
2 |
Istogramma raggruppato
Grafico a colonne raggruppate. |
3 |
Colonna impilata
Grafico a colonne con colonne impilate l'una sull'altra. |
4 |
Colonna impilata negativa
Grafico a colonne con stack negativo. |
5 |
Grafico a colonne diff
Grafico a colonne che mostra le differenze. |
Il grafico a combinazione aiuta a rendere ogni serie come un diverso tipo di marcatore dall'elenco seguente: linea, area, barre, candele e area con gradini. Per assegnare un tipo di indicatore predefinito per le serie, utilizzare la proprietà seriesType. La proprietà della serie deve essere utilizzata per specificare le proprietà di ciascuna serie individualmente. Di seguito è riportato un esempio di un istogramma che mostra le differenze.
Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Ora, vediamo un esempio di un grafico a colonne che mostra le differenze.
Configurazioni
Noi abbiamo usato ComboChart class per mostrare un diagramma di combinazione.
// Combination chart
ComboChart chart = new ComboChart();
Esempio
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ComboChart;
import com.googlecode.gwt.charts.client.corechart.ComboChartOptions;
import com.googlecode.gwt.charts.client.corechart.ComboChartSeries;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.SeriesType;
import com.googlecode.gwt.charts.client.options.VAxis;
public class HelloWorld implements EntryPoint {
private ComboChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new ComboChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Fruits");
data.addColumn(ColumnType.NUMBER, "Jane");
data.addColumn(ColumnType.NUMBER, "Jone");
data.addColumn(ColumnType.NUMBER, "Average");
data.addRow("Apples", 3, 2, 2.5);
data.addRow("Oranges",2, 3, 2.5);
data.addRow("Pears", 1, 5, 3);
data.addRow("Bananas", 3, 9, 6);
data.addRow("Plums", 4, 2, 3);
// Set options
ComboChartOptions options = ComboChartOptions.create();
options.setTitle("Fruits distribution");
options.setHAxis(HAxis.create("Person"));
options.setVAxis(VAxis.create("Fruits"));
options.setSeriesType(SeriesType.BARS);
ComboChartSeries lineSeries = ComboChartSeries.create();
lineSeries.setType(SeriesType.LINE);
options.setSeries(2,lineSeries);
// Draw the chart
chart.draw(data,options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}
Risultato
Verifica il risultato.
Un istogramma è un grafico che raggruppa i dati numerici in segmenti, visualizzando i segmenti come colonne segmentate. Sono usati per rappresentare la distribuzione di un set di dati in base alla frequenza con cui i valori rientrano negli intervalli. Google Charts sceglie automaticamente il numero di bucket per te. Tutti i bucket hanno la stessa larghezza e un'altezza proporzionale al numero di punti dati nel bucket. Gli istogrammi sono simili agli istogrammi sotto altri aspetti. In questa sezione discuteremo i seguenti tipi di grafici basati su istogrammi.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Istogramma di base
Grafico istogramma di base. |
2 |
Controllo del colore
Colore personalizzato del grafico istogramma. |
3 |
Benne di controllo
Bucket personalizzati di grafico istogramma. |
4 |
Serie multiple
Grafico istogramma con più serie. |
I grafici a linee vengono utilizzati per disegnare grafici basati su linee. In questa sezione discuteremo i seguenti tipi di grafici basati su linee.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Linea di base
Grafico a linee di base. |
2 |
Con punti visibili
Grafico con punti dati visibili. |
3 |
Colore di sfondo personalizzabile
Grafico con colore di sfondo personalizzato. |
4 |
Colore della linea personalizzabile
Grafico con colore della linea personalizzato. |
5 |
Etichette degli assi e delle tacche personalizzabili
Grafico con assi personalizzati ed etichette di graduazione. |
6 |
Mirino
Grafici a linee che mostrano i mirini nel punto dati sulla selezione. |
7 |
Stile della linea personalizzabile
Grafico con colore della linea personalizzato. |
8 |
Grafici a linee con linee curve
Grafico con linee curve morbide. |
Un grafico di Google Map utilizza l'API di Google Maps per visualizzare la mappa. I valori dei dati vengono visualizzati come indicatori sulla mappa. I valori dei dati possono essere coordinate (coppie lat-long) o indirizzi effettivi. La mappa verrà ridimensionata di conseguenza in modo da includere tutti i punti identificati.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Mappa di base
Mappa Google di base. |
2 |
Mappa utilizzando latitudine / longitudine
Mappa con posizioni specificate utilizzando Latitudine e Longitudine. |
Di seguito è riportato un esempio di organigramma.
L'organigramma aiuta a rendere una gerarchia di nodi, utilizzata per rappresentare relazioni superiori / subordinate in un'organizzazione. Ad esempio, un albero genealogico è un tipo di organigramma. Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di organigramma.
Configurazioni
Noi abbiamo usato OrgChart classe per mostrare un organigramma.
// Organization chart
OrgChart chart = new OrgChart();
Esempio
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.format.PatternFormat;
import com.googlecode.gwt.charts.client.orgchart.OrgChart;
import com.googlecode.gwt.charts.client.orgchart.OrgChartOptions;
public class HelloWorld implements EntryPoint {
private OrgChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.ORGCHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new OrgChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.STRING, "Manager");
dataTable.addColumn(ColumnType.STRING, "ToolTip");
dataTable.addRows(5);
dataTable.setValue(0, 0, "Mike");
dataTable.setValue(0, 1, "");
dataTable.setValue(0, 2, "The President");
dataTable.setValue(1, 0, "Jim");
dataTable.setValue(1, 1, "Mike");
dataTable.setValue(1, 2, "VP");
dataTable.setValue(2, 0, "Alice");
dataTable.setValue(2, 1, "Mike");
dataTable.setValue(2, 2, "");
dataTable.setValue(3, 0, "Bob");
dataTable.setValue(3, 1, "Jim");
dataTable.setValue(3, 2, "Bob Sponge");
dataTable.setValue(4, 0, "Carol");
dataTable.setValue(4, 1, "Bob");
dataTable.setValue(4, 2, "");
PatternFormat format = PatternFormat.create("{0} {1}");
format.format(dataTable, 0, 2);
// Set options
OrgChartOptions options = OrgChartOptions.create();
options.setAllowHtml(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}
Risultato
Verifica il risultato.
I grafici a torta vengono utilizzati per disegnare grafici a torta. In questa sezione discuteremo i seguenti tipi di grafici a torta.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Torta di base
Grafico a torta di base. |
2 |
Grafico a ciambella
Grafico a ciambella. |
3 |
Grafico a torta 3D
Grafico a torta 3D. |
4 |
Grafico a torta con sezioni esplose
Grafico a torta con sezioni esplose. |
Un grafico Sankey è uno strumento di visualizzazione e viene utilizzato per rappresentare un flusso da un insieme di valori a un altro. Gli oggetti connessi sono chiamati nodi e le connessioni sono chiamate collegamenti. I Sankeys vengono utilizzati per mostrare una mappatura molti-a-molti tra due domini o più percorsi attraverso una serie di fasi.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Grafico Sankey di base
Grafico Sankey di base. |
2 |
Grafico Sankey multilivello
Grafico Sankey multilivello. |
3 |
Personalizzazione di Sankey Chart
Grafico Sankey personalizzato. |
Di seguito è riportato un esempio di un grafico a dispersione.
Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico a dispersione.
Configurazioni
Noi abbiamo usato ScatterChart class per mostrare un grafico a dispersione.
ScatterChart chart = new ScatterChart();
Esempio
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ScatterChart;
import com.googlecode.gwt.charts.client.corechart.ScatterChartOptions;
public class HelloWorld implements EntryPoint {
private ScatterChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new ScatterChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.NUMBER, "Age");
data.addColumn(ColumnType.NUMBER, "Weight");
data.addRow(8,12);
data.addRow(4, 5.5);
data.addRow(11,14);
data.addRow(4,5);
data.addRow(3,3.5);
data.addRow(6.5,7);
ScatterChartOptions options = ScatterChartOptions.create();
options.setTitle("Age vs Weight");
options.setLegend(null);
// Draw the chart
chart.draw(data, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}
Risultato
Verifica il risultato.
Un grafico ad area a gradini è un grafico ad area basato su passi. Discuteremo i seguenti tipi di grafici ad area a gradini.
Sr. No. | Tipo / descrizione del grafico |
---|---|
1 |
Grafico a gradini di base
Grafico ad area a gradini di base. |
2 |
Grafico a gradini impilato
Grafico ad area a gradini in pila. |
Il grafico a tabella aiuta a rendere una tabella che può essere ordinata e impaginata. Le celle della tabella possono essere formattate utilizzando stringhe di formato o inserendo direttamente HTML come valori di cella. I valori numerici sono allineati a destra per impostazione predefinita; i valori booleani vengono visualizzati come segni di spunta o crocette. Gli utenti possono selezionare singole righe con la tastiera o il mouse. Le intestazioni di colonna possono essere utilizzate per l'ordinamento. La riga di intestazione rimane fissa durante lo scorrimento. La tabella attiva gli eventi corrispondenti all'interazione dell'utente.
Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico a tabella.
Configurazioni
Noi abbiamo usato Table class per mostrare un grafico a tabella.
Table chart = new Chart();
Esempio
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.table.Table;
import com.googlecode.gwt.charts.client.table.TableOptions;
public class HelloWorld implements EntryPoint {
private Table chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new Table();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.NUMBER, "Salary");
dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee");
dataTable.addRows(4);
dataTable.setCell(0, 0, "Mike");
dataTable.setCell(0, 1, 10000, "$10,000");
dataTable.setCell(0, 2, true);
dataTable.setCell(1, 0, "Jim");
dataTable.setCell(1, 1, 8000, "$8,000");
dataTable.setCell(1, 2, false);
dataTable.setCell(2, 0, "Alice");
dataTable.setCell(2, 1, 12500, "$12,500");
dataTable.setCell(2, 2, true);
dataTable.setCell(3, 0, "Bob");
dataTable.setCell(3, 1, 7000, "$7,000");
dataTable.setCell(3, 2, true);
TableOptions options = TableOptions.create();
options.setAlternatingRowStyle(true);
options.setShowRowNumber(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}
Risultato
Verifica il risultato.
TreeMap è una rappresentazione visiva di un albero di dati, in cui ogni nodo può avere zero o più figli e un genitore (eccetto la radice). Ogni nodo viene visualizzato come un rettangolo, può essere ridimensionato e colorato in base ai valori che assegniamo. Dimensioni e colori vengono valutati rispetto a tutti gli altri nodi nel grafico. Di seguito è riportato un esempio di grafico ad albero.
Abbiamo già visto le configurazioni utilizzate per disegnare un grafico nel capitolo Sintassi della configurazione di Google Charts . Vediamo ora un esempio di un grafico TreeMap.
Configurazioni
Noi abbiamo usato TreeMap class per mostrare un grafico TreeMap.
TreeMap chart = new TreeMap();
Esempio
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.treemap.TreeMap;
import com.googlecode.gwt.charts.client.treemap.TreeMapOptions;
public class HelloWorld implements EntryPoint {
private TreeMap chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.TREEMAP);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new TreeMap();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Location");
dataTable.addColumn(ColumnType.STRING, "Parent");
dataTable.addColumn(ColumnType.NUMBER, "Market trade volume (size)");
dataTable.addColumn(ColumnType.NUMBER, "Market increase/decrease (color)");
dataTable.addRow("Global",null,0,0);
dataTable.addRow("America","Global",0,0);
dataTable.addRow("Europe","Global",0,0);
dataTable.addRow("Asia","Global",0,0);
dataTable.addRow("Australia","Global",0,0);
dataTable.addRow("Africa","Global",0,0);
dataTable.addRow("USA","America",52,31);
dataTable.addRow("Mexico","America",24,12);
dataTable.addRow("Canada","America",16,-23);
dataTable.addRow("France","Europe",42,-11);
dataTable.addRow("Germany","Europe",31,-2);
dataTable.addRow("Sweden","Europe",22,-13);
dataTable.addRow("China","Asia",36,4);
dataTable.addRow("Japan","Asia",20,-12);
dataTable.addRow("India","Asia",40,63);
dataTable.addRow("Egypt","Africa",21,0);
dataTable.addRow("Congo","Africa",10,12);
dataTable.addRow("Zaire","Africa",8,10);
// Set options
TreeMapOptions options = TreeMapOptions.create();
options.setMinColor("#ff7777");
options.setMidColor("#ffff77");
options.setMaxColor("#77ff77");
options.setHeaderHeight(15);
options.setShowScale(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}
Risultato
Verifica il risultato.