GWT Highcharts - Guida rapida

GWT Highcharts è una libreria basata su java open source che fornisce visualizzazioni Highcharts eleganti e ricche di funzionalità all'interno di un'applicazione GWT e può essere utilizzata insieme alle librerie di widget GWT.

Caratteristiche

Compatible- Tutti i browser moderni sono supportati insieme ai browser iPhone / iPad e Internet Explorer 6 in poi. I browser moderni utilizzano SVG per il rendering grafico e nella grafica legacy di Internet Explorer vengono disegnati utilizzando VML.
Pure Java - Non è richiesto JavaScript poiché l'API Highcharts completa è disponibile nei metodi Java.
No Flash - Nessun requisito di plug-in lato client come Flash player o Java poiché Highcharts utilizza tecnologie browser native e le carte possono essere eseguite senza modifiche sui dispositivi mobili moderni.
Clean Syntax - La maggior parte dei metodi è concatenabile, quindi le opzioni di configurazione del grafico possono essere gestite utilizzando una sintassi stretta come JSON.
Dynamic- Le serie e i punti possono essere aggiunti dinamicamente in qualsiasi momento dopo la creazione del grafico. Hook di eventi supportati. Le interazioni con il server sono supportate.
Documented - Le API di Highcharts sono accuratamente documentate con numerosi esempi di codice e sintassi.

Questo tutorial ti guiderà su come preparare un ambiente di sviluppo per iniziare il tuo lavoro con Highcharts 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 essere visualizzato il seguente 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 come mostrato di seguito -

Passaggio 5: installa Highcharts

Scarica l'ultimo jar di Highcharts dalla sua pagina di download e aggiungilo al classpath del progetto.

Aggiungi la seguente voce nel file <nome-progetto> .gwt.xml

<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

Aggiungi la seguente voce nel file <nome-progetto> .html

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
<script src = "https://code.highcharts.com/highcharts.js"/>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js" />
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js" />
<script src = "https://code.highcharts.com/modules/heatmap.js" />
<script src = "https://code.highcharts.com/modules/treemap.js" />

In questo capitolo, mostreremo la configurazione richiesta per disegnare un grafico utilizzando l'API Highcharts 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="org.moxieapps.gwt.highcharts.Highcharts"/>
   <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">
         <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />
         <script src = "https://code.highcharts.com/highcharts.js" />
      </script>
   </head>
   <body>    
   </body>
</html>

Vedremo il HelloWorld.java aggiornato alla fine dopo aver compreso le configurazioni.

Passaggio 2: creare configurazioni

Crea grafico

Configura il tipo, il titolo e il sottotitolo del grafico.

Chart chart = new Chart()
   .setType(Type.SPLINE)
   .setChartTitleText("Monthly Average Temperature")
   .setChartSubtitleText("Source: WorldClimate.com");

xAxis

Configura il ticker da visualizzare sull'asse X.

XAxis xAxis = chart.getXAxis();
xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
   "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

yAxis

Configurare il titolo, le linee del grafico da visualizzare sull'asse Y.

YAxis yAxis = chart.getYAxis();
yAxis.setAxisTitleText("Temperature Â°C");
yAxis.createPlotLine()
   .setValue(0)
   .setWidth(1)
   .setColor("#808080");

tooltip

Configura la descrizione comando. Metti il suffisso da aggiungere dopo il valore (asse y).

ToolTip toolTip = new ToolTip();
toolTip.setValueSuffix("°C");
chart.setToolTip(toolTip);

leggenda

Configura la legenda da visualizzare sul lato destro del grafico insieme ad altre proprietà.

legend.setLayout(Legend.Layout.VERTICAL)
   .setAlign(Legend.Align.RIGHT)
   .setVerticalAlign(Legend.VerticalAlign.TOP)
   .setX(-10)
   .setY(100)
   .setBorderWidth(0);
chart.setLegend(legend);

serie

Configurare i dati da visualizzare sul grafico. La serie è un array in cui ogni elemento di questo array rappresenta una singola riga sul grafico.

chart.addSeries(chart.createSeries()
   .setName("Tokyo")
   .setPoints(new Number[] {
      7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
      26.5, 23.3, 18.3, 13.9, 9.6
   })
);

chart.addSeries(chart.createSeries()
   .setName("New York")
   .setPoints(new Number[] {
      -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
      24.1, 20.1, 14.1, 8.6, 2.5
   })
);

chart.addSeries(chart.createSeries()
   .setName("Berlin")
   .setPoints(new Number[] {
      -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
      17.9, 14.3, 9.0, 3.9, 1.0
   })
);

chart.addSeries(chart.createSeries()
   .setName("London")
   .setPoints(new Number[] {
      3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
      16.6, 14.2, 10.3, 6.6, 4.8
   })
);

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 org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.SPLINE)
         .setChartTitleText("Monthly Average Temperature")
         .setChartSubtitleText("Source: WorldClimate.com");

      XAxis xAxis = chart.getXAxis();
      xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

      YAxis yAxis = chart.getYAxis();
      yAxis.setAxisTitleText("Temperature Â°C");
      yAxis.createPlotLine()
         .setValue(0)
         .setWidth(1)
         .setColor("#808080");

      ToolTip toolTip = new ToolTip();
      toolTip.setValueSuffix("Â°C");
      chart.setToolTip(toolTip);

      Legend legend = new Legend();
      legend.setLayout(Legend.Layout.VERTICAL)
         .setAlign(Legend.Align.RIGHT)
         .setVerticalAlign(Legend.VerticalAlign.TOP)
         .setX(-10)
         .setY(100)
         .setBorderWidth(0);
      chart.setLegend(legend);

      chart.addSeries(chart.createSeries()
         .setName("Tokyo")
         .setPoints(new Number[] {
            7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("New York")
         .setPoints(new Number[] {
            -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
            24.1, 20.1, 14.1, 8.6, 2.5
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("Berlin")
         .setPoints(new Number[] {
            -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("London")
         .setPoints(new Number[] {
            3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8
         })
      );
      RootPanel.get().add(chart);
   }
}

Risultato

Verifica il risultato.

I grafici a linee vengono utilizzati per disegnare grafici basati su linee / spline. In questa sezione, discuteremo i diversi tipi di grafici basati su linee e spline.

Sr.No.	Tipo e descrizione del grafico
1	Linea di base Grafico a linee di base.
2	Con etichette dati Grafico con etichette dati.
3	Serie storica, ingrandibile Grafico con serie temporali.
4	Scanalatura con assi invertiti Grafico spline con assi invertiti.
5	Spline con simboli Grafico a spline che utilizza simboli per caldo / pioggia.
6	Spline con bande di trama Grafico spline con bande di trama.

I grafici ad area vengono utilizzati per disegnare grafici basati su area. In questa sezione, discuteremo i diversi tipi di grafici basati su area.

Sr.No.	Tipo e 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 percentuale Grafico con dati in termini percentuali.
5	Area con punti mancanti Grafico con punti mancanti nei dati.
6	Assi invertiti Area che utilizza assi invertiti.
7	Area-spline Grafico ad area utilizzando spline.

I grafici a barre vengono utilizzati per disegnare grafici basati su barre. In questa sezione discuteremo i diversi tipi di grafici a barre.

Sr.No.	Tipo e descrizione del grafico
1	Bar di base Grafico a barre di base.
2	Barra in pila Grafico a barre con barre impilate l'una sull'altra.
3	Grafico a barre con valori negativi Grafico a barre con valori negativi.

I grafici a colonne vengono utilizzati per disegnare grafici basati su colonne. In questa sezione, discuteremo i diversi tipi di grafici basati su colonne.

Sr.No.	Tipo e descrizione del grafico
1	Colonna di base Istogramma di base.
2	Colonna con valori negativi Grafico a colonne con valori negativi.
3	Colonna in pila Grafico con colonne impilate l'una sull'altra.
4	Colonna in pila e raggruppata Grafico con colonna in forma impilata e raggruppata.
5	Colonna con percentuale in pila Grafico con percentuale in pila.
6	Colonna con etichette ruotate Istogramma con etichette ruotate in colonne.
7	Intervallo di colonne Istogramma che utilizza intervalli.

I grafici a torta vengono utilizzati per disegnare grafici a torta. In questa sezione discuteremo i diversi tipi di grafici a torta.

Sr.No.	Tipo e descrizione del grafico
1	Torta di base Grafico a torta di base.
2	Torta con leggende Grafico a torta con leggende.
3	Grafico a ciambella Grafico a ciambella.

Di seguito è riportato un esempio di un grafico a dispersione di base.

Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts .

Di seguito viene fornito un esempio di un grafico a dispersione di base.

Configurazioni

Vediamo ora le configurazioni / passaggi aggiuntivi effettuati.

serie

Configurare il tipo di grafico in modo che sia basato sulla dispersione. series.typedecide il tipo di serie per il grafico. Qui, il valore predefinito è "line".

chart.addSeries(chart.createSeries()  
   .setName("Observations")  
   .setType(Type.SCATTER)  
   .setPoints(new Number[] {  
      1, 1.5, 2.8, 3.5, 3.9, 4.2  
   })  
);

Esempio

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series.Type;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()  
         .setChartTitleText("Scatter plot");  

      chart.getXAxis()  
         .setMin(-0.5)  
         .setMax(5.5);  

      chart.getYAxis()  
         .setMin(0);  

      chart.addSeries(chart.createSeries()  
         .setName("Observations")  
         .setType(Type.SCATTER)  
         .setPoints(new Number[] {  
            1, 1.5, 2.8, 3.5, 3.9, 4.2  
         })  
      );  
      RootPanel.get().add(chart);
   }
}

Risultato

Verifica il risultato.

I grafici dinamici vengono utilizzati per disegnare grafici basati sui dati in cui i dati possono cambiare dopo il rendering del grafico. In questa sezione, discuteremo i diversi tipi di grafici dinamici.

Sr.No.	Tipo e descrizione del grafico
1	Spline che si aggiorna ogni secondo Grafico a spline che si aggiorna ogni secondo.
2	Fare clic per aggiungere un punto Grafico con capacità di aggiunta di punti.

I grafici a combinazione vengono utilizzati per disegnare grafici misti; ad esempio, grafico a barre con grafico a torta. In questa sezione, discuteremo i diversi tipi di grafici di combinazioni.

Sr.No.	Tipo e descrizione del grafico
1	Colonna, linea e torta Grafico con colonna, linea e torta.
2	Doppio asse, linea e colonna Grafico con due assi, linea e colonna.
3	Assi multipli Grafico con più assi.
4	Scatter con la linea di regressione Grafico a dispersione con linea di regressione.

I grafici 3D vengono utilizzati per disegnare grafici tridimensionali. In questa sezione, discuteremo i diversi tipi di grafici 3D.

Sr.No.	Tipo e descrizione del grafico
1	Colonna 3D Grafico a colonne 3D.
2	Scatter 3D Grafico a dispersione 3D.
3	Torta 3D Grafico a torta 3D.

I grafici a mappa vengono utilizzati per disegnare mappe di calore o grafici ad albero. In questa sezione discuteremo i diversi tipi di grafici a mappa.

Sr.No.	Tipo e descrizione del grafico
1	Mappa di calore Mappa di calore.
2	Mappa dell'albero Mappa dell'albero.

↰ Previous page

GWT Highcharts - Guida rapida

Caratteristiche

Requisito del sistema

Passaggio 1: verifica l'installazione di Java sulla macchina

Passaggio 2: configurazione del Java Development Kit (JDK)

Passaggio 3: configurazione dell'IDE di Eclipse

Passaggio 4: installa GWT SDK e plug-in per Eclipse

Passaggio 5: installa Highcharts

Passaggio 1: crea l'applicazione GWT

Passaggio 2: creare configurazioni

Crea grafico

xAxis

yAxis

tooltip

leggenda

serie

Passaggio 3: aggiungi il grafico al pannello principale.

Esempio

Risultato

Configurazioni

serie

Esempio

Risultato

Tutorial di GWT Highcharts

Risorse utili di GWT Highcharts