9 bibliotecas Javascript para construir gráficos interativos
Então você tem em sua mão toneladas de dados, com um número de variáveis, que você tem que de alguma forma retransmitir para outra pessoa. Dados brutos e não organizados serão difíceis para eles entenderem. É por isso que você precisa de ajuda dos gráficos. Em web design, gráficos são uma das melhores ferramentas para visualização de dados. É fácil de ler, fácil para os olhos e relativamente fácil de configurar.
Mas vamos levar as coisas um entalhe: vamos adicione animação e interatividade a esses gráficos, para que os leitores possam não apenas aprender algo novo no gráfico, mas também brincar com ele. É realmente mais fácil do que parece, graças a várias bibliotecas JS por aí. Vamos dar uma olhada.
1. Gráfico JS
Chart.js é uma biblioteca sem dependência para criar gráficos em 6 tipos diferentes: gráficos de linhas, gráficos de barras, gráficos de radar, gráficos de área polar, gráficos de torta e rosquinhas. A biblioteca também é dividida de acordo com o tipo de gráfico para que suas páginas não fiquem sobrecarregadas com o que não é necessário. Ele suporta design responsivo e você pode alterar facilmente variáveis como cor ou animação para personalizar a interface do gráfico.
2. Chartist JS
JS de Chartist é uma ótima biblioteca para criar gráficos responsivos que fazem uso do SVG. Além de sua capacidade de resposta, o Chartist oferece flexibilidade ao usar uma separação clara de interesses: estilo com CSS e controle com JS. Para facilitar a personalização, os arquivos SASS estão incluídos. O melhor de tudo é que você tem opções ilimitadas para animar seu gráfico usando a API de animação do Chartist, SMIL, que oferece opções adicionais de animação.
3. C3 JS
C3 JS é uma biblioteca para construir gráficos baseados em D3 JS. Ele envolve o código necessário para criar gráficos com o D3 JS, para que você possa ignorar a gravação do código D3 e apenas inserir seus dados. O C3 vem com uma variedade de APIs que você pode usar para controlar seus gráficos facilmente. Para personalizar seu gráfico, defina seus próprios estilos personalizados para as classes CSS fornecidas. Crie gráficos a partir de gráficos de linhas simples para avaliar gráficos. Confira esta página para ver como funciona a biblioteca.
4. Flot
Flot é um jQuery plguin para criar gráficos com elementos interativos como ligar ou desligar uma série, interações de ponto de dados, panning, zoom e muito mais. Flot vem com uma variedade de opções de tipo de gráfico e se você quiser mais habilidade em seu gráfico, aqui estão alguns plugins que você pode usar também. Os gráficos funcionarão bem com navegadores que suportam telas HTML.
5. EChart
Echart é uma biblioteca incrivelmente abrangente da China que suporta vários tipos de gráficos, pode processar big data (plotagem de até 200.000 pontos de dados em um gráfico cartesiano), tem escala de roaming, a capacidade de extrair, integrar e trocar dados entre vários gráficos, permitindo um para mudar facilmente de um tipo de dados para outro, e muito mais.
6. Peity
Peity irá adicionar um mini gráfico à sua página web. É um pequeno plugin jQuery que transforma um elemento em um mini svg linha, barra, rosca ou gráfico de pizza. Você só precisa criar um elemento e dar um valor como 1/5 e faça uma ligação peity ('pie') sobre esse elemento para fazer um mini gráfico de pizza. Por exemplo, para criar um gráfico de rosca que tenha apenas um quinto de destaque, aqui está o HTML:
1/5
Você pode personalizar a cor do gráfico, raio, largura e altura, mas por padrão é exibido em tamanho pequeno.
7. DC JS
DC JS tem semelhanças com o C3 JS em termos de motor usado; ambos usam a biblioteca D3 para renderizar gráficos no SVG. O DC JS é criado para ajudar você a visualizar dados e análises para navegadores e dispositivos móveis. Uma vez que aproveita o D3 JS, ele permite que você adicione a interação do usuário ao seu gráfico. O DC JS é uma poderosa biblioteca para criar gráficos de simples a complexidades altas.
8. Gráfico do Google
Você pode criar gráficos interativos e ferramentas de dados usando a API de visualização do Google por meio do Google Chart. Há galerias de gráfico para verificar os recursos de visualização de dados do Google Chart. Para começar, incorpore um simples JavaScript à sua página da Web para carregar as bibliotecas do Google Chart que você precisa. Em seguida, liste os dados que você deseja criar e faça algumas personalizações por meio das opções de gráfico. Finalmente, crie um objeto de gráfico com um id e, em sua página da Web, crie um NVD3 é um conjunto de gráficos reutilizáveis e componentes de gráficos criados com o D3 JS. Essa biblioteca é, portanto, um "modelo" que ajudará a facilitar a criação de gráficos. Confira os muitos gráficos de amostra criados com o NVD3 aqui.
9. NVD3
Agora leia: Bibliotecas JavaScript para criar mapas interativos e personalizados
