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.

↰ Previous page