Angular Highcharts - Guia Rápido

HighChart Angular Wrapperé um componente baseado em angular de código aberto que fornece visualizações Highcharts elegantes e ricas em recursos em um aplicativo Angular e pode ser usado com componentes Angular perfeitamente. Existem capítulos que discutem todos os componentes básicos de Highcharts com exemplos adequados dentro de uma aplicação Angular.

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 TypeScript - Nenhum JavaScript é necessário, pois a API Highcharts completa está disponível no TypeScript.

  • 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 podem ser 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 - APIs Highcharts são completamente 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 Angular Framework. Neste capítulo, discutiremos a configuração do ambiente necessária para o Angular 6. Para instalar o Angular 6, precisamos do seguinte -

  • Nodejs
  • Npm
  • CLI Angular
  • IDE para escrever seu código

Nodejs deve ser maior que 8,11 e npm deve ser maior que 5,6.

Nodejs

Para verificar se nodejs está instalado em seu sistema, digite node -vno terminal. Isso o ajudará a ver a versão do nodejs atualmente instalado em seu sistema.

C:\>node -v
v8.11.3

Se não imprimir nada, instale nodejs em seu sistema. Para instalar o nodejs, vá a página inicialhttps://nodejs.org/en/download/ de nodejs e instale o pacote com base em seu sistema operacional.

A página inicial do nodejs será semelhante à seguinte -

Com base no seu sistema operacional, instale o pacote necessário. Assim que o nodejs for instalado, o npm também será instalado junto com ele. Para verificar se o npm está instalado ou não, digite npm -v no terminal. Ele deve exibir a versão do npm.

C:\>npm -v
5.6.0

As instalações do Angular 6 são muito simples com a ajuda do angular CLI. Visite a homepagehttps://cli.angular.io/ de angular para obter a referência do comando.

Tipo npm install -g @angular/cli, para instalar o angular cli em seu sistema.

Você obterá a instalação acima em seu terminal, assim que o Angular CLI for instalado. Você pode usar qualquer IDE de sua escolha, ou seja, WebStorm, Atom, Visual Studio Code, etc.

Instale Highcharts

Execute o seguinte comando para instalar o módulo highchart no projeto criado.

highchartsApp>npm install highcharts --save
+ [email protected]
added 1 package in 137.534s

Execute o seguinte comando para instalar o módulo wrapper highchart no projeto criado.

highchartsApp>npm install highcharts-angular --save
+ [email protected]
added 1 package in 20.93s

Adicione a seguinte entrada no arquivo highchartsApp.module.ts

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],

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

Etapa 1 - Criar Aplicação Angular

Siga as etapas a seguir para atualizar o aplicativo Angular que criamos no Angular 6 - capítulo Configuração do projeto -

Degrau Descrição
1 Crie um projeto com o nome highchartsApp conforme explicado no capítulo Angular 6 - Configuração do projeto .
2 Modifique app.module.ts , app.component.ts e app.component.html 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 app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
   declarations: [
      AppComponent,
      HighchartsChartComponent    
   ],
   imports: [
      BrowserModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

A seguir está o conteúdo do arquivo host HTML modificado app.component.html.

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

Veremos o app.component.ts atualizado no final, após entender as configurações.

Etapa 2 - Configurações de uso

Criar Highcharts e criar chartOptions

highcharts = Highcharts;
   chartOptions = {   
}

Criar gráfico

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

chart: {
   type: "spline"
},

xAxis

Configure o ticker a ser exibido no eixo X usando chartOptions.

xAxis:{
   categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},

yAxis

Configure o título a ser exibido no eixo Y usando chartOptions.

yAxis: {          
   title:{
      text:"Temperature °C"
   } 
},

dica

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

tooltip: {
   valueSuffix:" °C"
},

Series

Configure os dados a serem exibidos no gráfico usando chartOptions. Série é uma matriz em que cada elemento dessa matriz representa uma única linha no gráfico.

series: [
   {
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
   },
   {
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
   },
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   },
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
]

Exemplo

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

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },
      subtitle: {
         text: "Source: WorldClimate.com"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Temperature °C"
         } 
      },
      tooltip: {
         valueSuffix:" °C"
      },
      series: [
         {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
         },
         {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
         },
         {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         },
         {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }
      ]
   };
}

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.

GWP Highcharts - gráficos de pizza

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".

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

Exemplo

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Scatter plot'   
      },      
      series : [{
         type: 'scatter',
         zoomType:'xy',
         name: 'Browser share',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

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.