Introdução

Highcharts é uma biblioteca de gráficos JavaScript de nível empresarial baseada em SVG. Ele vem com excelente documentação e inúmeros exemplos. A única desvantagem é que a licença é proprietária. É gratuito para uso pessoal/não comercial, mas você deve pagar por aplicativos comerciais.

Em um artigo anterior , apresentamos Highcharts e 12 tipos de gráficos de line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemape gauge.

Nesse artigo, construímos um ambiente de trabalho para explorar Highcharts usando Create React App . Continuamos a usar o ambiente para experimentar mais tipos de gráfico de bubble, packedbubble, streamgraphe cylinder.

Conforme explicamos naquele artigo, é recomendável incluir as seguintes importações para cada gráfico:

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import _ from 'lodash';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';

• highcharts-react-official: é o wrapper oficial suportado pelo Highcharts para React.
• lodash: é uma biblioteca de utilitários JavaScript moderna que oferece modularidade, desempenho e extras. Como o lodash vem com o Create React App , usamos convenientemente sua função, _.startCase, para colocar cada letra inicial em maiúscula.
• highcharts/modules/exporting: É o módulo de exportação Highcharts que fornece um menu com itens de menu relacionados à exportação para View in full screen, Print chart, Download PNG image, Download JPEG image, Download PDF documente Download SVG vector image.
• highcharts/modules/accessibility: É o módulo de acessibilidade Highcharts que fornece acessibilidade para o HTML do gráfico gerado.

Um gráfico de bolhas é um tipo de gráfico que exibe três dimensões de dados. Cada entidade é codificada em [x, y, z]formato, onde [x, y]especifica a localização e zé o tamanho.

Aqui está o modificado src/App.js:

• Nas linhas 6 e 9, highcharts/highcharts-moreé carregado, o que é necessário para o gráfico de bolhas.
• Nas linhas 12–16, os type, width, e do gráfico heightsão definidos.
• Nas linhas 17–19, o título do gráfico é composto do tipo.
• Nas linhas 20–24, yAxisé configurado com um title.
• Nas linhas 25–35, seriesdefine três conjuntos de pontos de dados (linhas 26–28, linhas 29–31 e linhas 32–34).
• Nas linhas 36–38, os créditos padrão foram desativados.
• Na linha 43, o gráfico de bolhas é criado.

O Gráfico de Bolhas Embaladas

Um gráfico de bolhas empacotadas é um tipo de gráfico de bolhas, com sua localização, [x, y], sendo calculada automaticamente para empacotar as bolhas em um cluster. Em vez do formato, [x, y, z], o gráfico de bolha compactado precisa apenas do zvalor para o tamanho. Utiliza o tamanho e, opcionalmente, a cor para visualizar os dados.

Aqui está o modificado src/App.js:

• Nas linhas 6 e 9, highcharts/highcharts-moreé carregado, o que é necessário para o gráfico de bolha compactado.
• Nas linhas 12–16, os type, width, e do gráfico heightsão definidos.
• Nas linhas 17–19, o título do gráfico é composto do tipo.
• Nas linhas 20–29, o tamanho mínimo da bolha é configurado para 30% e o tamanho máximo da bolha é configurado para 100%. Os rótulos de dados são ativados e o nome do ponto formata cada rótulo.
• Nas linhas 30–111, seriesdefine quatro conjuntos de pontos de dados, A(linhas 33–50), B(linhas 54–75), C(linhas 79–92) e D(linhas 96–109).
• Nas linhas 112–114, os créditos padrão foram desativados.
• Na linha 119, o gráfico de bolha compactado é criado.

O gráfico de bolha compactado tem capacidade de arrastar e soltar, permitindo que um usuário mova uma bolha selecionada entre as séries para verificar como suas relações mudam com o movimento.

O gráfico de fluxo e os gráficos de área

Um gráfico de gráfico de fluxo é um gráfico de área empilhada deslocado em torno de um eixo central, resultando em uma forma fluida e orgânica. Geralmente é usado para exibir volumes compostos em diferentes categorias ou ao longo do tempo.

Aqui está o modificado src/App.js:

• Nas linhas 6 e 9, highcharts/modules/streamgraphé carregado, o que é necessário para o gráfico do gráfico de fluxo.
• Nas linhas 12–16, os type, width, e do gráfico heightsão definidos.
• Nas linhas 17–19, o título do gráfico é composto pelo tipo.
• Nas linhas 20–22, xAxisé definido como seis categorias.
• Nas linhas 23–40, seriesdefine quatro conjuntos de volumes para essas categorias, Group 1(linhas 24–27), Group 2(linhas 28–31), Group 3(linhas 32–35) e Group 4(linhas 36–39).
• Nas linhas 41–43, os créditos padrão foram desativados.
• Na linha 48, o gráfico do gráfico de fluxo é criado.

Para as mesmas opções, altere o tipo para area:

<HighchartsReact highcharts={Highcharts} options={getOptions('area')} />

Adicione plotOptionspara empilhá-los:

plotOptions: {
  area: {
    stacking: 'normal',
  },
}

Altere o tipo para areaspline:

plotOptions: {
  areaspline: {
    stacking: 'normal',
  },
}
...

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('areaspline')} />
  );
}

Ele se parece com o gráfico do gráfico de fluxo?

O gráfico de gráfico de fluxo é exibido em torno de um eixo central, enquanto o gráfico de linhas de área empilhadas é exibido ao longo de xAxis. Caso contrário, eles são semelhantes.

Os gráficos de cilindros e colunas

Um gráfico de cilindro 3D é uma variação de um gráfico de colunas 3D e apresenta pontos cilíndricos.

Aqui está o modificado src/App.js:

• Nas linhas 4 e 8, highcharts/highcharts-3dé carregado, pois o gráfico de cilindro é um gráfico 3D.
• Nas linhas 7 e 11, highcharts/modules/cylinderé carregado, o que é necessário para o gráfico de cilindros.
• Nas linhas 14–18, os type, width, e do gráfico heightsão definidos.
• Nas linhas 19–21, o título do gráfico é composto do tipo.
• Nas linhas 22–24, xAxisé definido como seis categorias.
• Nas linhas 25–42, seriesdefine quatro conjuntos de volumes para essas categorias, Group 1(linhas 26–29), Group 2(linhas 30–33), Group 3(linhas 34–37) e Group 4(linhas 38–41).
• Nas linhas 43–45, os créditos padrão foram desativados.
• Na linha 50, o gráfico de cilindros é criado.

Se você observar com cuidado, ambas as extremidades de cada coluna parecem cilíndricas. Aqui está a visão ampliada:

Altere o tipo para column:

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
  );
}

Ao observar a visualização 2D, as diferenças entre os gráficos de cilindro e coluna são mínimas.

Adicione options3dpara habilitar os gráficos 3D e configurar os ângulos de rotação e profundidade.

chart: {
  type,
  width: 800,
  height: 600,
  options3d: {
    enabled: true,
    alpha: 15,
    beta: 30,
    depth: 300,
  },
}

Aqui está o gráfico de colunas na visualização 3D:

Na visualização 3D, as diferenças entre os gráficos de cilindro e de coluna são óbvias.

O cilindro parece cilíndrico, mas queremos torná-lo mais tridimensional. Colocamos grupos em diferentes profundidades e colocamos cilindros com diferentes diâmetros ( pointWidth).

Aqui está o modificado src/App.js:

• Nas linhas 31–34, zAxisé configurado com os valores mine max.
• Nas linhas 36–41, Group 1define depthcomo 0 e pointWidthcomo 30.
• Nas linhas 42–47, Group 2define depthcomo 100 e pointWidthcomo 20.
• Nas linhas 48–53, Group 3define depthcomo 200 e pointWidthcomo 20.
• Nas linhas 54–59, Group 4define depthcomo 300 e pointWidthcomo 50.

Altere o tipo para column:

function App() {
  return (
    <HighchartsReact highcharts={Highcharts} options={getOptions('column')} />
  );
}

Conclusão

Highcharts é uma biblioteca de gráficos JavaScript de nível empresarial baseada em SVG. Ele vem com excelente documentação e inúmeros exemplos.

Neste artigo, introduzimos tipos de gráfico adicionais de bubble, packedbubble, streamgraphe cylinder.

Também escrevemos artigos sobre outros tipos de Highcharts:

• Neste artigo : line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemape gauge.
• Neste artigo : sankeydiagram, arcdiagram, dependencywheele networkgraph.
• Neste artigo : parallelCoordinates.

Obrigado por ler.

Want to Connect? 

If you are interested, check out my directory of web development articles.