logo标签列表

JavaScript库用于创建图表？

jquerycanvassvgjavascript
16

有哪些JavaScript库（免费或商业）可以构建计算机网络图或电气图，并支持在图中不同元素之间的动画效果？

谢谢。

没有人提到过GoJS（http://www.gojs.net），它看起来非常强大。 - Fuzzy Analysis
5个回答
15
很遗憾，JointJS的用户驱动图表创建库Rappid不允许试用。 - Fuzzy Analysis
11

试用一款免费的在线绘图应用程序，draw.io。它使用mxGraph库来绘制图表。

免责声明：

我是与JGraph相关联的软件开发人员。

10

看看这三个库，看看它们是否能帮助您：

Raphael

Raphaël是一个小型的JavaScript库，可以简化您在Web上使用矢量图形的工作。如果您想创建自己的特定图表或图像裁剪和旋转小部件，您可以使用该库简单易行地实现它。Raphaël ['ræfeɪəl]使用SVG W3C推荐和VML作为创建图形的基础。这意味着您创建的每个图形对象也是一个DOM对象，因此您可以附加JavaScript事件处理程序或稍后修改它们。Raphaël的目标是提供适配器，使绘制矢量艺术跨浏览器兼容并易于实现。

Protovis

Protovis通过简单的标记（如条形和点）组成自定义数据视图。与低级别的图形库相比，可视化快速变得乏味，Protovis通过动态属性定义标记来编码数据，从而允许继承、比例和布局简化构建。 Protovis是免费且开源的，根据BSD许可提供。它使用JavaScript和SVG进行Web本机可视化；无需插件（尽管您需要现代Web浏览器）！虽然编程经验有所帮助，但Protovis主要是声明性的，并且旨在通过示例学习。

Processingjs

Processing.js是流行的Processing可视化编程语言的姐妹项目，专为Web设计。Processing.js使用Web标准，无需任何插件即可使您的数据可视化、数字艺术、交互式动画、教育图表、视频游戏等工作。虽然编程经验对使用该库有所帮助，但Processing.js主要以声明方式呈现，易于学习。

插件。您可以使用Processing语言编写代码，将其包含在您的网页中，然后Processing.js将完成其余的工作。这不是魔法，但几乎是。

最初由Ben Fry和Casey Reas开发，Processing起源于一种基于Java的开源编程语言，旨在帮助电子艺术和视觉设计社区在视觉环境中学习计算机编程的基础知识。Processing.js将其提升到了一个新的水平，允许任何兼容HTML5的浏览器运行Processing代码，包括当前版本的Firefox、Safari、Chrome、Opera和Internet Explorer。Processing.js将可视化编程的最佳特性带到了网络上，为Processing和Web开发人员提供了便利。
这些对于非用户驱动的图表非常适用。对于用户驱动的图表创建，我推荐使用goJS（http://www.gojs.net）。 - Fuzzy Analysis
5

最后但并非最不重要的是 Draw2D。

这是一款用于简易图表创建的 JS 库。其 API 更像是 Java/C# 语法。是著名 RaphaelJS 库的抽象和管理层。

代码示例：

      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);
2
5
他们中没有一个能够创建网络图或电气图。它们适合制作图表。谢谢回复。 - M99
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接