GWT Highcharts - Guia rápido

GWT Highcharts é uma biblioteca de código aberto baseada em java que fornece visualizações Highcharts elegantes e ricas em recursos em um aplicativo GWT e pode ser usada junto com bibliotecas de widgets GWT.

Características

  • Compatible- Todos os navegadores modernos são compatíveis com os navegadores iPhone / iPad e Internet Explorer 6 em diante. Navegadores modernos usam SVG para a renderização de gráficos e em gráficos legados do Internet Explorer são desenhados usando VML.

  • Pure Java - Nenhum JavaScript é necessário, pois a API Highcharts completa está disponível nos métodos Java.

  • No Flash - Nenhum requisito de plug-ins do lado do cliente como Flash player ou Java, pois o Highcharts usa tecnologias de navegador nativas e os gráficos podem ser executados sem modificação em dispositivos móveis modernos.

  • Clean Syntax - A maioria dos métodos são encadeados, portanto, as opções de configuração do gráfico podem ser gerenciadas usando uma sintaxe tão rígida quanto JSON.

  • Dynamic- Séries e pontos podem ser adicionados dinamicamente a qualquer momento após a criação do gráfico. Ganchos de eventos suportados. As interações do servidor são suportadas.

  • Documented - Highcharts APIs são totalmente documentadas com vários exemplos de código e sintaxe.

Este tutorial irá guiá-lo sobre como preparar um ambiente de desenvolvimento para iniciar seu trabalho com Highcharts e GWT Framework. Este tutorial também irá ensiná-lo a configurar JDK, Tomcat e Eclipse em sua máquina antes de configurar o GWT Framework -

Requisitos do sistema

O GWT requer JDK 1.6 ou superior, portanto, o primeiro requisito é ter o JDK instalado em sua máquina.

JDK 1.6 ou superior.
Memória nenhum requisito mínimo.
Espaço em disco nenhum requisito mínimo.
Sistema operacional nenhum requisito mínimo.

Siga as etapas fornecidas para configurar seu ambiente para iniciar o desenvolvimento de aplicativos GWT.

Etapa 1 - Verifique a instalação do Java em sua máquina

Agora abra o console e execute o seguinte comando java.

SO Tarefa Comando
Windows Abrir console de comando c: \> versão java
Linux Abra o terminal de comando $ java -version
Mac Terminal aberto máquina: ~ joseph $ java -version

Vamos verificar a saída de todos os sistemas operacionais

Sr. Não. SO e saída gerada
1

Windows

versão java "1.6.0_21"

Java (TM) SE Runtime Environment (build 1.6.0_21-b07)

Cliente VM Java HotSpot (TM) (versão 17.0-b17, modo misto, compartilhamento)
2

Linux

versão java "1.6.0_21"

Java (TM) SE Runtime Environment (build 1.6.0_21-b07)

VM cliente ava HotSpot (TM) (versão 17.0-b17, modo misto, compartilhamento)
3

Mac

versão java "1.6.0_21"

Java (TM) SE Runtime Environment (build 1.6.0_21-b07)

Servidor VM Java HotSpot (TM) de 64 bits (versão 17.0-b17, modo misto, compartilhamento)

Etapa 2 - Configure o Java Development Kit (JDK)

Se você não tiver o Java instalado, poderá instalar o Java Software Development Kit (SDK) do site Java da Oracle: Java SE Downloads . Você encontrará instruções para instalar o JDK nos arquivos baixados, siga as instruções fornecidas para instalar e configurar a configuração. Por fim, defina as variáveis ​​de ambiente PATH e JAVA_HOME para se referir ao diretório que contém java e javac, normalmente java_install_dir / bin e java_install_dir respectivamente.

Colocou o JAVA_HOMEvariável de ambiente para apontar para o local do diretório base onde o Java está instalado em sua máquina. Por exemplo

Sr. Não. SO e saída
1

Windows

Defina a variável de ambiente JAVA_HOME como 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

Anexe a localização do compilador Java ao caminho do sistema.

Sr. Não. SO e saída
1

Windows

Anexe a string;% JAVA_HOME% \ bin ao final da variável do sistema, Caminho.
2

Linux

exportar PATH = $ PATH: $ JAVA_HOME / bin /
3

Mac

não requerido

Alternativamente, se você usar um Ambiente de Desenvolvimento Integrado (IDE) como Borland JBuilder, Eclipse, IntelliJ IDEA ou Sun ONE Studio, compile e execute um programa simples para confirmar que o IDE sabe onde você instalou o Java, caso contrário, faça a configuração adequada conforme o documento fornecido do IDE.

Etapa 3 - Configurar IDE Eclipse

Todos os exemplos neste tutorial foram escritos usando Eclipse IDE. Então, eu sugiro que você tenha a versão mais recente do Eclipse instalada em sua máquina com base em seu sistema operacional.

Para instalar o Eclipse IDE, baixe os binários mais recentes do Eclipse em https://www.eclipse.org/downloads/. Depois de baixar a instalação, descompacte a distribuição binária em um local conveniente. Por exemplo, em C: \ eclipse no windows, ou / usr / local / eclipse no Linux / Unix e finalmente defina a variável PATH apropriadamente.

O Eclipse pode ser iniciado executando os seguintes comandos na máquina Windows, ou você pode simplesmente clicar duas vezes em eclipse.exe

%C:\eclipse\eclipse.exe

O Eclipse pode ser iniciado executando os seguintes comandos na máquina Unix (Solaris, Linux, etc.) -

$/usr/local/eclipse/eclipse

Após uma inicialização bem-sucedida, se tudo estiver bem, ele deve exibir o seguinte resultado -

Etapa 4: Instale o GWT SDK e o plug-in para Eclipse

Siga as instruções fornecidas no link Plugin for Eclipse (incl. SDKs) para instalar a versão GWT SDK & Plugin for Eclipse instalada em sua máquina.

Após uma configuração bem-sucedida do plugin GWT, se tudo estiver bem, ele deverá exibir a tela a seguir com Google icon marcado com retângulo vermelho como mostrado abaixo -

Etapa 5: Instalar Highcharts

Baixe o jar Highcharts mais recente de sua página de download e adicione-o ao classpath do projeto.

Adicione a seguinte entrada no arquivo <project-name> .gwt.xml

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

Adicione a seguinte entrada no arquivo <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" />

Neste capítulo, mostraremos a configuração necessária para desenhar um gráfico usando a API Highcharts no GWT.

Etapa 1: Criar aplicativo GWT

Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau Descrição
1 Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2 Modifique HelloWorld.gwt.xml , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3 Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo 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 o HelloWorld.java atualizado no final, após entender as configurações.

Etapa 2: Criar configurações

Criar gráfico

Configure o tipo, título e subtítulo do gráfico.

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

xAxis

Configure o ticker a ser exibido no eixo X.

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

yAxis

Configure o título, plote as linhas a serem exibidas no eixo Y.

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

dica

Configure a dica de ferramenta. Coloque o sufixo a ser adicionado após o valor (eixo y).

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

lenda

Configure a legenda a ser exibida no lado direito do gráfico junto com outras propriedades.

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

Series

Configure os dados a serem exibidos no gráfico. Série é uma matriz em que cada elemento dessa matriz representa uma única linha no 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
   })
);

Etapa 3: adicione o gráfico ao painel principal.

Estamos adicionando o gráfico ao painel raiz.

RootPanel.get().add(chart);

Exemplo

Considere o seguinte exemplo para entender melhor a sintaxe de configuração -

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 o resultado.

Os gráficos de linha são usados ​​para desenhar gráficos baseados em linha / spline. Nesta seção, discutiremos os diferentes tipos de gráficos baseados em linhas e splines.

Sr. Não. Tipo e descrição do gráfico
1 Linha básica

Gráfico de linha básico.
2 Com rótulos de dados

Gráfico com rótulos de dados.
3 Séries temporais, com zoom

Gráfico com séries temporais.
4 Spline com eixos invertidos

Gráfico spline com eixos invertidos.
5 Spline com símbolos

Gráfico spline usando símbolos para calor / chuva.
6 Spline com bandas de enredo

Gráfico spline com bandas de plotagem.

Os gráficos de área são usados ​​para desenhar gráficos baseados em área. Nesta seção, discutiremos os diferentes tipos de gráficos baseados em área.

Sr. Não. Tipo e descrição do gráfico
1 Área Básica

Gráfico de área básico.
2 Área com valores negativos

Gráfico de área com valores negativos.
3 Área empilhada

Gráfico com áreas empilhadas umas sobre as outras.
4 Área percentual

Gráfico com dados em termos percentuais.
5 Área com pontos faltando

Gráfico com pontos ausentes nos dados.
6 Eixos invertidos

Área usando eixos invertidos.
7 Area-spline

Gráfico de área usando spline.

Os gráficos de barras são usados ​​para desenhar gráficos baseados em barras. Nesta seção, discutiremos os diferentes tipos de gráficos baseados em barras.

Sr. Não. Tipo e descrição do gráfico
1 Barra Básica

Gráfico de barras básico.
2 Barra Empilhada

Gráfico de barras com barras empilhadas umas sobre as outras.
3 Gráfico de barras com valores negativos

Gráfico de barras com valores negativos.

Os gráficos de colunas são usados ​​para desenhar gráficos baseados em colunas. Nesta seção, discutiremos os diferentes tipos de gráficos baseados em colunas.

Sr. Não. Tipo e descrição do gráfico
1 Coluna Básica

Gráfico de colunas básico.
2 Coluna com valores negativos

Gráfico de colunas com valores negativos.
3 Coluna empilhada

Gráfico com colunas empilhadas umas sobre as outras.
4 Coluna empilhada e agrupada

Gráfico com coluna em formato empilhado e agrupado.
5 Coluna com porcentagem empilhada

Gráfico com porcentagem empilhada.
6 Coluna com rótulos girados

Gráfico de colunas com rótulos girados em colunas.
7 Faixa de coluna

Gráfico de colunas usando intervalos.

Os gráficos de pizza são usados ​​para desenhar gráficos de pizza. Nesta seção, discutiremos os diferentes tipos de gráficos de pizza.

Sr. Não. Tipo e descrição do gráfico
1 Torta Básica

Gráfico de pizza básico.
2 Torta com Lendas

Gráfico de pizza com legendas.
3 Donut Chart

Gráfico Donut.

A seguir está um exemplo de gráfico de dispersão básico.

Já vimos a configuração usada para desenhar um gráfico no capítulo Highcharts Configuration Syntax .

Um exemplo de gráfico de dispersão básico é fornecido abaixo.

Configurações

Vamos agora ver as configurações / etapas adicionais realizadas.

Series

Configure o tipo de gráfico para ser baseado em dispersão. series.typedecide o tipo de série do gráfico. Aqui, o valor padrão é "linha".

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

Exemplo

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 o resultado.

Os gráficos dinâmicos são usados ​​para desenhar gráficos baseados em dados, onde os dados podem mudar após a renderização do gráfico. Nesta seção, discutiremos os diferentes tipos de gráfico dinâmico.

Sr. Não. Tipo e descrição do gráfico
1 Spline atualizando a cada segundo

Gráfico de spline atualizando a cada segundo.
2 Clique para adicionar um ponto

Gráfico com capacidade de adição de pontos.

Gráficos de combinação são usados ​​para desenhar gráficos mistos; por exemplo, gráfico de barras com gráfico de pizza. Nesta seção, discutiremos os diferentes tipos de gráficos de combinações.

Sr. Não. Tipo e descrição do gráfico
1 Coluna, Linha e Torta

Gráfico com coluna, linha e pizza.
2 Eixos duplos, linha e coluna

Gráfico com eixo duplo, linha e coluna.
3 Multiple Axes

Gráfico com vários eixos.
4 Dispersão com linha de regressão

Gráfico de dispersão com linha de regressão.

Os gráficos 3D são usados ​​para desenhar gráficos tridimensionais. Nesta seção, discutiremos os diferentes tipos de gráficos 3D.

Sr. Não. Tipo e descrição do gráfico
1 Coluna 3D

Gráfico de colunas 3D.
2 3D Scatter

Gráfico de dispersão 3D.
3 3D Pie

Gráfico de pizza 3D.

Os gráficos de mapas são usados ​​para desenhar mapas de calor ou gráficos de mapas em árvore. Nesta seção, discutiremos os diferentes tipos de gráficos de mapas.

Sr. Não. Tipo e descrição do gráfico
1 Mapa de calor

Mapa de calor.
2 Mapa de Árvores

Mapa da árvore.