Highcharts de GWT - Guía rápida

GWT Highcharts es una biblioteca de código abierto basada en Java que proporciona visualizaciones Highcharts elegantes y ricas en funciones dentro de una aplicación GWT y se puede utilizar junto con las bibliotecas de widgets de GWT.

Caracteristicas

Compatible- Todos los navegadores modernos son compatibles con los navegadores de iPhone / iPad e Internet Explorer 6 en adelante. Los navegadores modernos usan SVG para la representación de gráficos y, en el Internet Explorer heredado, los gráficos se dibujan usando VML.
Pure Java - No se requiere JavaScript ya que la API Highcharts completa está disponible en los métodos Java.
No Flash - No se requieren complementos del lado del cliente como Flash Player o Java, ya que Highcharts utiliza tecnologías de navegador nativas y los gráficos se pueden ejecutar sin modificaciones en dispositivos móviles modernos.
Clean Syntax - La mayoría de los métodos son encadenables, por lo que las opciones de configuración del gráfico se pueden administrar utilizando una sintaxis tan ajustada como JSON.
Dynamic- Las series y los puntos se pueden agregar dinámicamente en cualquier momento después de la creación del gráfico. Admite ganchos de eventos. Se admiten las interacciones del servidor.
Documented - Las API de Highcharts están completamente documentadas con numerosos ejemplos de código y sintaxis.

Este tutorial lo guiará sobre cómo preparar un entorno de desarrollo para comenzar su trabajo con Highcharts y GWT Framework. Este tutorial también le enseñará cómo configurar JDK, Tomcat y Eclipse en su máquina antes de configurar GWT Framework -

Requisitos del sistema

GWT requiere JDK 1.6 o superior, por lo que el primer requisito es tener JDK instalado en su máquina.

JDK	1.6 o superior.
Memoria	ningún requisito mínimo.
Espacio del disco	ningún requisito mínimo.
Sistema operativo	ningún requisito mínimo.

Siga los pasos dados para configurar su entorno para comenzar con el desarrollo de aplicaciones GWT.

Paso 1: verificar la instalación de Java en su máquina

Ahora abra la consola y ejecute el siguiente comando de Java.

SO	Tarea	Mando
Windows	Abrir consola de comandos	c: \> java -version
Linux	Terminal de comando abierto	$ java -version
Mac	Terminal abierta	máquina: ~ joseph $ java -version

Verifiquemos la salida para todos los sistemas operativos.

No Señor.	SO y salida generada
1	Windows versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) VM de cliente Java HotSpot (TM) (compilación 17.0-b17, modo mixto, uso compartido)
2	Linux versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) Ava HotSpot (TM) Client VM (compilación 17.0-b17, modo mixto, uso compartido)
3	Mac versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) Servidor VM Java HotSpot (TM) de 64 bits (compilación 17.0-b17, modo mixto, uso compartido)

Paso 2: configuración del kit de desarrollo de Java (JDK)

Si no tiene Java instalado, puede instalar Java Software Development Kit (SDK) desde el sitio Java de Oracle: Descargas de Java SE . Encontrará instrucciones para instalar JDK en archivos descargados, siga las instrucciones dadas para instalar y configurar la instalación. Finalmente, configure las variables de entorno PATH y JAVA_HOME para hacer referencia al directorio que contiene java y javac, normalmente java_install_dir / bin y java_install_dir respectivamente.

Selecciona el JAVA_HOMEvariable de entorno para apuntar a la ubicación del directorio base donde está instalado Java en su máquina. Por ejemplo

No Señor.	SO y salida
1	Windows Establezca la variable de entorno JAVA_HOME en C: \ Archivos de programa \ Java \ jdk1.6.0_21
2	Linux exportar JAVA_HOME = / usr / local / java-current
3	Mac exportar JAVA_HOME = / Library / Java / Home

Agregue la ubicación del compilador de Java a la ruta del sistema.

No Señor.	SO y salida
1	Windows Agregue la cadena;% JAVA_HOME% \ bin al final de la variable del sistema, Ruta.
2	Linux export PATH = $ PATH: $ JAVA_HOME / bin /
3	Mac no requerido

Alternativamente, si usa un entorno de desarrollo integrado (IDE) como Borland JBuilder, Eclipse, IntelliJ IDEA o Sun ONE Studio, compile y ejecute un programa simple para confirmar que el IDE sabe dónde instaló Java; de lo contrario, realice la configuración adecuada como se indica en el documento. del IDE.

Paso 3: configurar el IDE de Eclipse

Todos los ejemplos de este tutorial se han escrito utilizando Eclipse IDE. Por lo tanto, le sugiero que tenga instalada la última versión de Eclipse en su máquina según su sistema operativo.

Para instalar Eclipse IDE, descargue los últimos binarios de Eclipse desde https://www.eclipse.org/downloads/. Una vez que descargó la instalación, descomprima la distribución binaria en una ubicación conveniente. Por ejemplo, en C: \ eclipse en Windows, o / usr / local / eclipse en Linux / Unix y finalmente configure la variable PATH de manera apropiada.

Eclipse se puede iniciar ejecutando los siguientes comandos en la máquina con Windows, o simplemente puede hacer doble clic en eclipse.exe

%C:\eclipse\eclipse.exe

Eclipse se puede iniciar ejecutando los siguientes comandos en una máquina Unix (Solaris, Linux, etc.):

$/usr/local/eclipse/eclipse

Después de un inicio exitoso, si todo está bien, debería mostrar el siguiente resultado:

Paso 4: Instale el SDK y el complemento de GWT para Eclipse

Siga las instrucciones dadas en el enlace Complemento para Eclipse (incluidos los SDK) para instalar GWT SDK y Complemento para la versión de Eclipse instalada en su máquina.

Después de una configuración exitosa para el complemento GWT, si todo está bien, debería mostrar la siguiente pantalla con Google icon marcado con un rectángulo rojo como se muestra a continuación -

Paso 5: instalar Highcharts

Descargue el último jar de Highcharts desde su página de descargas y agréguelo a la ruta de clases del proyecto.

Agregue la siguiente entrada en el archivo <nombre-proyecto> .gwt.xml

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

Agregue la siguiente entrada en el archivo <project-name> .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" />

En este capítulo, mostraremos la configuración requerida para dibujar un gráfico usando la API Highcharts en GWT.

Paso 1: Cree la aplicación GWT

Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Veremos el HelloWorld.java actualizado al final después de comprender las configuraciones.

Paso 2: crear configuraciones

Crear gráfico

Configure el tipo, título y subtítulo del gráfico.

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

xAxis

Configure el ticker para que se muestre en el eje X.

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

yAxis

Configure el título, las líneas de trazado que se mostrarán en el eje Y.

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

información sobre herramientas

Configure la información sobre herramientas. Coloque el sufijo que se agregará después del valor (eje y).

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

leyenda

Configure la leyenda para que se muestre en el lado derecho del gráfico junto con otras propiedades.

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

serie

Configure los datos que se mostrarán en el gráfico. La serie es una matriz donde cada elemento de esta matriz representa una sola línea en el gráfico.

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
   })
);

Paso 3: agregue el gráfico al panel principal.

Estamos agregando el gráfico al panel raíz.

RootPanel.get().add(chart);

Ejemplo

Considere el siguiente ejemplo para comprender mejor la sintaxis de configuración:

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);
   }
}

Resultado

Verifique el resultado.

Los gráficos de líneas se utilizan para dibujar gráficos basados en líneas / splines. En esta sección, discutiremos los diferentes tipos de gráficos basados en líneas y splines.

No Señor.	Tipo de gráfico y descripción
1	Linea basica Gráfico de líneas básico.
2	Con etiquetas de datos Gráfico con etiquetas de datos.
3	Serie temporal, ampliable Gráfico con series de tiempo.
4	Spline con ejes invertidos Gráfico de splines con ejes invertidos.
5	Spline con símbolos Gráfico de splines con símbolos de calor / lluvia.
6	Spline con bandas de trama Gráfico de splines con bandas de trama.

Los gráficos de área se utilizan para dibujar gráficos basados en áreas. En esta sección, discutiremos los diferentes tipos de gráficos basados en áreas.

No Señor.	Tipo de gráfico y descripción
1	Área básica Gráfico de áreas básico.
2	Área con valores negativos Gráfico de área con valores negativos.
3	Área apilada Gráfico que tiene áreas apiladas una sobre otra.
4	Área de porcentaje Gráfico con datos en términos porcentuales.
5	Área con puntos faltantes Gráfico con puntos faltantes en los datos.
6	Ejes invertidos Área usando ejes invertidos.
7	Área-spline Gráfico de áreas usando spline.

Los gráficos de barras se utilizan para dibujar gráficos basados en barras. En esta sección, discutiremos los diferentes tipos de gráficos basados en barras.

No Señor.	Tipo de gráfico y descripción
1	Barra básica Gráfico de barras básico.
2	Barra apilada Gráfico de barras con barras apiladas unas sobre otras.
3	Gráfico de barras con valores negativos Gráfico de barras con valores negativos.

Los gráficos de columnas se utilizan para dibujar gráficos basados en columnas. En esta sección, discutiremos los diferentes tipos de gráficos basados en columnas.

No Señor.	Tipo de gráfico y descripción
1	Columna básica Gráfico de columnas básico.
2	Columna con valores negativos Gráfico de columnas con valores negativos.
3	Columna apilada Gráfico con columnas apiladas unas sobre otras.
4	Columna apilada y agrupada Gráfico con columna en forma apilada y agrupada.
5	Columna con porcentaje apilado Gráfico con porcentaje apilado.
6	Columna con etiquetas giradas Gráfico de columnas con etiquetas giradas en columnas.
7	Rango de columna Gráfico de columnas usando rangos.

Los gráficos circulares se utilizan para dibujar gráficos circulares. En esta sección, analizaremos los diferentes tipos de gráficos circulares.

No Señor.	Tipo de gráfico y descripción
1	Pastel básico Gráfico circular básico.
2	Pastel con leyendas Gráfico circular con leyendas.
3	Gráfico de anillos Gráfico de anillos.

A continuación se muestra un ejemplo de un gráfico de dispersión básico.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se ofrece un ejemplo de un gráfico de dispersión básico.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

serie

Configure el tipo de gráfico para que se base en la dispersión. series.typedecide el tipo de serie del gráfico. Aquí, el valor predeterminado es "línea".

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

Ejemplo

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);
   }
}

Resultado

Verifique el resultado.

Los gráficos dinámicos se utilizan para dibujar gráficos basados en datos donde los datos pueden cambiar después de la representación del gráfico. En esta sección, discutiremos los diferentes tipos de gráficos dinámicos.

No Señor.	Tipo de gráfico y descripción
1	Spline actualizándose cada segundo El gráfico de splines se actualiza cada segundo.
2	Haga clic para agregar un punto Gráfico con capacidad de suma de puntos.

Los gráficos combinados se utilizan para dibujar gráficos mixtos; por ejemplo, gráfico de barras con gráfico circular. En esta sección, discutiremos los diferentes tipos de tablas de combinaciones.

No Señor.	Tipo de gráfico y descripción
1	Columna, línea y circular Gráfico con columna, línea y circular.
2	Ejes duales, línea y columna Gráfico con ejes duales, línea y columna.
3	Varios ejes Gráfico que tiene varios ejes.
4	Dispersión con línea de regresión Gráfico de dispersión con línea de regresión.

Los gráficos 3D se utilizan para dibujar gráficos tridimensionales. En esta sección, discutiremos los diferentes tipos de gráficos 3D.

No Señor.	Tipo de gráfico y descripción
1	Columna 3D Gráfico de columnas 3D.
2	Dispersión 3D Gráfico de dispersión 3D.
3	Pastel 3D Gráfico circular 3D.

Los gráficos de mapas se utilizan para dibujar mapas de calor o gráficos de mapas de árboles. En esta sección, discutiremos los diferentes tipos de gráficos de mapas.

No Señor.	Tipo de gráfico y descripción
1	Mapa de calor Mapa de calor.
2	Mapa del árbol Mapa de árboles.

↰ Previous page