當前位置︰首頁 > 新聞資訊 > 正文

10+ JavaScript 數據可視化庫2019-08-28 09:13:55 | 編輯︰hely | 查看︰ | 評論︰0

在本文中,我們將為你介紹可以用來構建自己的圖表制作工具以及向軟件中增添一些圖形建模功能的 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 格式的序列化和反序列化。
大小縮放。
觸摸支持。

 

 

 

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 庫,你可以使用這個庫在自己的網頁上渲染圖表。這個庫的依賴僅僅是 lodash 和 dagre 。

 

 

Mermaid.js

和 nomnoml 類似,Mermmaid 主要聚焦于根據文本文件生成圖表,通過一種簡單的類似 markdown 的腳本語言。它依賴 d3 和 dagre-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 是一個動態的基于瀏覽器的可視化庫。這個庫被設計成易于使用,能夠處理大量動態數據,並且能夠操縱這些數據。

作者︰Hamza Ed-douibi

譯者︰張健欣

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

上一篇︰Linux 28歲了,我們總結了28個不為人知的事實 聯通大數據 5000 台規模集群故障自愈實踐下一篇︰

公眾平台

搜索"raincent"或掃描下面的二維碼

?