Gráfico de pizza com jQuery


93

Eu quero criar um gráfico de pizza em JavaScript. Ao pesquisar, encontrei a API Google Charts. Como estamos usando jQuery, descobri que há integração jQuery para gráficos do Google disponível.

Mas meu problema é que os dados reais são enviados ao servidor do Google para a criação dos gráficos. Existe uma maneira de evitar que os dados sejam enviados ao Google? Estou preocupado em enviar meus dados a terceiros.

Respostas:


48

jqPlot parece muito bom e é de código aberto.

Aqui está um link para os exemplos mais impressionantes e atualizados do jqPlot .


nota: na maioria das versões (recentes também no momento) está usando uma $ reference fora de uma declaração (function ($) ..), então pode entrar em conflito com o protótipo ou qualquer outra coisa
Mario Peshev

99

Flot

Limitações: linhas, pontos, áreas preenchidas, barras, pizza e combinações destes

De uma perspectiva de interação, o Flot irá levá-lo o mais perto possível dos gráficos em Flash jQuery. Embora a saída do gráfico seja bastante elegante e de boa aparência, você também pode interagir com os pontos de dados. O que quero dizer com isso é que você pode ter a capacidade de passar o mouse sobre um ponto de dados e obter feedback visual sobre o valor desse ponto no gráfico.

A versão tronco do flot oferece suporte a gráficos de pizza.

Capacidade de zoom flutuante.

Além disso, você também tem a capacidade de selecionar uma parte do gráfico para obter os dados de uma “zona” específica. Como recurso secundário a esse “zoneamento”, você também pode selecionar uma área em um gráfico e ampliar para ver os pontos de dados um pouco mais de perto. Muito legal .


Minigráficos

Limitações: torta, linha, barra, combinação

Sparklines é minha miniferramenta gráfica favorita lá fora. Realmente ótimo para gráficos de estilo de painel (pense em painel do Google Analytics na próxima vez que você fizer login). Por serem tão pequenos, podem ser incluídos em linha (como no exemplo acima). Outra boa ideia que pode ser usada em todos os plug-ins gráficos são os recursos de auto-atualização. Sua demonstração Mouse-Speed ​​mostra o poder dos gráficos ao vivo no seu melhor.


Gráfico de consulta 0,21

Limitações: Área, Linha, Barra e combinações destes

jQuery Chart 0.21 não é o plugin de gráficos mais bonito que existe, tem que ser dito. É bastante básico em termos de funcionalidade quando se trata de gráficos que pode manipular, no entanto, pode ser flexível se você investir algum tempo e esforço nisso.

Adicionar valores a um gráfico é relativamente simples:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Limitações: barra, linha

jQchart é estranho, eles incorporaram transições de animação e funcionalidade de arrastar / soltar no gráfico, no entanto, é um pouco desajeitado - e aparentemente sem sentido. Ele gera gráficos de boa aparência se você fizer a CSSconfiguração certa, mas existem melhores por aí.


TufteGraph

Limitações: Barra e Barra Empilhada

O Tuftegraph se vende como “lindos gráficos de barras que você mostraria para sua mãe”. Chega perto, Flot é mais bonito, mas Tufte se presta para ser muito leve. Embora isso venha com restrições - há poucas opções de escolha, então você recebe o que é dado. Confira um gráfico de barras de ganho rápido.


Obrigado pela sua resposta. Estou verificando o jqPlot agora, parece que ele resolveu meu problema. Mas ainda resta um problema, preciso que as legendas do gráfico apareçam no gráfico e não fora dele.
Arun P Johny

7
Sempre que vejo uma boa lista como esta, fico desejando que cada item seja uma resposta separada para que possam ser votados de forma independente. Seria muito mais eficiente simplesmente usar a biblioteca com a pontuação mais alta.
Jesse Aldridge de

2
Chiming aqui como alguém que usou Flot e descobriu que ele é uma boa libera sólida.
Brighid McDonnell

grr tentei flot, mas abandonei-o porque não conseguia personalizar os rótulos dos eixos
chiliNUT

Sorantis, o link para o Gráfico de consulta 0.21 está morto.
jawo

5

Toneladas de ótimas sugestões aqui, apenas para jogar ZingChart na pilha para uma boa medida. Recentemente, lançamos um wrapper jQuery para a biblioteca que torna ainda mais fácil construir e personalizar gráficos. Os links do CDN estão na demonstração abaixo.

Estou na equipe ZingChart e estamos aqui para responder a quaisquer perguntas que qualquer um de vocês possa ter!


4

Alguns outros que não foram mencionados:

Para mini tortas, linhas e barras, Peity é brilhante, simples, pequeno, rápido, usa uma marcação realmente elegante.

Não tenho certeza de sua relação com Flot (dado o nome), mas Flotr2 é muito bom, certamente faz tortas melhores do que Flot.

Bluff produz gráficos de linhas bonitos, mas tive alguns problemas com suas tortas.

Não o que eu estava procurando, mas outro produto comercial (muito parecido com Highcharts) é o TeeChart .


4

Chart.js é bastante útil, suportando vários outros tipos de gráficos também.

Ele pode ser usado com ou sem jQuery.


1
Excelente biblioteca de gráficos de pizza. Eu uso charts.js para gráficos de pizza e morris.js para todo o resto. morris.js é fantástico, exceto por aqueles gráficos f! & * # donut estúpidos. Quando eu quero um gráfico de pizza real sem um buraco de rosca! ^ & * @ Nele, não procuro além do chart.js. Charts.js é provavelmente uma ótima solução para outros tipos de gráficos também, mas você simplesmente não pode bater a API incrivelmente fácil de usar intencionalmente de morris.js
chiliNUT

3

Há um novo jogador em campo, oferecendo gráficos de navegação avançados que usam o Canvas para animações e desempenho super suaves:

https://zoomcharts.com/

Exemplo de gráficos:

gráfico de pizza interativo

Documentação: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

O que é legal sobre essa biblioteca:

  • Outras fatias podem ser expandidas
  • O Pie oferece detalhamento para estruturas hierárquicas (ver exemplo)
  • escreva seu próprio controlador de fonte de dados facilmente ou forneça um arquivo json simples
  • exportar imagens de alta resolução fora da caixa
  • suporte total ao toque , funciona perfeitamente no iPad, iPhone, Android, etc.

insira a descrição da imagem aqui

Os gráficos são gratuitos para uso não comercial, licenças comerciais e suporte técnico também estão disponíveis.

Também há gráficos de tempo e gráficos de rede interativos para você usar. insira a descrição da imagem aqui

insira a descrição da imagem aqui

Os gráficos vêm com API e configurações abrangentes, para que você possa controlar todos os aspectos dos gráficos.


O que você quer dizer? Já temos um recurso de recorte de imagens integrado.
jancha de

0

Verifique o TeeChart para Javascript

  • Grátis para uso não comercial.

  • Inclui plug-ins para jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc ...

  • Demonstrações interativas aqui e aqui .

  • Algumas capturas de tela de algumas das demonstrações:

TeeChart Javascript - Barras

TeeChart Javascript - Torta

Javascript do TeeChart - Pontos

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.