5+最佳免费图表JavaScript库

本文概述

• 5. Mermaid
• 4. Flowchart
• 3. JS Sequence Diagrams
• 2. Cytoscape.js
• 1. JointJS
• GOJs

这些库中的一些库对高级功能提供了高级支持, 另一些库则提供了低级的绘图功能, 其中大多数是开源的, 而其他则具有BSD许可证。

5. Mermaid

Github |演示版

Mermaid是一种类似于markdown的简单脚本语言, 用于通过javascript从文本生成图表, 并在具有指定markdown的DOM上生成SVG元素。你可以在此处使用编辑器在线对其进行测试。

4. Flowchart

Github |演示版

Flowchart从图的文本表示中绘制了简单的SVG流程图。

3. JS Sequence Diagrams

Github |演示版

JS Sequence Diagrams是一个简单的JavaScript库, 可将文本转换为矢量UML序列图。深受websequencediagrams.com的启发, 该公司提供了服务器端解决方案。该插件使用Jison解析文本, 并使用Raphaël绘制图像。

2. Cytoscape.js

Github |演示版

Cytoscape.js是一个用JavaScript编写的开源图论(又称网络)库。你可以使用Cytoscape.js进行图形分析和可视化。

Cytoscape.js允许你轻松显示和操作丰富的交互式图形。由于Cytoscape.js允许用户与图形进行交互, 并且库允许客户端挂接到用户事件, 因此Cytoscape.js可以轻松集成到你的应用程序中, 尤其是因为Cytoscape.js同时支持桌面浏览器(例如Chrome)和移动浏览器, 就像在iPad上一样。 Cytoscape.js包含了开箱即用的所有手势, 包括捏缩放, 框选择, 平移等。

Cytoscape.js支持许多不同的图论用例。它支持有向图, 无向图, 混合图, 循环, 多图, 复合图(一种超图), 等等。

Cytoscape.js还考虑了图分析：该库包含图论中的许多有用功能。你可以在Node.js上无头使用Cytoscape.js在终端或Web服务器上进行图形分析。 Cytoscape.js是一个开源项目, 任何人都可以自由贡献。

1. JointJS

Github |演示版

JointJS是一个现代HTML 5 JavaScript库, 用于可视化以及与图和图的交互。它可以用于创建静态图, 或更重要的是, 用于创建完全交互式的绘图工具, 例如工作流编辑器, 流程管理工具, IVR系统, API集成器, 演示应用程序等。

JointJS使创建各种可视化工具变得容易。事件驱动的特性与JointJS的MVC架构一起使插入任何后端技术变得容易。 (强烈建议使用依赖项[jQuery, Backbone and Lodash])。

• 各种形状(矩形, 圆形, 椭圆形, 文本, 图像, 路径, ERD, 组织图, FSA, UML, BPMN, PN, DEVS等)
• 通过SVG或通过程序渲染的自定义形状。
• 互动元素和链接。
• 连接图元素与链接。
• 可自定义的链接, 它们的箭头和标签。
• 链接平滑(贝塞尔插值)和智能路由。
• 磁铁/端口(链接连接点)基本上可以放置在任何地方。
• 层次结构图。
• 到/自JSON格式的序列化/反序列化。
• 高度事件驱动-你可以对纸张内部发生的任何事件做出反应。
• 在2D空间中运行的大量数学函数。
• 包含SVG库。
• 放大/缩小。
• 触摸支持。
• 动画。
• 过滤器和渐变。
• NodeJS支持。
• 快速-能够通过即时交互呈现数百(甚至数千)个元素和链接。
• 灵活的插件系统。
• MVC体系结构。
• 还有更多。

GOJs

下载评估版

GoJS是功能丰富的JavaScript库, 用于在现代Web浏览器和平台上实现自定义交互式图表和复杂的可视化。 GoJS使用可自定义的模板和布局使构建复杂节点, 链接和组的JavaScript图变得容易。

GoJS提供了许多用于用户交互的高级功能, 例如拖放, 复制和粘贴, 就地文本编辑, 工具提示, 上下文菜单, 自动布局, 模板, 数据绑定和模型等。事务状态和撤消管理, 调色板, 概述, 事件处理程序, 命令以及用于自定义操作的可扩展工具系统。

但是, 这是一个付费图书馆, 你只能在评估期限内使用, 但由于其功能强大, 因此需要在本文中提及。