Angular Google Charts - Guia rápido

Google Chartsé uma biblioteca de gráficos baseada em JavaScript puro destinada a aprimorar aplicativos da web, adicionando recursos de gráficos interativos. Ele oferece suporte a uma ampla variedade de gráficos. Os gráficos são desenhados usando SVG em navegadores padrão como Chrome, Firefox, Safari, Internet Explorer (IE). No legado do IE 6, VML é usado para desenhar os gráficos.

angular-google-chartsé um wrapper de código aberto baseado em angular para Google Charts que fornece visualizações de Google Charts 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 do Google Charts com exemplos adequados em um aplicativo Angular.

Características

A seguir estão os principais recursos da biblioteca de gráficos do Google.

  • Compatability - Funciona perfeitamente em todos os principais navegadores e plataformas móveis, como Android e iOS.

  • Multitouch Support- Suporta multitoque em plataformas baseadas em tela de toque, como Android e iOS. Ideal para smartphones / tablets baseados em iPhone / iPad e Android.

  • Free to Use - Código aberto e gratuito para uso não comercial.

  • Lightweight - biblioteca principal loader.js, é uma biblioteca extremamente leve.

  • Simple Configurations - Usa json para definir várias configurações de gráficos e muito fácil de aprender e usar.

  • Dynamic - Permite modificar o gráfico mesmo após a geração do gráfico.

  • Multiple axes- Não restrito ao eixo x, y. Suporta vários eixos nos gráficos.

  • Configurable tooltips- A dica de ferramenta surge quando um usuário passa o mouse sobre qualquer ponto em um gráfico. googlecharts fornece um formatador integrado de dica de ferramenta ou formatador de retorno de chamada para controlar a dica de forma programática.

  • DateTime support- Lidar com data e hora especialmente. Fornece vários controles embutidos sobre categorias de datas sábias.

  • Print - Imprimir gráfico usando a página da web.

  • External data- Suporta o carregamento de dados dinamicamente do servidor. Fornece controle sobre os dados usando funções de retorno de chamada.

  • Text Rotation - Suporta rotação de etiquetas em qualquer direção.

Tipos de gráficos suportados

A biblioteca de gráficos do Google oferece os seguintes tipos de gráficos:

Sr. Não. Tipo / descrição do gráfico
1

Line Charts

Usado para desenhar gráficos baseados em linhas / splines.
2

Area Charts

Usado para desenhar gráficos de área.
3

Pie Charts

Usado para desenhar gráficos de pizza.
4

Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines

Usado para desenhar gráficos dispersos.
5

Bubble Charts

Usado para desenhar gráficos baseados em bolhas.
6

Dynamic Charts

Usado para desenhar gráficos dinâmicos onde o usuário pode modificar os gráficos.
7

Combinations

Usado para desenhar combinações de vários gráficos.
8

3D Charts

Usado para desenhar gráficos 3D.
9

Angular Gauges

Usado para desenhar gráficos do tipo velocímetro.
10

Heat Maps

Usado para desenhar mapas de calor.
11

Tree Maps

Usado para desenhar mapas de árvores.

Nos próximos capítulos, discutiremos cada tipo de gráfico mencionado acima em detalhes com exemplos.

Licença

O Google Charts é de código aberto e de uso gratuito. Siga o link - Termos de Serviço .

Este tutorial irá guiá-lo sobre como preparar um ambiente de desenvolvimento para iniciar seu trabalho com Google Charts 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.

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.

Instalar Google Charts Wrapper

Execute o seguinte comando para instalar o módulo Wrapper do Google Charts no projeto criado.

googleChartsApp> npm angular-google-charts

+ [email protected]
added 2 packages in 20.526s

Adicione a seguinte entrada no arquivo app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],

Neste capítulo, mostraremos a configuração necessária para desenhar um gráfico usando a API de gráficos do Google 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 googleChartsApp 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 { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
   declarations: [
      AppComponent   
   ],
   imports: [
      BrowserModule,GoogleChartsModule
   ],
   providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

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

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

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

Etapa 2 - Configurações de uso

Definir Título

title = 'Browser market shares at a specific website, 2014';

Definir tipo de gráfico

type='PieChart';

dados

Configure os dados a serem exibidos no gráfico. 

data = [
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7] 
];

nomes de coluna

Configure os nomes das colunas a serem exibidos.

columnNames = ['Browser', 'Percentage'];

opções

Configure as outras opções.

options = {
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true
};

Exemplo

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

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7] 
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {    
   };
   width = 550;
   height = 400;
}

Resultado

Verifique o resultado.

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

Sr. Não Tipo / 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 com pontos faltando

Gráfico com pontos ausentes nos dados.

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

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

Gráfico de barras básico
2 Gráfico de Barras Agrupadas

Gráfico de barras agrupadas.
3 Barra Empilhada

Gráfico de barras com barras empilhadas umas sobre as outras.
4 Barra Negativa

Gráfico de barras com pilha negativa.

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

Sr. Não Tipo / descrição do gráfico
1 Bolha Básica

Gráfico de bolhas básico.
2 Gráfico de bolhas com rótulos de dados

Gráfico de bolhas com rótulos de dados.

Os gráficos candlestick são usados ​​para mostrar o valor de abertura e fechamento sobre uma variação de valor e normalmente são usados ​​para representar ações. Nesta seção, vamos discutir os seguintes tipos de gráficos baseados em velas.

Sr. Não Tipo / descrição do gráfico
1 Castiçal Básico

Gráfico de velas básico.
2 Castiçal com cores personalizadas

Gráfico de velas personalizado.

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

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

Gráfico de coluna básico
2 Gráfico de colunas agrupadas

Gráfico Colummn agrupado.
3 Coluna Empilhada

Gráfico de colunas com colunas empilhadas umas sobre as outras.
4 Coluna Empilhada Negativa

Gráfico de colunas com pilha negativa.

O gráfico de combinação ajuda a renderizar cada série como um tipo de marcador diferente da lista a seguir: linha, área, barras, velas e área escalonada. Para atribuir um tipo de marcador padrão para a série, use a propriedade seriesType. A propriedade da série deve ser usada para especificar as propriedades de cada série individualmente. A seguir está um exemplo de um Gráfico de colunas mostrando diferenças.

Já vimos as configurações usadas para desenhar um gráfico no capítulo Google Charts Configuration Syntax . Agora, vamos ver um exemplo de um Gráfico de colunas mostrando diferenças.

Configurações

Nós usamos ComboChart classe para mostrar um gráfico de combinação.

type='ComboChart';

Exemplo

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Fruits distribution';
   type = 'ComboChart';
   data = [
      ["Apples", 3, 2, 2.5],
      ["Oranges",2, 3, 2.5],
      ["Pears", 1, 5, 3],
      ["Bananas", 3, 9, 6],
      ["Plums", 4, 2, 3]
   ];
   columnNames = ['Fruits', 'Jane','Jone','Average'];
   options = {   
      hAxis: {
         title: 'Person'
      },
      vAxis:{
         title: 'Fruits'
      },
      seriesType: 'bars',
      series: {2: {type: 'line'}}
   };
   width = 550;
   height = 400;
}

Resultado

Verifique o resultado.

Um histograma é um gráfico que agrupa dados numéricos em grupos, exibindo os grupos como colunas segmentadas. Eles são usados ​​para representar a distribuição de um conjunto de dados e a frequência com que os valores se enquadram em intervalos. O Google Charts escolhe automaticamente o número de baldes para você. Todos os baldes têm a mesma largura e altura proporcional ao número de pontos de dados no balde. Os histogramas são semelhantes aos gráficos de colunas em outros aspectos. Nesta seção, vamos discutir os seguintes tipos de gráficos baseados em histograma.

Sr. Não Tipo / descrição do gráfico
1 Histograma Básico

Gráfico de histograma básico.
2 Cor de controle

Cor personalizada da carta do histrograma.
3 Controlando Buckets

Baldes personalizados da carta do histrograma.
4 Multiple Series

Gráfico de histrograma com várias séries.

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

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

Gráfico de linha básico.
2 Com pontos visíveis

Gráfico com pontos de dados visíveis.
3 Cor de fundo personalizável

Gráfico com cor de fundo personalizada.
4 Cor de linha personalizável

Gráfico com cor de linha personalizada.
5 Rótulos personalizáveis ​​de eixo e escala

Gráfico com rótulos personalizados de eixo e escala.
6 Crosshairs

Gráficos de linha mostrando retículos no ponto de dados na seleção.
7 Estilo de linha personalizável

Gráfico com cor de linha personalizada.
8 Gráficos de linha com linhas curvas

Gráfico com linhas curvas suaves.

Um gráfico do Google Maps usa a API do Google Maps para exibir o mapa. Os valores dos dados são exibidos como marcadores no mapa. Os valores dos dados podem ser coordenadas (pares latitude-long) ou endereços reais. O mapa será dimensionado de forma adequada para incluir todos os pontos identificados.

Sr. Não Tipo / descrição do gráfico
1 Mapa Básico

Mapa básico do Google.
2 Mapa usando Latitude / Longitude

Mapa com localizações especificadas usando Latitude e Longitude.

A seguir está um exemplo de um organograma.

O organograma ajuda a renderizar uma hierarquia de nós, usado para retratar relacionamentos superiores / subordinados em uma organização. Por exemplo, uma árvore genealógica é um tipo de organograma. Já vimos as configurações usadas para desenhar um gráfico no capítulo Google Charts Configuration Syntax . Agora, vamos ver um exemplo de organograma.

Configurações

Nós usamos OrgChart classe para mostrar um organograma.

type='OrgChart';

Exemplo

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type = 'OrgChart';
   data = [
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
         '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
         'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
   ];
   columnNames = ["Name","Manager","Tooltip"];
   options = {   
      allowHtml: true
   };
   width = 550;
   height = 400;
}

Resultado

Verifique o resultado.

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

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

Gráfico de pizza básico.
2 Donut Chart

Gráfico Donut.
3 Gráfico circular 3D

Gráfico de pizza 3D.
4 Gráfico de pizza com fatias explodidas

Gráfico de pizza com fatias explodidas.

Um gráfico sankey é uma ferramenta de visualização e é usado para representar um fluxo de um conjunto de valores para outro. Os objetos conectados são chamados de nós e as conexões são chamadas de links. Sankeys são usados ​​para mostrar um mapeamento muitos para muitos entre dois domínios ou caminhos múltiplos através de um conjunto de estágios.

Sr. Não Tipo / descrição do gráfico
1 Gráfico básico de Sankey

Gráfico básico de Sankey.
2 Gráfico Sankey multinível

Gráfico de Sankey multinível.
3 Customizing Sankey Chart

Gráfico de Sankey personalizado.

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

Já vimos as configurações usadas para desenhar um gráfico no capítulo Google Charts Configuration Syntax . Agora, vamos ver um exemplo de um gráfico de dispersão.

Configurações

Nós usamos ScatterChart classe para mostrar um gráfico de dispersão.

type = 'ScatterChart';

Exemplo

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Age vs Weight';
   type='ScatterChart';
   data = [
      [8,12],
      [4, 5.5],
      [11,14],
      [4,5],
      [3,3.5],
      [6.5,7]
   ];
   columnNames = ['Age', 'Weight'];
   options = {   
   };
   width = 550;
   height = 400;
}

Resultado

Verifique o resultado.

Um gráfico de área em etapas é um gráfico de área com base em etapas. Vamos discutir os seguintes tipos de gráficos de área escalonados.

Sr. Não Tipo / descrição do gráfico
1 Gráfico escalonado básico

Gráfico de área escalonado básico.
2 Gráfico escalonado empilhado

Gráfico de área escalonada empilhada.

O gráfico de tabela ajuda a renderizar uma tabela que pode ser classificada e paginada. As células da tabela podem ser formatadas usando strings de formato ou inserindo HTML diretamente como valores de células. Os valores numéricos são alinhados à direita por padrão; Os valores booleanos são exibidos como marcas de verificação ou cruzadas. Os usuários podem selecionar linhas únicas com o teclado ou o mouse. Os cabeçalhos das colunas podem ser usados ​​para classificação. A linha do cabeçalho permanece fixa durante a rolagem. A tabela dispara eventos correspondentes à interação do usuário.

Já vimos as configurações usadas para desenhar um gráfico no capítulo Google Charts Configuration Syntax . Agora, vamos ver um exemplo de um gráfico de tabela.

Configurações

Nós usamos Table classe para mostrar um gráfico de tabela.

type = 'Table';

Exemplo

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = "";
   type = 'Table';
   data = [
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
   ];
   columnNames = ["Name", "Salary","Full Time Employee"];
   options = { 
     alternatingRowStyle:true,
     showRowNumber:true  
   };
   width = 550;
   height = 400;
}

Resultado

Verifique o resultado.

TreeMap é uma representação visual de uma árvore de dados, onde cada nó pode ter zero ou mais filhos e um pai (exceto para a raiz). Cada nó é exibido como um retângulo, pode ser dimensionado e colorido de acordo com os valores que atribuímos. Os tamanhos e cores são avaliados em relação a todos os outros nós do gráfico. A seguir está um exemplo de um gráfico de mapa de árvore.

Já vimos as configurações usadas para desenhar um gráfico no capítulo Google Charts Configuration Syntax . Agora, vamos ver um exemplo de um gráfico TreeMap.

Configurações

Nós usamos TreeMap classe para mostrar um gráfico TreeMap.

type = 'TreeMap';

Exemplo

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '';
   type='TreeMap';
   data = [
      ["Global",null,0,0],
      ["America","Global",0,0],
      ["Europe","Global",0,0],
      ["Asia","Global",0,0],
      ["Australia","Global",0,0],
      ["Africa","Global",0,0],

      ["USA","America",52,31],
      ["Mexico","America",24,12],
      ["Canada","America",16,-23],

      ["France","Europe",42,-11],
      ["Germany","Europe",31,-2],
      ["Sweden","Europe",22,-13],

      ["China","Asia",36,4],
      ["Japan","Asia",20,-12],
      ["India","Asia",40,63],

      ["Egypt","Africa",21,0],
      ["Congo","Africa",10,12],
      ["Zaire","Africa",8,10],
          
   ];
   columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
   options = { 
      minColor:"#ff7777",
      midColor:'#ffff77',
      maxColor:'#77ff77',
      headerHeight:15,
      showScale:true
   };
   width = 550;
   height = 400;
}

Resultado

Verifique o resultado.