Highcharts - Guia rápido

Highchartsé uma biblioteca de gráficos baseada em JavaScript puro destinada a aprimorar os 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 IE 6 legado, o VML é usado para desenhar os gráficos.

Recursos da biblioteca Highcharts

Vamos agora discutir alguns recursos importantes da Biblioteca Highcharts.

  • 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 - A biblioteca principal highcharts.js com tamanho de quase 35 KB, é uma biblioteca extremamente leve.

  • Simple Configurations - Usa json para definir várias configurações dos 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 de um gráfico. Highcharts fornece formatador embutido de dicas de ferramentas ou formatador de retorno de chamada para controlar as dicas de forma programática.

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

  • Export - Exportar gráfico para o formato PDF / PNG / JPG / SVG habilitando o recurso de exportação.

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

  • Zoomablity - Suporta gráfico de zoom para visualizar os dados com mais precisão.

  • 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 Highcharts fornece os seguintes tipos de gráficos -

Sr. Não. Tipo e 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

Scatter Charts

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.

Em nossos capítulos subsequentes, discutiremos cada tipo de gráfico mencionado acima em detalhes com exemplos.

Licença

Highcharts é um código aberto e gratuito para uso não comercial. Para utilizar Highcharts em projetos comerciais, acesse o link - Licença e Preços

Neste capítulo, discutiremos como configurar a biblioteca Highcharts para ser usada no desenvolvimento de aplicativos da web.

Highcharts requer jQuery como dependência. Primeiro, vamos instalar a biblioteca jQuery e depois a biblioteca Highcharts.

Instale jQuery

Existem duas maneiras de usar o jQuery.

  • Download- Baixe-o localmente em jQuery.com e use-o.

  • CDN access- Você também tem acesso a um CDN. O CDN dará a você acesso em todo o mundo a data centers regionais; neste caso, o host do Google. Isso significa que o uso do CDN transfere a responsabilidade de hospedar arquivos de seus próprios servidores para uma série de servidores externos. Isso também oferece a vantagem de que, se o visitante de sua página da web já tiver baixado uma cópia do jQuery do mesmo CDN, não será necessário baixá-la novamente.

Usando o jQuery baixado

Inclua o arquivo jQuery JavaScript na página HTML usando o seguinte script -

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Usando CDN

Estamos usando as versões CDN da biblioteca jQuery ao longo deste tutorial.

Inclua o arquivo jQuery JavaScript na página HTML usando o seguinte script -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Instale Highcharts

A seguir estão as duas maneiras de usar Highcharts.

  • Download - Baixe-o localmente em highcharts.com e usá-lo.

  • CDN access- Você também tem acesso a um CDN. O CDN dará a você acesso em todo o mundo a centros de dados regionais; neste caso, o host Highcharts - Code.Highcharts.Com.

Usando Highcharts baixados

Inclua o arquivo Highcharts JavaScript na página HTML usando o seguinte script -

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Usando CDN

Estamos usando as versões CDN da biblioteca Highcharts ao longo deste tutorial.

Inclua o arquivo Highcharts JavaScript na página HTML usando o seguinte script -

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

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

Etapa 1: Criar página HTML

Crie uma página HTML com as bibliotecas javascript jQuery e Highcharts.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Aqui o container div é usado para conter o gráfico desenhado usando a biblioteca Highcharts.

Etapa 2: Criar configurações

A biblioteca Highcharts usa configurações muito simples usando sintaxe json.

$('#container').highcharts(json);

Aqui json representa os dados e configuração json que a biblioteca Highcharts usa para desenhar um gráfico dentro do div do contêiner usando o método highcharts (). Agora, configuraremos os vários parâmetros para criar a string json necessária.

título

Configure o título do gráfico.

var title = {
   text: 'Monthly Average Temperature'   
};

legenda

Configure a legenda do gráfico.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

Configure o ticker a ser exibido no eixo X.

var xAxis = {
   categories: ['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.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

dica

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

var tooltip = {
   valueSuffix: '\xB0C'
}

lenda

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

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

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.

var 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]
   }
];

Etapa 3: construir os dados json

Combine todas as configurações.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Etapa 4: desenhe o gráfico

$('#container').highcharts(json);

Exemplo

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

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var 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]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

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 Dados carregados Ajax, pontos clicáveis

Gráfico desenhado após recuperar dados do servidor.
4 Séries temporais, com zoom

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

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

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

Gráfico spline com bandas de plotagem.
8 Dados de tempo com intervalos irregulares

Gráfico de um grande conjunto de dados com base no tempo.
9 Eixo logarítmico

Gráfico que descreve o eixo logarítmico.

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.
8 Alcance de área

Gráfico de área usando intervalos.
9 Alcance e linha de área

Gráfico de área usando intervalo e linha.

Os gráficos de barras são usados ​​para desenhar gráficos baseados em áreas. 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 Área Empilhada Negativa

Gráfico de barras com pilha negativa.

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 Coluna com detalhamento

Gráfico de colunas com capacidade de detalhamento.
8 Coluna com posicionamento fixo

Gráfico de colunas com posicionamento fixo.
9 Dados definidos na tabela HTML

Gráfico de colunas usando dados definidos na tabela HTML.
10 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.
4 Donut semicircular

Gráfico Donut semicírculo.
5 Torta com detalhamento

Gráfico de pizza com capacidade de detalhamento.
6 Gráfico de pizza com gradiente

Gráfico de pizza com preenchimento gradiente.
7 Gráfico de pizza com monocromático

Gráfico de pizza com preenchimento monocromático.

Os gráficos de dispersão são usados ​​para desenhar gráficos de dispersão. Nesta seção, discutiremos os diferentes tipos de gráfico (s) com base em dispersão.

Sr. Não. Tipo e descrição do gráfico
1 Gráfico de dispersão

Gráfico de dispersão.

Os gráficos de bolhas são usados ​​para desenhar gráficos baseados em bolhas. Nesta seção, discutiremos os diferentes tipos de gráfico (s) com base em bolhas.

Sr. Não. Tipo e descrição do gráfico
1 Gráfico de bolhas

Gráfico de bolhas.
2 Gráfico de bolhas 3D

Gráfico de bolhas 3D.

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 Coluna 3D com nulo

Gráfico de colunas 3D com valores nulos e 0.
3 Coluna 3D com empilhamento

Gráfico de colunas 3D com empilhamento e agrupamento.
4 3D Pie

Gráfico de pizza 3D.
5 Donut 3D

Gráfico Donut 3D.

Os gráficos de medidores angulares são usados ​​para desenhar gráficos do tipo medidor / medidor. Nesta seção, discutiremos os diferentes tipos de gráficos de medidores angulares.

Sr. Não. Tipo e descrição do gráfico
1 Medidor Angular

Gráfico de medidor angular.
2 Medidor de Sólido

Gráfico de medição sólida.
3 Relógio

Relógio.
4 Medidor com eixos duplos

Gráfico de calibre com eixos duplos.
5 VU Meter

Gráfico do medidor VU.

Os gráficos de mapa de calor são usados ​​para desenhar gráficos do tipo mapa de calor. Nesta seção, discutiremos os diferentes tipos de mapas de calor.

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

Mapa de calor.
2 Grande Mapa de Calor

Grande mapa de calor.

Os gráficos do Mapa de árvore são usados ​​para desenhar gráficos do tipo mapa de árvore. Nesta seção, discutiremos os diferentes tipos de mapas de árvores.

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

Mapa de árvore com eixo de cores.
2 Mapa de árvore com níveis

Mapa de árvore com níveis.
3 Mapa de árvore grande

Mapa de árvore grande.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved