✅ Gráficos interativos com JavaScript e Highcharts

Índice

Highcharts é uma biblioteca escrita em HTML5 e Javascript puro:

Vamos ver como funciona, como está estruturado e como implementar em nosso site.
Estrutura de diretório
Primeiro baixamos o zip que contém nossa biblioteca, descompactamos e podemos ver nosso diretório de arquivos e como está estruturado.

Vamos ver o que cada diretório contém e para que é usado:

index.html: Esta é a página de teste HTML, com ela você pode fazer testes e visualizar as opções padrão.
exemplos: Esta pasta contém todo o código-fonte dos exemplos.
gráficos: Esta pasta contém as imagens usadas nos exemplos.
exportador de servidor: Este é um diretório que contém a função do lado do servidor para exportar os gráficos para uma imagem.
js: Este é o diretório principal do Highcharts. Cada arquivo Javascript possui dois sufixos, o primeiro .src.js é quem contém o código-fonte com comentários nele e o outro .js é a versão minimizada dele.
adaptadores: Aqui estão os plug-ins para poder usar Mootools ou Protótipo como estruturas, dentro deste diretório está o seguinte:

export.js: este arquivo fornece funções para exportar e imprimir.

temas: Esta pasta contém uma série de arquivos Javascript pré-construídos com configurações como cor de fundo, estilos, entre outros. Podemos carregar um desses arquivos nos gráficos para estilos diferentes.

Vendo como esta biblioteca funciona e como está organizada, vamos passar para um exemplo prático de como implementar Highcharts Em nosso site.

Primeiro, incluímos as bibliotecas do Highcharts, bem como as bibliotecas de jQuery para funcionalidade extra:

 Highcharts primeiro exemplo

O gráfico de curvas é definido na especificação do objeto que contém todas as propriedades e as séries de dados.

 var chart = new Highcharts.Chart ({chart: {…}, title: '…'…});

Uma vez criado este objeto, o gráfico é mostrado no navegador, dentro deste objeto existe uma série de opções que explicaremos a seguir.
A instrução renderTo diz ao Highcharts para exibir um gráfico no HTML, especificamente nocom ele id = "contêiner". Opção modelo define o tipo de gráfico, as opções podem ser: área, linha, spline, etc. Neste exemplo, usaremos spline.

 gráfico: {renderTo: 'container', type: 'spline'}

Em seguida, definimos um título e um subtítulo, que aparecerão na parte superior do gráfico.

 título: {text: 'Web browsers …'}, subtítulo: {text: 'From 2008 to present'},

Na opção das categorias na propriedade do xAxis contém uma matriz com os rótulos de cada entrada de dados e com tickIntervals Separamos a forma como essas etiquetas são impressas.

 xAxis: {categorias: ['Jan 2008', 'Fev',…. ], tickInterval: 3},

As opções na propriedade yAxis Eles nos permitem atribuir o título daquele eixo e definir o valor mínimo e máximo no qual limitaremos nosso gráfico.

 yAxis: {title: {text: 'Percentage%'}, min: 0},

A propriedade de plotOptions É quem controla como cada série de dados será exibida dependendo do tipo de gráfico.

 plotOptions: {series: {lineWidth: 2}},

A propriedade série é o centro de todo o objeto de configuração que define os dados que irão alimentar o gráfico.

 série: [{nome: 'Internet Explorer', dados: [54,7, 54,7, 53,9, 54,8, 54,4, …]}, {nome: 'FireFox', dados: [36,4, 36,5, 37,0, 39,1, 39,8, …] }, {

Agora, com todas as partes do código explicadas, vamos ver como ficaria em nosso navegador.

Por fim deixo o código completo para que você possa testá-lo por si mesmo e sem esquecer que pode ser customizado para adaptá-lo a qualquer necessidade.