Biblioteca de Javascript para la creación de diagramas?

Question

Qué biblioteca de JavaScript (gratuita o comercial) puede construir diagramas de red informática o diagramas eléctricos. También, que soporta animaciones entre los diferentes elementos de los diagramas, etc.

Gracias.

tablas

Answer 1

Echa un vistazo a estas tres bibliotecas y ver si pueden ayudarle a cabo:

Raphael

Raphaël es una pequeña biblioteca JavaScript que debería simplificar su trabajo con gráficos vectoriales en la web. Si desea crear su propia carta o imagen cultivo específico y girar flash, para ejemplo, se puede lograr de forma sencilla y fácilmente con esta biblioteca. Raphaël [ 'ræfeɪəl] utiliza la Recomendación W3C SVG y VML como una base para la creación de gráficos . Esto significa que cada objeto gráfico se crea también un objeto DOM , para que pueda conectar controladores de eventos de JavaScript o modificar más tarde. El objetivo de Raphaël es proporcionar un adaptador que hará dibujo vectorial arte compatibles multi-navegador y fácil.

Protovis

Protovis Compone vistas personalizadas de datos con marcas simples, tales como bares y puntos. A diferencia de gráficos de bajo nivel bibliotecas que rápidamente llegar a ser tedioso para la visualización, Protovis define marcas a través de las propiedades dinámicas que codificar datos, lo que permite la herencia, escalas y diseños para simplificar construcción. Protovis es gratuito y de código abierto, provisto bajo la licencia BSD . Utiliza JavaScript y SVG para visualizaciones nativas de la web; no se requiere el complemento (aunque necesitará un navegador web moderno). Aunque experiencia en programación es muy útil, sobre todo Protovis es declarativa y diseñados para ser aprendida por ejemplo.

Processingjs

Processing.js es el proyecto de la hermana de lo visual lenguaje de programación Processing popular, diseñado para el web. Tratamiento.js hace que sus datos visualizaciones, arte digital, animaciones interactivas, educativos gráficos, videojuegos, etc. funcionan usando estándares web y sin ninguna plug-ins. Usted escribe el código usando el lenguaje de procesamiento , lo incluye en su página web, y Processing.js hace el resto. No es magia, pero casi.

Originalmente desarrollado por Ben Fry y Casey Reas, producción comenzó como un lenguaje de programación de código abierto basado en Java para ayudar a las artes electrónicas y comunidades de diseño visual aprenden los conceptos básicos de la programación informática en un contexto visual. Processing.js lleva al siguiente nivel, permitiendo que código de procesamiento sea ejecutado por cualquier navegador compatible HTML5 , incluidas las versiones actuales de Firefox, Safari, Chrome, Opera e Internet Explorer. Processing.js trae lo mejor de la programación visual a la web, ambos para procesamiento y desarrolladores web.

Answer 2

1. Google: http://code.google.com/intl/uk/apis/chart/
2. Dojo: http://dojotoolkit.org/grids-charts
3. ExtJS: http://www.sencha.com/products/extjs/examples/#sample-3

Answer 3

probar la aplicación gratuita en línea para los diagramas de dibujo, draw.io. Utiliza la biblioteca mxGraph para dibujar diagramas.

responsabilidad:

yo soy un desarrollador de software asociado con JGraph.

Answer 4

La respuesta es absolutamente JointJS

Answer 5

.... por último pero no menos Draw2D.

es una lib de JS para una fácil creación de diagramas. La API es más como una sintaxis Java/C#. Capa de abstracción y gestión sobre la famosa libra de RaphaelJS.

Código Ejemplo:

GoJS

 var canvas = new draw2d.Canvas("gfx_holder"); 

     // Create two standard nodes for "start" and "end" and link 
     // this figures with a standard Connector 
     // 
     var start = new draw2d.shape.node.Start(); 
     var end = new draw2d.shape.node.End(); 

     canvas.addFigure(start, 80,180); 
     canvas.addFigure(end, 450,250); 

     // Add a connection via API calls between Start and Stop 
     // 
     var connection = new draw2d.Connection(); 
     connection.setSource(start.getOutputPort(0)); 
     connection.setTarget(end.getInputPort(0)); 
     canvas.addFigure(connection);