关于图形:Javascript绘图库?

关于图形:Javascript绘图库?

Javascript drawing library?

对 JavaScript 交互式绘图库有什么建议吗?只需要绘制不同颜色的线条、多边形、文本。 IE/Firefox/Opera/Safari 兼容。
--------------------------


Raphael 在这方面非常酷,并且可以跨浏览器工作,因为它使用 VML(用于 MSIE)和 SVG(用于其他所有内容)。


John Resig 的 Processing.js 是一个很好的框架。


您可以直接使用画布对象进行 2D 绘制。 IE 需要 excanvas 库。

http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas


试试 http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm。这是我发现的最好的(不使用 SVG),并且可以在大多数没有插件的浏览器中使用。


还有 mxGraph。这不使用 IE 的 excanvas。 Excanvas 比使用 VML 慢得多,特别是重用相同的 VML 节点而不是删除、添加 DOM 节点以进行重绘。这通常是一个被忽视的点,但是关于 IE 性能的研究实在是太糟糕了。


查看 jQuery 绘图插件,您还可以查看 Mozilla Canvas 参考和教程。


如上所述,画布是你应该走的路。 IE 本身不支持它,因此您需要下载 ExCanvas 以确保跨浏览器兼容性。对于一些使用 canvas 标签的项目,我建议查看 Ajaxian。


使用 canvas 标签绘制文本是一件很痛苦的事情。您的选择是使用绝对定位在正确位置的常规 div,或者查找/编写字体布局引擎(示例),或者等待实现允许您绘制文本的新标准。 SVG 可以更好地处理这个问题。

在 IE 中,您可以使用 ExplorerCanvas 来使用 IE 自己的 VML 标记来模拟画布 API。但是,原生 VML 可以在路径上执行文本,并且非常类似于 SVG。我认为理论上如果你想要复杂的文本处理,你会想要 SVG 和 VML,比如 Dan 提到的 Raphael 库。

您也可以在开始之前考虑一下 Flash。


根据您需要跨浏览器的程度和进行输出的目标,您可能会查看 Canvas 元素和相关的 javascript。

画布


D3.js

D3.js is a JavaScript library for manipulating documents based on
data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s
emphasis on web standards gives you the full capabilities of modern
browsers without tying yourself to a proprietary framework, combining
powerful visualization components and a data-driven approach to DOM
manipulation.

也看看这个讨论。


推荐阅读