style graficas change attribute javascript charts

graficas - Biblioteca de gráficos de JavaScript



title css (29)

Acabamos de comprar una licencia de TechOctave Charts Suite para nuestro nuevo inicio. Los recomiendo altamente La concesión de licencias es simple. Gráficos se ven muy bien! Fue fácil de comenzar y tiene una API potente para cuando la necesitamos. Me sorprendió lo limpio y extensible que es el código. Realmente feliz con nuestra elección.

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


Como respuesta tardía, intente d3.js
http://mbostock.github.com/d3/

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



Echa un vistazo a Bluff . Es un puerto JavaScript de la biblioteca de gráficos Gruff para Ruby.


Echa un vistazo a 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. Actualmente, Highcharts admite los tipos de líneas, splines, áreas, líneas de áreas, columnas, barras, sectores y gráficos de dispersión.



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


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

Hay 2 clases principales de soluciones de 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

Existen ventajas y desventajas de ambos enfoques, pero para una biblioteca de gráficos lo recomendaría más adelante porque está bien integrado con DOM, lo que permite manipular elementos de gráficos con el DOM y, lo que es más importante, establecer eventos DOM. Por el contrario, las bibliotecas de gráficos de lienzo deben reinventar la rueda DOM para gestionar eventos. Entonces, a menos que intente crear gráficos estáticos sin manejo de eventos, las soluciones SVG / VML deberían ser mejores.

Para las soluciones SVG / VML hay muchas opciones, incluyendo:

Raphael es una biblioteca gráfica de código abierto muy activa, bien mantenida y madura, con muy buena compatibilidad con varios 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, puede utilizarse con Prototype, jQuery, Dojo, Mootools, etc.

Hay una serie de bibliotecas de gráficos basadas en Raphael, que incluyen (pero no se limitan a):

  • gRaphael , una extensión de la biblioteca gráfica de 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 Ico .


Hace poco estuve buscando una biblioteca de gráficos de javascript y evalué un montón antes de jqplot por jqplot que se adaptaba muy bien a mis necesidades. Como mencionó la respuesta de Jean Vincent, realmente está eligiendo entre soluciones basadas en lienzos y basadas en svg.

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

Si sus requisitos de creación de gráficos son razonablemente estándar, por ejemplo, si desea algunos gráficos de líneas o de barras o quizás uno o dos gráficos circulares, con interactividad limitada, vale la pena buscar soluciones basadas en lienzos. No habrá casi ninguna curva de aprendizaje, podrá obtener gráficos básicos en pocos minutos, no necesitará escribir muchos códigos, solo necesitará unas pocas líneas de javascript / jquery básico. Por supuesto, solo podrá producir los tipos específicos de gráficos que admite la biblioteca, generalmente limitados a varios tipos de línea, barra, pastel. Las opciones de interactividad serán extremadamente limitadas, es decir, inexistentes para muchas de las bibliotecas existentes, aunque es posible que existan efectos limitados de desplazamiento con los mejores.

Fui con JQplot, que es una solución basada en lienzo, ya que solo necesitaba algunos tipos estándar de gráficos. A partir de mi investigación y las distintas opciones, encontré que tenía características razonablemente completas (si solo está buscando los gráficos estándar) y es extremadamente fácil de usar, por lo que lo recomendaría si sus requisitos son similares.

Para resumir, simplificar y desear gráficos ahora, vaya con JQplot. Complejo / diferente y no presionado por el tiempo, entonces ve con Raphael y amigos.



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

También permite hacer bonitos 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 ha movido a otra biblioteca llamada d3.js (Data Driven Documents) como dijeron:

"El equipo de Protovis ahora está desarrollando una nueva biblioteca de visualización, D3.js, con soporte mejorado para la animación y la 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 conjunto de herramientas de JavaScript para crear gráficos interactivos de series de tiempo. Basado en d3.js que simplifica mucho el trabajo con d3.js aunque es un poco menos poderoso.

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


Mi favorito (flot) ya ha sido mencionado.

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


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


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

http://www.rgraph.net

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



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


Protochart es todo lo que necesitas




Quizás no sea exactamente lo que estás buscando, pero
Chart API de Google es bastante bueno y fácil de usar.


Sencha adquirió Raphael y ahora sus gráficos son javascript puro a partir de la versión 4. Emprise y HighCharts mencionados anteriormente son mis dos favoritos.

http://www.sencha.com/


Si está utilizando jQuery, me parece que flot es muy bueno; pruebe los examples para ver si se ajustan a sus necesidades, pero he encontrado 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 potente y está diseñado para trabajar con datos en vivo.



Flotr es otra biblioteca de gráficos de Javascript pura basada en Prototype e inspirada en flot


Fusion charts tiene una nueva biblioteca de javascript / jquery que parece prometedora.


jqplot es genial. Si sus requisitos son bastante "normales" y solo desea dibujar algunos gráficos, probablemente se verá abrumado por la cantidad de opciones de gráficos de js. Suponiendo que no quiera hacer horas de investigación, simplemente vaya con jqPlot ya que probablemente sea su mejor apuesta. Cubre la mayoría de los casos de uso para la mayoría de las personas también. Algunas de las alternativas se especializan en un determinado tipo de gráfico o se construyen con un cierto caso de uso en mente.


Puedo recomendar ArcadiaCharts . Una nueva biblioteca de gráficos profesionales para JavaScript y GWT. Se ejecuta en todos los navegadores sin plugins. 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.


Recomiendo gRaphael para la gRaphael de gráficos de JavaScript puro junto con la biblioteca de gráficos vectoriales de JavaScript puro en la que se basa ( Raphael ).

gRaphaël actualmente admite Firefox 3.0+, Safari 3.0+, Opera 9.5+ e Internet Explorer 6.0+.