写点什么

10+ JavaScript 数据可视化库

  • 2019-08-26
  • 本文字数:3738 字

    阅读完需:约 12 分钟

10+ JavaScript数据可视化库

在本文中,我们将为你介绍可以用来构建自己的图表制作工具以及向软件中增添一些图形建模功能的 10+款 JavaScript 库。




用于图表制作的 10+款 JavaScript 库(2019 版)


如今在浏览器中,你可以使用 JavaScript 渲染任何东西。在先前一篇文章中,我们介绍了一些在线建模工具来直接在浏览器上创建 UML(或 ER、BPMN…)图表。大部分这些工具使用 JavaScript 来渲染图形并与之交互。在本文中,我们将为你介绍可以用来构建自己的图表制作工具以及向软件中增添一些图形建模功能的 10+款 JavaScript 库。



我们将这些 JavaScript 图表库分为两类:支持软件建模的库(例如,预定义流程图或 UML 图的 JavaScript 库)和支持核心画图功能的库(这些后续可以根据图形建模语言进行调整)。总之,如果你正在寻找一款差不多立即可用的 JavaScript 建模库并将之集成到你的工具中,你可以从第一组的 JavaScript 库中选择一款。如果你正在寻找一款更加灵活的方案,并有时间和能力来做一些编程,可以考虑从第二组的 JavaScript 中选择一款,并根据自己的需要进行个性化订制。


##用于制作 UML(或 BPMN、ERD 等)图表的 JavaScript 库


###JointJS


JointJS 可以用来创建静态图表或者交互式图表制作工具和应用程序。它还有一个商业版本(Rappid,见下文)


其中一些功能如下:


  • 基本的图表元素(矩形、圆形、省略号、文本、图片、线条)。

  • 立即可用的知名图表元素(ERD、Org chart、FSA、UML、PN、DEVS 等)。

  • 基于 SVG 或者编程渲染的自定义图形。

  • 可交互元素和链接。

  • 用链接连接图表元素。

  • 自定义链接、箭头和标注。

  • 可以任意摆放的磁力图点。

  • 层次图。

  • JSON 格式的序列化和反序列化。

  • 大小缩放。

  • 触摸支持。


(查看这篇关于JointJS的文章来更详细了解这款工具)


Rappid

Rappid 是 JointJS 的商业扩展。它是 JointJS 的一组插件和其它商用组件集合,为创建制图工具提供了更多可能性和立即可用的功能。


其中一些功能如下:


  • 实时协作

  • 通过 HTML 5 的 local storage 支持复制、剪切和粘贴

  • 一次操作多个元素

  • 校验文档

  • 本地存储

  • 取消、恢复

  • 模态对话框和非模态对话框

  • 支持 SVG 文本的内联文本编辑器

  • 定向图的自动布局

  • SVG 导出

MxGraph

MxGraph 是一款可交互的 JavaScript HTML 5 图表制作库。 MxGraph 是一个客户端库,使用 SVG 和 HTML 来渲染你的模型。这个库用于Draw.io。该库从 2005 年开始开发。mxGraph 没有使用第三方软件,因此它不需要插件,可以被集成到任何框架。


mxGraph 包含了一款 JavaScript 写的客户端软件,以及针对各种语言的一系列后端软件。该客户端软件是一款图表组件和一款可选的被集成到已有 Web 接口的应用程序包装器。客户端需要 Web 服务器来传送客户端请求的文件,或者从本地文件系统运行而不需要 Web 服务器。后端可以按原样使用,或者以支持的其中一种语言嵌入到已有的服务器应用程序。


GoJS

GoJS 是一款实现跨现代浏览器和跨平台的交互式图表的功能丰富的 JavaScript 库。GoJS 通过自定义模板和布局使得创建包含节点、连线、分组的复杂图表变得简单。


GoJS 提供了针对用户交互的许多高级功能,例如拖拽、复制粘贴、事务状态、取消操作管理、调色板、概览、模型数据绑定、时间处理器以及一个用于自定义操作的可扩展工具系统。他们提供了超过150个交互样本来帮你上手 BPMN、流程图、状态图、树状图、桑基图(Sankey)和数据流图。API 文档健全,确保你可以立即使用。我们在一篇文章中广泛地介绍了GoJS


jsUML2 library

这是一款用于制作 UML2 图表的 HTML5/javascript 库。它的主要目标是为 Web 开发者提供一种简单的方法来在他们自己的网站可视化和编辑 UML 模型,无需其它外部依赖,通过浏览器完全在客户端运行,而不像这组中的其它工具。该 jsUMML2 库提供了一个 API,允许 Web 开发者利用最新 Web 浏览器和当前移动设备支持的 HTML5 技术,在他们自己的网站嵌入可编辑的图表。


它针对 UML 特定模型提供了一种广泛的有趣功能。特别的是,它支持所有主要类型的 UML 图表:


  • 用例图

  • 类图

  • 组件图

  • 次序图

  • 活动图

  • 状态图


支持图表元素的样式编辑(尺寸、位置、颜色等)、模式定义、UML 图表的 XML 导入导出和图片生成。


这个工具从2017年终止更新,但如果你寻找一款 UML JavaScript 库的话,它仍是一个比较好的选择。


Mindfusion 图表库

这个工具是 100%用 JavaScript 写的,使用HTML5 Canvas元素绘制。组件可以使用jQuery或者Microsoft Ajax®库来实现浏览器独立层和类型系统实现。


它提出了一组丰富的预定义的图形(工作流图、过程图、类图、树等,可以查看它们的样本集),并提供了可能来自定义图形和自定义选项(例如箭头形状)。为了 API 使用便利,他们建立了丰富的文档,同时你还可以使用自动布局算法。

Nomnoml

Nomnoml 是一款知名的文本化建模工具,能够根据文本描述渲染 UML 图表,但是它还提供了一个独立的 JavaScript 库,你可以使用这个库在自己的网页上渲染图表。这个库的依赖仅仅是lodashdagre


Mermaid.js

和 nomnoml 类似,Mermmaid 主要聚焦于根据文本文件生成图表,通过一种简单的类似 markdown 的脚本语言。它依赖d3dagre-d3来提供图形布局和绘制库。它提供了一个在线编辑器,但你也可以直接复用打包的Mermaid API来将 Mermaid 集成到自己的开发中。


它主要涉及次序图和流程图。

Diagram.js

Diagram.js 是创建并展示图表的核心库。它被BPMN.io(库的作者)用作该公司的许多其它库的构建块来定义业务模型、决策模型和案例模型。


例如,bpmn-js是 diagram.js 的扩展,用来渲染 bpmn 2.0 图表。除了使用它来构建一个工作流建模编辑器(他们已经提供),bpmn-js 的设计考虑了可扩展性,因此你可以“轻易”在其基础上构建一些执行引擎或模拟引擎。


State.js

顾名思义,state.js 聚焦于分层状态机建模。state.js API 提供:


1.代表状态机模型的类(State、PseudoState、Transition 等)。


2.活动状态配置(当前状态)的接口和实现;这允许一个状态机模型的多个并发实例。


3.一组提供状态机运行时的函数。


它是由 TypeScript 开发的,编译为 JavaScript;你可以使用其中任何一种语言。

用于绘图的 JavaScript 库

提供面向图表的建模原型的底层库。事实上,其中一些被用来构建上面所述的 JavaScript 建模库。

D3

D3.js 是一款用来基于数据操作文档的 JavaScript 库。现在,我要说的就是这种最流行的库。


D3 帮助你使用 HTML、SVG 和 CSS 使数据栩栩如生。D3 对于 Web 标准的重视,使得你可以使用现代浏览器的全部能力,而不用尝试自己建立专用框架,将强大的可视化组件和数据驱动方案与 DOM 操作结合。D3 非常快,支持大型数据集和交互与动画的动态行为。D3 的函数化样式允许通过多个官方和[社区开发模块的代码复用。


Raphaël

Raphaël 是一款小型 JavaScript 库,可以简化关于 Web 上矢量图的工作。如果你想创建你自己的特定图表或者图像裁剪和旋转组件,例如,你可以使用这个库简便地实现它。Raphaël 使用 SVG W3C Recommendation 和 VML 作为创建图形的基础。这意味着,你创建的每个图形对象也是一个 DOM 对象,因此你可以绑定 JavaScript 事件处理器或者稍后修改它们。Raphaël 的目标是提供一个适配器,使得绘制矢量图可以跨浏览器兼容且易用。

Draw2D

使用 Draw2D JavaScript 库,创建类似 Visio 的绘图、图表或者工作流编辑器。其用户接口允许使用你的标准浏览器来交互式绘图。它声称比Raphaël更简洁。无论如何,Raphaël 已经停止更新一段时间了(网站显示从 2016 年底之后就没有任何显著变化了)。


Fabric.js

Fabric 是一款 javascript HTML canvas 库,在 canvas 元素之上提供一种交互式对象模型。你可以在 canvas 上创建和填充对象;像简单的几何形状或者包含多条线条的复杂形状。Fabric 也提供 SVG-to-canvas(和 canvas-to-SVG)解析器。


Paper.js

Paper.js 是一款运行在 HTML5 Canvas 上的开源矢量图脚本框架。它提供了一个干净的场景图/文档对象模型以及许多有用的功能来创建和使用矢量图和贝塞尔曲线,都整齐包装在一个设计良好的一致的干净的编程接口。它基于(并很大程度上兼容)Scriptographer,一个面向 Adobe Illustrator 的脚本环境。


JsPlumb

jsPlumb 通过 core.js 中的可视化连接,提供了一种构建应用程序的快速方法。它使用 SVG,运行在 IE9 及其之后的所有浏览器上。JSPlumbToolkit是它的商业扩展。这个商业版本在社区版本的基础上,聚焦于底层数据模型,以及一些有用的 UI 功能,例如布局,和提供平移/缩放功能的组件。


p5.js

一款用来创建图形和交互体验的 JS 客户端库,基于Processing的核心原则来使得艺术家、设计师和教育者能够参与编码。除了绘图,这个项目还提供了 Web 语音功能、冲突检测以及从p5.js草图生成图形化用户界面

Cytoscape.js

一款高度优化的开源图形原理/网络库,可以用作图片分析和可视化。它兼容所有现代浏览器和 JSON 序列化与反序列化。它还包含了自动布局算法、集合理论和图理论,从 BFS 到 PageRank。


dagre-d3

一款作为dagre前端的 JavaScript 库(在客户端布局有向图的 JavaScript 库),使用D3提供实际的渲染功能。

vis.js

Vis.js 是一个动态的基于浏览器的可视化库。这个库被设计成易于使用,能够处理大量动态数据,并且能够操纵这些数据。


英文原文: https://modeling-languages.com/javascript-drawing-libraries-diagrams


2019-08-26 14:426510

评论 1 条评论

发布
暂无评论
发现更多内容

java安全编码指南之:Mutability可变性

程序那些事

Java java安全编码 编码指南 可变性

JVM中unsafe.cpp源码

Darren

c++ 源码 JVM unsafe

花两个半月吃透这份Java手打面经,成功从外包上岸到京东

Java迁哥

Java 学习 腾讯 面试 资料

LeetCode题解:84. 柱状图中最大的矩形,双循环暴力,JavaScript,详细注释

Lee Chen

大前端 LeetCode

vivo商城前端架构升级-总览篇

vivo互联网技术

node.js Vue 大前端 架构设计

分析HiveQL 生成的MapReduce执行程序

任小龙

ArCall远比你想象的要强大的多

anyRTC开发者

WebRTC 在线教育 直播 RTC 安卓

区块链交易所开发源码,数字货币交易所app开发

13530558032

区块链支付系统源码开发,USDT承兑支付平台

13530558032

JDK8 Unsafe.java 源码

Darren

源码 并发 CAS 代码注释 unsafe

高效程序员的45个习惯:敏捷开发修炼之道(7)

石云升

敏捷开发 晨会

鲲鹏迁移第一批吃螃蟹的人,践行技术国际化

华为云开发者联盟

鲲鹏920 服务器 华为云 ARM芯片 X86

week12 homework

burner

面经手册 · 第9篇《队列是什么?什么是双端队列、延迟对列、阻塞队列,全是知识盲区!》

小傅哥

数据结构 小傅哥 队列 ArrayDeque

Java创建对象的方法有哪些?

古月木易

Java

Java创建对象的方法有哪些?

奈学教育

Java

【API进阶之路】破圈,用一个API代替10人内容团队

华为云开发者联盟

内容 编辑 API 华为云 文本摘要

实战案例丨使用云连接CC和数据复制服务DRS实现跨区域RDS迁移和数据同步

华为云开发者联盟

迁移 灾备 数据复制 云连接 数据同步

一条龙!CI / CD 、打造小团队前端工程化服务

久违

Vue 大前端 jenkins React

【运维探讨】RPA落地实践,提升IT运维工作效能!

嘉为蓝鲸

RPA 运维自动化 标准化 系统运维 流程

9块钱,构建个私有网盘,关键不限速

华为云开发者联盟

网站 OBS 在线网盘 华为云 云存储

Java中强、软、弱、虚四种引用详解

奈学教育

Java

架构设计复杂度来源

escray

学习 从零开始学架构 架构师预科班

拥抱K8S系列-01-CentOS7安装docker

张无忌

Docker centos 运维

Java中强、软、弱、虚四种引用详解

古月木易

Java

35K成功上岸华为商城事业部,只因学透了这几个开源的商城项目

Java迁哥

Java 华为 源码 资料 商城项目

程序员如何获取一份高薪工作?阿里P8大牛给你一些中肯的建议

Java迁哥

Java 华为 程序员 面试 资料

Docker 网络模式详解及容器间网络通信

哈喽沃德先生

Docker 容器 微服务

2019年我最喜欢的三款数码产品。

徐说科技

手机 苹果

为什么阿里巴巴的程序员成长速度这么快,看完他们的内部资料我明白了

Java迁哥

Java 阿里巴巴 程序员 成长 笔记

数字货币钱包系统定制开发,区块链钱包源码

13530558032

10+ JavaScript数据可视化库_语言 & 开发_Hamza Ed-douibi_InfoQ精选文章