Biblioteca de gráficos de JavaScript


223

¿Alguien recomendaría una biblioteca de gráficos de JavaScript en particular, específicamente una que no use flash en absoluto?

Respuestas:


160

Hay un número creciente de soluciones de código abierto y comerciales para gráficos de JavaScript puro que no requieren Flash. En esta respuesta solo presentaré las opciones de código abierto.

Hay 2 clases principales de soluciones JavaScript para gráficos que no requieren Flash:

  • Basado en lienzo, renderizado en IE usando ExplorerCanvas que a su vez se basa en VML
  • SVG en navegadores basados ​​en estándares, representados como VML en IE

Hay ventajas y desventajas de ambos enfoques, pero para una biblioteca de gráficos, recomendaría el siguiente porque está bien integrado con DOM, lo que permite manipular elementos de gráficos con el DOM y, lo más importante, configurar eventos DOM. Por el contrario, las bibliotecas de gráficos de Canvas deben reinventar la rueda DOM para gestionar eventos. Entonces, a menos que tenga la intención de construir gráficos estáticos sin manejo de eventos, las soluciones SVG / VML deberían ser mejores.

Para las soluciones SVG / VML hay muchas opciones, que incluyen:

Raphael es una biblioteca gráfica de código abierto muy activa, bien mantenida y madura con muy buena compatibilidad entre navegadores, incluidos IE 6 a 8, Firefox, Opera, Safari, Chrome y Konqueror. Raphael no depende de ningún marco de JavaScript y, por lo tanto, se puede usar con Prototype, jQuery, Dojo, Mootools, etc.

Hay varias bibliotecas de gráficos basadas en Raphael, que incluyen (entre otras):

  • gRaphael , una extensión de la biblioteca gráfica Raphael
  • Ico , con una API intuitiva basada en una sola llamada de función para crear gráficos complejos

Divulgación: soy el desarrollador de uno de los tenedores Ico en github .


55
Grafico e Ico son dos tenedores incompatibles del Ico inicial de Alex Young. Por lo tanto, no es exacto afirmar que Ico se ha convertido en Grafico. Grafico es solo uno de los tenedores.
Jean Vincent

Cabe señalar que Raphael parece que ya no se mantiene. La última confirmación fue en julio de 2010 más o menos.
Alastair Pitts

1
Acabo de descargar gráficos de Rafael, me gusta mucho pero no documentos, solo para advertir.
Orbit

@Alastair: Raphael ahora está patrocinado y desarrollado por Sencha ... o eso dicen :)
Roy Tinker

1
SVG no es compatible con Android anterior a Honeycomb. Si es necesario poder ver los gráficos en una amplia gama de dispositivos Android actuales, tendría que elegir una solución basada en Canvas. Este artículo sobre Sencha Touch Charts entra en más detalles sobre la cartografía móvil en general, y por qué Sencha Touch tomó la ruta del lienzo.
Pallavi Anderson

70

Si está utilizando jQuery, he encontrado que flot es muy bueno; pruebe los ejemplos para ver si se ajustan a sus necesidades, pero he descubierto que hacen la mayor parte de lo que necesito para mi proyecto actual.

Además, ExtJS 4.0 ha introducido un gran conjunto de gráficos, muy poderoso, y está diseñado para trabajar con datos en vivo.


2
Esta es la misma biblioteca que Geoff Dalgas usó para crear el gráfico de reputación aquí en StackOverflow. Realmente es un buen kit.
Charles Roper

Mi única queja real sobre flot es que cuando se procesa en IE se ve terrible en cualquier nivel de zoom que no sea el 100% (es decir, todas las líneas / bloques no se escalan juntas, esto definitivamente es un problema para aquellos de nosotros con pantallas de alta resolución).
Bittercoder

2
Parece que los rotafolios se ven mejor que muchos de los otros que he visto. Aquí hay un enlace a 20 bibliotecas de gráficos de JavaScript: javascript.open-libraries.com/utilities/chart/…
B Seven

También me gusta flot, lo he usado muchas veces en diferentes aplicaciones web antes.
fedmich

1
Me gusta flot en general, pero quiere que todos los datos sean números, por lo que si desea trazar algo como ventas por cliente (por nombre) o por producto, no funcionará
Zachary K

60

¡Visite http://www.highcharts.com !

Highcharts es una biblioteca de gráficos escrita en JavaScript puro, que ofrece una manera fácil de agregar gráficos interactivos a su sitio web o aplicación web. Highcharts actualmente admite los tipos de gráfico de línea, spline, área, spline de áreas, columna, barra, pastel y dispersión.


12
Vale la pena señalar que esta biblioteca es gratuita para uso no comercial, pero cuesta dinero para sitios únicos y sitios múltiples. Sin embargo, parece un precio bastante razonable.
Nick Spacek

Al principio es como un enchufe descarado, ¡pero se ven REALMENTE increíbles! Sin embargo, no es gratis para uso comercial, no tengo referencia si el precio es razonable o no, pero se ven bien de un vistazo.
Trufa

Esta es la misma biblioteca de gráficos utilizada en CloudFlare.com, y se ve realmente genial. Estaba a punto de usar la biblioteca de gráficos DevExpress, que es ASP.NET y representa e imagen en el servidor cuando me topé con la biblioteca de gráficos altos. De inmediato me convencí de que este es el camino a seguir. Cuando descubrí que CloudFlare, que tiene uno de los cuadros de mando / análisis más llamativos que he visto, también lo usa, ¡me vendieron! Actualmente estoy experimentando con él, y funcionó en mi primer intento de insertar un gráfico en mi página web ... ¡así que parece fácil de usar también!
Loudenvier

1
Un voto más para Highcharts. Actualmente lo estoy usando, y es genial. Admite jQuery, Mootools y Prototype, y es muy fácil de configurar y usar.
gnclmorais

1
Stackoverflow en sí usa highcharts stackoverflow.com/users/22656/jon-skeet?tab=reputation
Scott

36

Tal vez no sea exactamente lo que está buscando, pero
la API Chart de Google es bastante genial y fácil de usar.


16
no es javascript
user102008

55
sólo recuerda, Google Chart requiere conexión a Internet y también tiene algunos límites en el número de solicitudes de cliente permitido
fedmich

@ user102008: ahora es :) (aún puede acceder a la antigua API basada en imágenes si lo desea)
Spycho

Google Chart API no se puede usar sin conexión, es malo para el desarrollo móvil.
oldwizard

Necesito hacer un candelabro de tipo horizontal, ¿alguien sabe si es posible con la API de gráficos de Google?
Tom Stickel

15

Hay otra biblioteca de JavaScript basada en SVG. Se llama Protovis y proviene de Stanford Visualization Group

También permite hacer agradables gráficos interactivos y visualizaciones.

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

Aunque es solo para navegadores web modernos

ACTUALIZACIÓN: El equipo de protovis se mudó a otra biblioteca llamada d3.js (Documentos controlados por datos) ya que dijeron:

"El equipo de Protovis ahora está desarrollando una nueva biblioteca de visualización, D3.js, con soporte mejorado para animación e interacción. D3 se basa en muchos de los conceptos de Protovis"

La nueva biblioteca ahora se puede encontrar en:

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

ACTUALIZACIÓN 2:

"Rickshaw" es un kit de herramientas de JavaScript para crear gráficos interactivos de series temporales. Basado en d3.js que simplifica mucho el trabajo con d3.js, aunque es un poco menos potente.

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


Basado en un vistazo rápido, no creo que D3 "reemplace" a Protovis. Yo diría que el equipo "siguió adelante" porque lo ven como algo más interesante y vanguardista.
David J.

14

Recientemente estaba buscando una biblioteca de gráficos de JavaScript y evalué un montón antes de finalmente establecerme en jqplot que se ajustaba muy bien a mis requisitos. Como mencionó la respuesta de Jean Vincent, realmente está eligiendo entre una solución basada en lienzo y una basada en svg.

En mi opinión, los principales pros y contras fueron los siguientes. Las soluciones basadas en SVG como Raphael (y ramificaciones) son excelentes si desea construir gráficos altamente dinámicos / interactivos. O bien, si los requisitos de los gráficos están muy fuera de la norma (por ejemplo, si desea crear algún tipo de gráfico híbrido o se le ocurrió una nueva visualización que nadie más ha pensado aún). La desventaja es la curva de aprendizaje y la cantidad de código que tendrá que escribir. No golpeará gráficos en unos minutos, prepárese para invertir un tiempo de aprendizaje real y luego escribir una buena cantidad de código para producir un gráfico relativamente simple.

Si sus requisitos de gráficos son razonablemente estándar, por ejemplo, si desea algunos gráficos de líneas o barras o quizás un gráfico circular o dos, con interactividad limitada, entonces vale la pena buscar soluciones basadas en lienzo. Apenas habrá una curva de aprendizaje, podrá obtener gráficos básicos en unos minutos, no necesitará escribir mucho código, unas pocas líneas de javascript / jquery básico serán todo lo que necesita. Por supuesto, solo podrá producir los tipos específicos de gráficos que admite la biblioteca, generalmente limitados a varios tipos de líneas, barras y pasteles. Las opciones de interactividad serán extremadamente limitadas, es decir, inexistentes para muchas de las bibliotecas existentes, aunque algunos efectos de desplazamiento limitado son posibles con las mejores.

Fui con JQplot, que es una solución basada en lienzo, ya que realmente solo necesitaba algunos tipos estándar de gráficos. De mi investigación y jugando con las diversas opciones, encontré que era razonablemente completo (si solo buscas los gráficos estándar) y extremadamente fácil de usar, por lo que lo recomendaría si tus requisitos son similares.

Para resumir, gráficos simples y deseados ahora, luego vaya con JQplot. Complejo / diferente y no presionado por el tiempo, entonces ve con Rafael y sus amigos.


14

jqPlot es genial. Si sus requisitos son bastante "normales" y solo desea dibujar algunos gráficos, probablemente esté abrumado por la cantidad de opciones de gráficos js. Asumiendo que no quieres hacer horas de investigación, solo ve con jqPlot, ya que probablemente sea tu mejor opción. Cubre bien la mayoría de los casos de uso para la mayoría de las personas. Algunas de las alternativas están especializadas en cierto tipo de gráfico o construidas con un determinado caso de uso en mente.


Creo que también después de investigar un poco. En este momento, parece una de las mejores bibliotecas de gráficos JS disponibles.
jturcotte

4

Como algún tipo de respuesta tardía, intente d3.js
http://mbostock.github.com/d3/

Es la continuación de protovis.
La gran diferencia de flot está en la cantidad de funciones admitidas.
Aunque flot puede ser más simple, d3.js es definitivamente más poderoso.




3

Recomiendo gRaphaël para gráficos de JavaScript puro junto con la biblioteca de gráficos vectoriales de JavaScript puro en la que se basa ( Raphaël ).

Actualmente, gRaphaël es compatible con Firefox 3.0+, Safari 3.0+, Opera 9.5+ e Internet Explorer 6.0+.


1
solo quiero decir que no hay documentos para esta lib, aunque es muy agradable.
Orbit


3

Otro es RGraph: tablas Javascript y biblioteca de gráficos:

http://www.rgraph.net

Basado en lienzo, por lo que es rápido y hay aproximadamente 20 tipos de gráficos diferentes. ¡Es gratis para uso no comercial también!


2

Mi favorito (flot) ya ha sido mencionado.

Pero asegúrese de investigar Ortho . Es excelente para diagramas de árboles y líneas de tiempo.





2

Acabamos de comprar una licencia de TechOctave Charts Suite para nuestro nuevo inicio. Los recomiendo mucho. La licencia es simple. ¡Los gráficos se ven geniales! Fue fácil comenzar y tiene una API poderosa para cuando la necesitamos. Me sorprendió lo limpio y extensible que es el código. Muy contento con nuestra elección.



1

No es una biblioteca de Javascript, pero puede ser una alternativa adecuada: consulte los Gráficos de Google donde puede generar gráficos pasando datos de cadena de consulta a su servicio web.






0

Puedo recomendar ArcadiaCharts . Una nueva biblioteca de gráficos profesionales para JavaScript y GWT. Se ejecuta en todos los navegadores sin complementos. Fácil y rápido de usar: crea gráficos de gran apariencia con solo unas pocas líneas de código. Gratis para uso no comercial.


Estaba jugando con esto, y noté que no hay forma de obtener una licencia comercial en el sitio web. De hecho, el sitio web no tiene claro si es gratuito o no.
zumalifeguard

Tienes razón. El sitio web ha sido actualizado, para que ahora pueda averiguar fácilmente qué licencia comercial se ajusta a sus requisitos: ArcadiaCharts .
Hoang-Tran Vo


0

En caso de que lo que necesite sea solo un gráfico de barras. Publiqué un código que he estado usando en un proyecto antiguo. Alguien me dijo que la implementación de VML no funciona en las versiones recientes de IE, pero el SVG debería funcionar bien. Podría volver al proyecto y lanzar algunos renderizadores del lado del servidor que ya tengo y tal vez la capa de representación WebGL. Hay un enlace: http://blog.conquex.com/?p=64


0

Probablemente no sea lo que está buscando el OP, pero dado que esta pregunta se ha convertido en una lista de opciones de la biblioteca de gráficos JS: jQuery Sparklines es realmente genial.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.