用于创建图表的 Javascript 库？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6627278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Library for Diagram Creation?
提问by M99
Which JavaScript library (free or commercial) can build computer network diagrams or electrical diagrams. Also, that supports animations between different items in the diagrams etc.
哪个 JavaScript 库（免费或商业）可以构建计算机网络图或电气图。此外，它支持图表中不同项目之间的动画等。
Thanks.
谢谢。
采纳答案by AlienWebguy
Check out these three libraries and see if they can help you out:
查看这三个库，看看它们是否可以帮助您：
Rapha?l is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Rapha?l ['r?fe??l] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Rapha?l's goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Rapha?l 是一个小型 JavaScript 库，可以简化您在网络上使用矢量图形的工作。例如，如果您想创建自己的特定图表或图像裁剪和旋转小部件，您可以使用此库轻松轻松地实现它。Rapha?l ['r?fe??l] 使用 SVG W3C Recommendation 和 VML 作为创建图形的基础。这意味着您创建的每个图形对象也是一个 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。Rapha?l 的目标是提供一个适配器，使绘图矢量艺术兼容跨浏览器和容易。
Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example.
Protovis 使用简单的标记（如条形和点）组成数据的自定义视图。与快速变得乏味的低级图形库不同，Protovis 通过对数据进行编码的动态属性来定义标记，允许继承、缩放和布局以简化构造。Protovis 是免费和开源的，在 BSD 许可下提供。它使用 JavaScript 和 SVG 进行 Web 原生可视化；不需要插件（虽然你需要一个现代的网络浏览器）！尽管编程经验很有帮助，但 Protovis 主要是声明式的，旨在通过示例进行学习。
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.
Originally developed by Ben Fry and Casey Reas, Processing started as an open source programming language based on Java to help the electronic arts and visual design communities learn the basics of computer programming in a visual context. Processing.js takes this to the next level, allowing Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer. Processing.js brings the best of visual programming to the web, both for Processing and web developers.
Processing.js 是流行的 Processing 可视化编程语言的姊妹项目，专为 Web 设计。Processing.js 使您的数据可视化、数字艺术、互动动画、教育图表、视频游戏等使用网络标准工作，无需任何插件。您使用 Processing 语言编写代码，将其包含在您的网页中，Processing.js 会完成剩下的工作。这不是魔术，但几乎。
Processing 最初由 Ben Fry 和 Casey Reas 开发，最初是一种基于 Java 的开源编程语言，旨在帮助电子艺术和视觉设计社区在视觉环境中学习计算机编程的基础知识。Processing.js 将其提升到一个新的水平，允许任何 HTML5 兼容浏览器运行 Processing 代码，包括当前版本的 Firefox、Safari、Chrome、Opera 和 Internet Explorer。Processing.js 为 Processing 和 Web 开发人员带来了最好的可视化编程网络。
回答by Boris Jockov
回答by AlienWebguy
....last but not least Draw2D.
....最后但并非最不重要的Draw2D。
it's a JS lib for easy diagram creation. The API is more like a Java/C# syntax. Abstraction and management layer above the famous RaphaelJS lib.
它是一个用于轻松创建图表的 JS 库。API 更像是 Java/C# 语法。著名的 RaphaelJS 库之上的抽象和管理层。
Code Example:
代码示例：
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);
