Biblioteca de gráficos JavaScript

223

Alguém recomendaria uma biblioteca de gráficos JavaScript específica - especificamente uma que não use flash?

javascript charts Steve M
fonte

Respostas:

160

Há um número crescente de soluções comerciais e de código aberto para gráficos JavaScript puros que não exigem Flash. Nesta resposta, apresentarei apenas opções de código aberto.

Existem 2 classes principais de soluções JavaScript para gráficos que não requerem Flash:

  • Baseado em canvas, renderizado no IE usando o ExplorerCanvas que, por sua vez, depende do VML
  • SVG em navegadores baseados em padrão, renderizados como VML no IE

Existem prós e contras de ambas as abordagens, mas para uma biblioteca de gráficos eu recomendaria a versão posterior, porque está bem integrada ao DOM, permitindo manipular elementos gráficos com o DOM e, mais importante, configurando eventos DOM. Por outro lado, as bibliotecas de gráficos do Canvas devem reinventar a roda DOM para gerenciar eventos. Portanto, a menos que você pretenda criar gráficos estáticos sem manipulação de eventos, as soluções SVG / VML devem ser melhores.

Para soluções SVG / VML, existem muitas opções, incluindo:

O Raphael é uma biblioteca gráfica de código aberto muito ativa, bem mantida e madura, com muito bom suporte a vários navegadores, incluindo IE 6 a 8, Firefox, Opera, Safari, Chrome e Konqueror. O Raphael não depende de nenhuma estrutura JavaScript e, portanto, pode ser usado com Prototype, jQuery, Dojo, Mootools, etc ...

Há várias bibliotecas de gráficos baseadas no Raphael, incluindo (mas não se limitando a):

  • gRaphael , uma extensão da biblioteca gráfica Raphael
  • Ico , com uma API intuitiva baseada em uma única chamada de função para criar gráficos complexos

Divulgação: Sou desenvolvedor de um dos garfos da Ico no github .

Jean Vincent
fonte
5
Grafico e Ico são dois garfos incompatíveis do Ico inicial de Alex Young. Portanto, não é preciso afirmar que a Ico se tornou Grafico. Grafico sendo apenas um dos garfos.
Jean Vincent
Note-se que Rafael parece não ser mais mantido. O último commit foi em julho de 2010, aproximadamente.
Alastair Pitts
1
Apenas baixei os gráficos do raphael, gostando muito, mas não de documentos, apenas para avisar.
Orbit
@Alastair: Raphael agora é patrocinado e desenvolvido por Sencha ... ou assim eles dizem :)
Roy Tinker
1
O SVG não é suportado no Android anterior ao Honeycomb. Se conseguir visualizar os gráficos em uma ampla variedade de dispositivos Android atuais, é necessário escolher uma solução baseada em Canvas. Este artigo no Sencha Touch Charts entra em mais detalhes sobre gráficos para dispositivos móveis em geral e por que o Sencha Touch seguiu a rota do Canvas.
Pallavi Anderson
70

Se você estiver usando o jQuery, achei o flot muito bom - experimente os exemplos para ver se eles atendem às suas necessidades, mas achei que eles fazem a maior parte do necessário para o meu projeto atual.

Além disso, o ExtJS 4.0 introduziu um ótimo conjunto de gráficos - muito poderoso e foi projetado para trabalhar com dados ao vivo.

Bittercoder
fonte
2
Essa é a mesma biblioteca que Geoff Dalgas usou para criar o gráfico de reputação aqui no StackOverflow. É realmente um bom pedaço de kit.
Charles Roper
Minha única reclamação real sobre flot é que, ao renderizar no IE, parece terrível em qualquer nível de zoom que não seja 100% (ou seja, todas as linhas / blocos não escalam juntos - esse é definitivamente um problema para aqueles que exibem telas de alta resolução).
Bittercoder
2
Parece que os gráficos de flot parecem mais agradáveis ​​do que muitos dos outros. Aqui está um link para 20 bibliotecas de gráficos JavaScript: javascript.open-libraries.com/utilities/chart/…
B Seven
Eu também gosto de flot, já usei isso muitas vezes em diferentes aplicativos da web antes.
precisa saber é
1
I como flot em geral, mas ele quer que todos os dados sejam números, por isso, se você quiser trama algo como vendas por cliente (por nome) ou por produto não vai funcionar
Zachary K
60

Confira http://www.highcharts.com !

O Highcharts é uma biblioteca de gráficos escrita em JavaScript puro, oferecendo uma maneira fácil de adicionar gráficos interativos ao seu site ou aplicativo. Atualmente, o Highcharts suporta os tipos de gráfico de linhas, splines, áreas, áreas, colunas, barras, torta e gráficos de dispersão.

Torstein Hønsi
fonte
12
Vale ressaltar que esta biblioteca é gratuita para uso não comercial, mas custa dinheiro para sites únicos e múltiplos sites. Parece um preço bastante razoável no entanto.
Nick Spacek
No início, como um plugue descarado, mas eles parecem realmente incríveis! Porém, não é gratuito para uso comercial, não tenho nenhuma referência se o preço é razoável ou não, mas eles parecem bem à primeira vista!
Trufa
Essa é a mesma biblioteca de gráficos usada no CloudFlare.com e parece realmente ótima. Eu estava prestes a usar a biblioteca de gráficos DevExpress, que é ASP.NET e renderiza e imagem no servidor, quando me deparei com a biblioteca de altos gráficos. Fiquei convencido de uma vez que este é o caminho a percorrer. Quando descobri que o CloudFlare, que possui um dos painéis / análises mais atraentes que eu já vi, também o usa, fui vendido! Atualmente, estou fazendo experiências com ele, e funcionou na minha primeira tentativa de incorporar um gráfico na minha página da Web ... por isso parece fácil de usar também!
Loudenvier
1
Mais um voto para Highcharts. Atualmente, estou usando, e é ótimo. Suporta jQuery, Mootools e Prototype, e é muito fácil de configurar e usar.
Gnclmorais
1
StackOverflow si usa Highcharts stackoverflow.com/users/22656/jon-skeet?tab=reputation
Scott
36

Talvez não seja exatamente o que você está procurando, mas
a API de gráficos do Google é muito legal e fácil de usar.

Jan Gressmann
fonte
16
Não é javascript
user102008
5
lembre-se, o Google Chart requer conexão com a internet e também tem alguns limites sobre o número de pedidos de clientes permitiu
fedmich
@ user102008: é agora :) (Você ainda pode acessar a antiga API baseada em imagem se você quiser)
Spycho
A API do Google Chart não pode ser usada offline, ruim para o desenvolvimento para dispositivos móveis.
oldwizard
Eu preciso fazer um castiçal do tipo horizontal, alguém sabe se é possível com a API do Google Chart?
precisa
15

Existe outra biblioteca javascript baseada em SVG. É chamado Protovis e vem do Stanford Visualization Group

Também permite fazer ótimos gráficos e visualizações interativos.

http://vis.stanford.edu/protovis/ex/

Embora seja apenas para navegadores modernos

ATUALIZAÇÃO: A equipe do protovis mudou-se para outra biblioteca chamada d3.js. (Data Driven Documents) como eles disseram:

"A equipe do Protovis agora está desenvolvendo uma nova biblioteca de visualização, o D3.js., com suporte aprimorado para animação e interação. O D3 se baseia em muitos dos conceitos do Protovis"

A nova biblioteca agora pode ser encontrada em:

http://mbostock.github.com/d3/

ATUALIZAÇÃO 2:

"Rickshaw" é um kit de ferramentas JavaScript para criar gráficos interativos de séries temporais. Baseado no d3.js, que simplifica bastante o trabalho com o d3.js, embora seja um pouco menos poderoso.

http://code.shutterstock.com/rickshaw/

Fgblanch
fonte
Baseado em uma rápida olhada, não acho que o D3 "substitua" o Protovis. Eu diria que a equipe "seguiu em frente" porque a vê como mais interessante e inovadora.
David J.
14

Recentemente, eu estava procurando por uma biblioteca de gráficos javascript e avaliei um monte antes de finalmente optar pelo jqplot que se encaixava muito bem nos meus requisitos. Como a resposta de Jean Vincent mencionou, você está realmente escolhendo entre soluções baseadas em tela e svg.

A meu ver, os principais prós e contras eram os seguintes. As soluções baseadas em SVG, como Raphael (e ramificações), são ótimas se você deseja criar gráficos altamente dinâmicos / interativos. Ou se os requisitos de gráficos estão muito fora da norma (por exemplo, você deseja criar algum tipo de gráfico híbrido ou criou uma nova visualização que ninguém mais pensou ainda). A desvantagem é a curva de aprendizado e a quantidade de código que você precisará escrever. Você não estará distribuindo gráficos em alguns minutos, esteja preparado para investir algum tempo real de aprendizado e depois escrever uma boa quantidade de código para produzir um gráfico relativamente simples.

Se seus requisitos de criação de gráficos são razoavelmente padrão, por exemplo, você deseja alguns gráficos de linhas ou barras ou talvez um gráfico de pizza ou dois, com interatividade limitada, vale a pena procurar soluções baseadas em tela. Não haverá praticamente nenhuma curva de aprendizado; você poderá obter gráficos básicos em alguns minutos, não precisará escrever muito código, serão necessárias apenas algumas linhas de javascript / jquery básico. Obviamente, você só poderá produzir os tipos específicos de gráficos que a biblioteca suporta, geralmente limitados a vários tipos de linha, barra, torta. As opções de interatividade serão extremamente limitadas, ou seja, inexistentes para muitas das bibliotecas existentes, embora alguns efeitos de foco limitados sejam possíveis com os melhores.

Eu fui com o JQplot, que é uma solução baseada em tela, pois eu realmente só precisava de alguns tipos padrão de gráficos. Nas minhas pesquisas e nas várias opções, achei que ele era razoavelmente completo (se você está apenas atrás dos gráficos padrão) e extremamente fácil de usar, então eu o recomendaria se seus requisitos fossem semelhantes.

Para resumir, simples e deseja gráficos agora, vá com o JQplot. Complexo / diferente e não pressionado pelo tempo, vá com Raphael e amigos.

skorks
fonte
14

O jqPlot é ótimo. Se seus requisitos são razoavelmente "normais" e você apenas deseja desenhar alguns gráficos, provavelmente ficará impressionado com a quantidade de opções de gráficos js. Supondo que você não queira fazer horas de pesquisa, basta ir com o jqPlot, pois provavelmente é sua melhor aposta. Abrange a maioria dos casos de uso para a maioria das pessoas. Algumas das alternativas são especializadas em um determinado tipo de gráfico ou construídas com um certo caso de uso em mente.

Fletch
fonte
Acho que sim depois de fazer algumas pesquisas. No momento, parece uma das melhores bibliotecas de gráficos JS gratuitas disponíveis.
Jturcotte
4

Como algum tipo de resposta tardia, tente d3.js
http://mbostock.github.com/d3/

É a continuação do protovis.
A grande diferença é o número de recursos suportados.
Embora o flot possa ser mais simples, o d3.js é definitivamente mais poderoso.

Stefan Steiger
fonte
3

Flotr é outra biblioteca de gráficos Javascript pura, baseada em Prototype e inspirada no Flot

Argelbargel
fonte
3

Experimente o PlotKit

Jason Bunting
fonte
3

Eu recomendaria o gRaphaël para gráficos JavaScript puros, juntamente com a biblioteca de gráficos vetoriais JavaScript puros em que foi construída ( Raphaël ).

O gRaphaël atualmente suporta Firefox 3.0+, Safari 3.0+, Opera 9.5+ e Internet Explorer 6.0+.

Peter McG
fonte
1
só quero dizer que não há documentos para esta biblioteca, embora seja muito bom.
Orbit
3

Outra é RGraph: gráficos Javascript e biblioteca de gráficos:

http://www.rgraph.net

Com base em tela, é rápido e existem aproximadamente 20 tipos diferentes de gráficos. Também é gratuito para uso não comercial!

Richard
fonte
2

Meu favorito (flot) já foi mencionado.

Mas não deixe de investigar o Ortho . É excelente para gráficos e cronogramas de árvores.

Rui Vieira
fonte
2

Acabamos de comprar uma licença do TechOctave Charts Suite para nossa nova inicialização. Eu recomendo eles. Licenciar é simples. Os gráficos estão ótimos! Foi fácil começar e tem uma API poderosa para quando precisamos dela. Fiquei chocado com o quão limpo e extensível o código é. Muito feliz com a nossa escolha.

Aaron Reis
fonte
1

Não é uma biblioteca Javascript, mas pode ser uma alternativa adequada. Confira o Google Charts, onde você pode gerar gráficos passando dados da string de consulta para o serviço da Web.

Luke Bennett
fonte
1

Dê uma olhada no Bluff . É uma porta JavaScript da biblioteca de gráficos Gruff para Ruby.

John Topley
fonte
1

Protochart é tudo que você precisa

Vince Panuccio
fonte
1

A Sencha adquiriu o Raphael e agora seus gráficos são javascript puro a partir da versão 4. Emprise e HighCharts mencionados acima são meus dois favoritos.

http://www.sencha.com/

Justin Thomas
fonte
0

Eu posso recomendar ArcadiaCharts . Uma nova biblioteca profissional de gráficos para JavaScript e GWT. É executado em todos os navegadores sem plugins. Fácil e rápido de usar: cria excelentes gráficos com apenas algumas linhas de código. Grátis para uso não comercial.

Hoang-Tran Vo
fonte
Eu estava brincando com isso e percebi que não havia como obter uma licença comercial no site. De fato, o site não está claro se é gratuito ou não.
Zumalifeguard
Você está certo. O site foi atualizado para que você possa descobrir facilmente qual licença comercial se adapta aos seus requisitos: ArcadiaCharts .
Hoang-Tran Vo
0

O Fusion charts possui uma nova biblioteca javascript / jquery que parece promissora.

amurra
fonte
0

Caso você precise apenas de gráfico de barras. Publiquei algum código que venho usando em um projeto antigo. Alguém me disse que a implementação do VML está quebrada nas versões recentes do IE, mas o SVG deve funcionar bem. Pode estar voltando ao projeto e liberar alguns renderizadores do servidor que eu já tenho e talvez a camada de renderização WebGL. Há um link: http://blog.conquex.com/?p=64

Ivan Mishonov
fonte
0

Provavelmente não é o que o OP está procurando, mas desde que essa pergunta se tornou uma lista de opções da biblioteca de gráficos JS: o jQuery Sparklines é muito legal.

Fletch
fonte