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 |演示版
【5+最佳免费图表JavaScript库】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提供了许多用于用户交互的高级功能, 例如拖放, 复制和粘贴, 就地文本编辑, 工具提示, 上下文菜单, 自动布局, 模板, 数据绑定和模型等。事务状态和撤消管理, 调色板, 概述, 事件处理程序, 命令以及用于自定义操作的可扩展工具系统。
但是, 这是一个付费图书馆, 你只能在评估期限内使用, 但由于其功能强大, 因此需要在本文中提及。