Um guia simples: como selecionar uma biblioteca de gráficos para usar?

Se você precisar aplicar um gráfico na Web, é realmente normal decidir usar uma biblioteca externa. Na maioria dos casos, é comum escolher uma biblioteca de gráficos de código aberto.

Normalmente, faça muitas pesquisas em diferentes aspectos (benchmark, elaboração de alguma tabela de comparação, etc.) para determinar qual biblioteca usar, mas esses processos semelhantes são feitos repetidamente. Porque nenhuma dessas abordagens não é compartilhada corretamente.

Neste post, quero descrever a abordagem básica sobre como selecionar uma biblioteca de gráficos passo a passo, mas não darei uma recomendada. Porque as necessidades de cada um e os casos de aplicação variam dependendo.

Considere esta publicação como o ponto de partida de sua consideração. :)

Selecionando um tipo gráfico adequado

Basicamente, para implementar um gráfico na Web, dois tipos de gráficos são usados.

  • Bitmap (Tela)
  • Vetor (SVG, VML)

Quais são os critérios para escolher entre bitmap e gráfico vetorial?

Bem, há um excelente artigo sobre isso no MSDN: "SVG vs canvas: como escolher". Altamente recomendado.

A determinação básica da seleção do tipo de gráfico

Bitmap (Tela)

Um exemplo de gráfico em tempo real

Prós

  • É apropriado para a exibição de dados massivos em tempo real (por exemplo, as ferramentas para administração não têm grandes necessidades de design e não há problema com a UI / UX padrão fornecida na biblioteca).

Contras

  • A personalização na UI / UX é bastante difícil.
  • Há limitações de renderização em diferentes tipos de escala de exibição e zoom, devido à natureza do bitmap.

Vetor (SVG)

Um exemplo de diferentes personalizações de UI / UX

Prós

  • Há uma grande flexibilidade na personalização da interface do usuário / UX (tudo é interpretado como nó). Normalmente é adequado para serviços direcionados ao usuário final.
  • Pode manter a mesma qualidade de resolução entre diferentes resoluções, também com zoom.

Contras

  • Talvez não seja adequado exibir grandes conjuntos de dados.

Comparação de bibliotecas de gráficos

Ao pesquisar nas bibliotecas de gráficos, você obtém várias bibliotecas de gráficos diferentes. (uma das listas pode ser encontrada em: https://bestof.js.org/tags/chart)

Bem, todas as bibliotecas têm prós e contras e é bastante difícil avaliar 1: 1, porque todas elas têm características únicas.

Lembre-se: tentei normalizar o máximo possível, mas não posso dizer que seja realmente preciso (solicitando um bom entendimento sobre isso).

A lista

Esta é a lista selecionada de bibliotecas de gráficos a serem comparadas. Eu pensei que estes são os mais populares usados ​​hoje em dia.

  • billboard.js (API / demonstrações)
  • ChartJS (API / Demos)
  • Highcharts (API / demonstrações)
  • C3.js (API / demonstrações)
  • nvd3 (API / demonstrações)
  • chartist (API / Demos)
  • echarts (API / demonstrações)
  • plotly.js (API / demonstrações)
  • Britecharts (API / demonstrações)
  • TauCharts (API / demonstrações)

Tabela de comparação

Clique no link para ver como tabela textual: Tabela de comparação
(1) Estou mudando meus gráficos de nvd3 para billboard.js, pois a documentação da API é muito mais completa.
(3) Os indicadores são medidos em 1º de novembro
Referência:
- npmcharts: comparação de downlaods do npm
- Compare as melhores bibliotecas de gráficos Javascript de 2017

Comparações de interface

Veja o código de geração de cada biblioteca. Isso pode ilustrar a interface e fornecer uma idéia aproximada dos usos.

Alguns são bem diretos, mas alguns são difíceis de entender sem a ajuda da documentação da API.

Fluxograma de seleção

Se você é novo (ou não tem experiência anterior) na aplicação de um gráfico, talvez esse fluxograma possa dar um ponto de partida para qual biblioteca escolher.

Fluxograma de seleção de gráfico

billboard.js?

https://github.com/naver/billboard.js/

billboard.js é uma biblioteca de gráficos e o primeiro lançamento foi em junho de 2017.

Pode ser definido como:

Biblioteca de gráficos JavaScript de interface fácil e reutilizável, com base no D3 v4 +

e dando a alta flexibilidade na personalização.

Características

  • Super fácil de implementar sem curva de aprendizado
  • Interface realmente simples
  • Suporte em ambiente móvel (amigável ao toque)
  • Altamente flexível na personalização: oferece mais de 150 opções e é facilmente estilizado com as propriedades de estilo CSS.
  • Documentos da API organizada e mais de 80 exemplos
  • Tamanho leve (169 KB reduzido)

A situação atual

Desde o primeiro lançamento, há cerca de 5 meses, ele cresceu gradualmente graças às muitas atenções dadas ao billboard.js.

npm Downloads

  • Junho: 370 downloads
  • Julho: 479 downloads (29,4%, aumento em relação ao mês anterior)
  • Agosto: 862 downloads (79,9%, aumento em relação ao mês anterior)
  • Setembro: 1.124 downloads (30,3%, aumento em relação ao mês anterior)
  • Outubro: 1.706 downloads (51,7%, aumento em relação ao mês anterior)
npm-stat.com: medido de 2017-06-08 a 2017-1031

Estrelas do GitHub

As estrelas do GitHub são um dos indicadores fortes e fáceis de determinar a popularidade e o crescimento da biblioteca.

Como você pode ver na imagem abaixo, as estrelas estão aumentando de forma gradual e consistente. Este indicador é a fonte de avançar e conhecer os interesses dos usuários. :)

Histórico de estrelas do GitHub

Qual é o próximo?

Trabalhamos continuamente para criar uma melhor biblioteca de código aberto. Espero que esses esforços sejam úteis e ajudem de alguma forma.

Além disso, estamos aguardando fortemente a participação e as contribuições da comunidade.

Não hesite em participar de um código aberto, porque sempre importa!