【51CTO.com快譯】

如今，具有快速高效的大數(shù)據(jù)處理能力，已經(jīng)成為了商業(yè)領(lǐng)域的首要競爭力。不同規(guī)模和行業(yè)的公司在其項(xiàng)目中，往往會用到各種圖表類數(shù)據(jù)可視化工具，在視覺上以引人注目的方式展示出復(fù)雜的數(shù)據(jù)與信息。而此類工具通常是由開發(fā)人員在網(wǎng)站或Web應(yīng)用中，借助各種開源的、或商業(yè)化的JavaScript庫，并輔以各種實(shí)用功能來實(shí)現(xiàn)的。

[[336118]]

以JS圖表庫為基礎(chǔ)的圖表編輯器(Diagram Editors)，能夠讓用戶迅速地從零開始創(chuàng)建不同類型的圖表。而對于需要頻繁更改數(shù)據(jù)的企業(yè)而言，他們還能夠在無需編碼的情況下，即時(shí)對圖表進(jìn)行編輯。

下面，我將向您介紹四種JavaScript庫的圖表編輯器，深入討論它們的功能和優(yōu)缺點(diǎn)，以便Web開發(fā)人員和最終用戶能夠從中受益。

DHTMLX實(shí)時(shí)圖表編輯器(https://dhtmlx.com/docs/products/dhtmlxDiagram/)

DHTMLX Diagram可用于以結(jié)構(gòu)良好、且易于配置的圖表形式呈現(xiàn)數(shù)據(jù)。它擁有兩種實(shí)時(shí)編輯器：組織結(jié)構(gòu)圖編輯器(https://docs.dhtmlx.com/diagram/samples/05_org_chart_editor/01_editor.html)和圖表編輯器(https://docs.dhtmlx.com/diagram/samples/06_diagram_editor/01_editor.html)。用戶可對兩者進(jìn)行自定義，并將其嵌入到Web應(yīng)用程序之中。

DHTMLX圖表編輯器的用戶界面看起來既現(xiàn)代又友好。它包括：帶有按鈕的工具欄、網(wǎng)格區(qū)域、左面板和右面板。

DHTMLX圖表編輯器能使最終用戶在預(yù)定義的30多種形狀或流程圖的幫助下，創(chuàng)建出各種圖表和組織架構(gòu)圖，并可以使用側(cè)面板來微調(diào)其外觀。

如果您需要使用其他類型的形狀，則可以直接通過代碼，將其添加到該編輯器中。DHTMLX提供了一些特殊的HTML模板，以方便JavaScript初學(xué)者輕松地創(chuàng)建各種形狀。

在其界面的左側(cè)面板上，您既可以自定義形狀，又找到預(yù)設(shè)的形狀，并將其拖放到網(wǎng)格區(qū)域內(nèi)的任意位置，并通過各種連接器來相互連接。在網(wǎng)格區(qū)域中，用戶既可以對每個(gè)選定的形狀調(diào)整大小或按需旋轉(zhuǎn)，又可以通過其工具欄對特定的形狀執(zhí)行多種編輯操作。憑借多重選擇功能，用戶還可以同時(shí)對幾種形狀執(zhí)行復(fù)制、粘貼、刪除等基本操作。

在其界面的右側(cè)面板上包含了用于設(shè)置圖表參數(shù)的各種選項(xiàng)，例如：形狀排列、顏色、大小、劃線粗細(xì)和文本屬性。因此，您可以按需更改設(shè)置，以為選定的形狀賦予新的外觀。Web開發(fā)人員還可以添加新的側(cè)邊欄，例如：為文件上傳器自定義圖形，并將某個(gè)圖像添加到該圖形中。

為了讓構(gòu)建圖表的整個(gè)過程更加快捷，該編輯器提供了一種自動布局的算法。通過單擊“自動布局”按鈕，您可以使用該智能技術(shù)，立即將那些被隨機(jī)放置的形狀，排列到某個(gè)有著良好結(jié)構(gòu)的圖表中。

其界面的頂部工具欄包含了多個(gè)按鈕。您既可以使用撤消/重做功能，來隨時(shí)重置所有的更改，又可以實(shí)現(xiàn)應(yīng)用的縮放，并啟用預(yù)覽模式。

開發(fā)人員可以通過其API添加其他的控件。例如：您可以為編輯器添加搜索欄，以根據(jù)特定的條件查找所需的形狀。通過API，您還可以為形狀的預(yù)覽添加自定義的面板，并在縮放時(shí)根據(jù)比例來調(diào)整該預(yù)覽。

在編輯完成后，您只需一次單擊，即可從編輯器中將組織結(jié)構(gòu)圖和圖表導(dǎo)出為JSON、PDF或PNG格式。當(dāng)然，您也可以導(dǎo)入JSON格式的文件。

通過其隨附的詳細(xì)文檔和完整說明，您可以參考不同類型的圖表示例(https://docs.dhtmlx.com/diagram/samples/03_customization/index.html)。例如：在編輯器中實(shí)現(xiàn)UML類圖、網(wǎng)絡(luò)圖、決策樹、以及活動圖等。

優(yōu)點(diǎn)：

• 直觀的用戶界面，
• 靈活可定制，
• 全面的文檔和示例，
• 豐富的API，
• 純JS，無需依賴第三方，
• 能定期更新并提供官方技術(shù)支持，
• 價(jià)格適中。

缺點(diǎn)：

• 付費(fèi)獲取許可證，
• 安裝和微調(diào)編輯器時(shí)，需要JavaScript知識。

yEd Live(https://www.yworks.com/yed-live/)

yEd Live是一個(gè)基于Web的免費(fèi)圖表應(yīng)用程序，可用于構(gòu)建、修改和自動排列任意復(fù)雜程度的圖表。該編輯工具是yEd桌面程序的在線版本，可以那些在支持時(shí)下流行瀏覽器的設(shè)備上運(yùn)行。

yEd Live由德國軟件公司yWorks GmbH設(shè)計(jì)，并通過JavaScript圖表庫yFiles for HTML提供支持。yEd Live編輯器的用戶界面，尤其是其工具欄的功能過于繁雜。這對于從未使用過類似應(yīng)用的用戶而言，需要花費(fèi)一些時(shí)間來進(jìn)行了解。

該編輯器為流程圖、網(wǎng)絡(luò)、BPMN(業(yè)務(wù)流程建模與標(biāo)注)、以及UML圖等提供了預(yù)定義的形狀。它們都被整齊地放置在右側(cè)面板中。當(dāng)然，您也可以按需創(chuàng)建并添加形狀，或?qū)胱远x的面板。

對于特定形狀的樣式，該編輯器允許您在“屬性”菜單中更改其形狀、大小、顏色、劃線粗細(xì)、以及文本。您可以為每個(gè)形狀追加自定義的描述和URL鏈接，以便當(dāng)鼠標(biāo)懸停在該形狀上時(shí)，會浮現(xiàn)出相應(yīng)的提示信息。

您無需擔(dān)心如何放置大量的圖形。為了使圖表在視覺上更具吸引力，該編輯器內(nèi)置的自動布局功能，會根據(jù)您設(shè)置的標(biāo)準(zhǔn)，設(shè)置不同類型的圖形。其中，可選擇的布局模板包括：分層、正交、圓形、樹形、放射狀等。

通過其上方的工具欄，您不僅可以執(zhí)行諸如：復(fù)制、粘貼、刪除、撤消、重做等基本操作，還可以實(shí)現(xiàn)一些不常用的功能，例如：Toggle等軸投影(isometric projection)，即直觀地以3D形式表示二維圖。

yEd Live的其他功能還包括：針對網(wǎng)格和對齊線的對齊輔助器，對GraphML的支持，自動保存圖表，以及內(nèi)置的搜索功能。

完成編輯后，您可以將圖表導(dǎo)出為PDF、PNG和SVG格式。此外，您還可以從各種云服務(wù)(如Dropbox、Google Drive、以及OneDrive)處進(jìn)行保存與加載，打印到紙上，甚至可以通過GitHub的gists與他人共享。

yEd Live Editor的應(yīng)用程序無法通過定制，來適合某些特定的要求。您只能按照原樣將其嵌入到Web應(yīng)用中。如果您想獲得具有類似功能的定制工具，則只能借助yFiles for HTML庫，從頭開始構(gòu)建。

優(yōu)點(diǎn)：

• 免費(fèi)，
• 帶有大量的自動化版式，
• 許多預(yù)定義的形狀和圖標(biāo)，
• 能夠?qū)D表保存到云端。

缺點(diǎn)：

• 文檔支持不足，
• 僅能按原樣進(jìn)行交付，無法自定義，
• 鮮少有更新。

Draw.io(http://draw.io/)/Diagrams.net(https://www.diagrams.net/index.html)

Diagrams.net(前身為draw.io)是一種開源的網(wǎng)絡(luò)圖表繪制工具，可用于免費(fèi)構(gòu)建、編輯和共享各種類型的圖表。它使用JS庫的mxGraph作為堆棧的基礎(chǔ)。在draw.io中，您既可以從頭開始構(gòu)建圖表，又可以上傳現(xiàn)有的圖形，以自定義模板。

該應(yīng)用程序的界面雖然看似比較懷舊，但是能夠提供豐富的功能。在其左側(cè)面板上，您可以找到不同類別的形狀庫，可實(shí)現(xiàn)流程圖、UML、BPMN圖、網(wǎng)絡(luò)圖等結(jié)構(gòu)。除了各種預(yù)定義的形狀和圖標(biāo)，您還可以添加光柵(raster)和SVG圖像，并創(chuàng)建自定義的形狀與庫。此外，其左側(cè)面板中的便簽本功能，可方便您添加常用的形狀。

無論是從空白頁面，還是從模板開始，您既可以將各種形狀添加到畫布上，也可以使用拖放功能來替換現(xiàn)有的形狀，或者通過雙擊某個(gè)形狀，以將其移動到新建的圖形中。同時(shí)，您也可以利用搜索字段，來更快地找到某種視覺元素。

您可以通過兩種不同的方式，來直接繪制圖形的連接器：使用帶有藍(lán)色箭頭的浮動連接，或是通過將鼠標(biāo)懸停在某個(gè)形狀上，以出現(xiàn)固定的連接點(diǎn)。此外，您還可以從左側(cè)的面板處添加對應(yīng)類型的連接器。

在畫布上，您既可以調(diào)整形狀的大小或旋轉(zhuǎn)之，又可以對多個(gè)形狀進(jìn)行分組，以便同時(shí)使用它們，或添加文本。其右側(cè)的“格式面板”包含了用于編輯樣式的選項(xiàng)。您可以使用顏色漸變功能來填充形狀，添加陰影，編輯文本內(nèi)容，以及更改形狀的排列。

該編輯器頂部的工具欄允許您修改形狀和連接器的外觀，插入各種元素(包括：形狀、模板、鏈接、以及表格)，將形狀置前或置后，以及設(shè)置可見與隱藏等效果。此外，您還可以利用其自動布局功能，在預(yù)定義的條件下，正確地排列各種圖表。

draw.io提供了包括：Gliffy、VSDX、PNG(帶有XML)、SVG、JPEG在內(nèi)的多種文件導(dǎo)入格式。您可以從諸如Google Drive、GitHub、DropBox、以及PC文件夾等多種來源處進(jìn)行上載。在Gliffy或Visio之類工具的幫助下，您可以將已構(gòu)建的文件導(dǎo)入draw.io中，以draw.io原生圖表的方式進(jìn)行修改。

在導(dǎo)出方面，draw.io可以將圖表保存為XML、VSDX、PDF、SVG、HTML、PNG、以及JPEG等格式。此外，您可以將編輯后的圖表直接發(fā)布為URL，以供在線用戶共享，并通過與Google Drive來開展集成編輯與實(shí)時(shí)協(xié)作。

優(yōu)點(diǎn)：

• 免費(fèi)，開源(Apache 2.0)，
• 支持多種導(dǎo)入和導(dǎo)出格式，
• 提供多種預(yù)定義的形狀，
• 能夠從不同的來源導(dǎo)入自定義的形狀，
• 提供插件集。

缺點(diǎn)：

• 界面定制化不足，
• 界面設(shè)計(jì)有些過時(shí)，
• 連接形狀的方法比較繁瑣，
• 僅提供非結(jié)構(gòu)化的文檔，
• 技術(shù)支持不足。

Rappid(https://www.jointjs.com/)

Rappid是開源的JointJS Core JavaScript庫的商業(yè)擴(kuò)展。它通過附加的UI小部件和其他實(shí)用的擴(kuò)展，來提供豐富的功能。您可通過一個(gè)“廚房水槽”的示例(請參見--https://resources.jointjs.com/demos/kitchensink)，來了解它的各項(xiàng)功能。

該編輯器在界面上提供了現(xiàn)代、深色、材質(zhì)三種不同的外觀。其左側(cè)面板中可供選擇的形狀并不多，不過您依然可以創(chuàng)建標(biāo)準(zhǔn)的流程圖、BPMN圖、UML圖，以及組織結(jié)構(gòu)圖等。同時(shí)，您也可以使用SVG來創(chuàng)建自定義的形狀。

您可以通過拖放的功能，將各種可用形狀添加到畫布上。不過，如果您想一次性放置多個(gè)形狀的話，則可能會有些不便。您可以通過簡單的基本操作，方便地對圖形進(jìn)行重置、旋轉(zhuǎn)、調(diào)整大小或連接。

在創(chuàng)建或編輯復(fù)雜且數(shù)據(jù)密集的圖形時(shí)，您可以利用屏幕右下角的“概覽”窗口，來瀏覽多種形狀，并按需進(jìn)行更改。此外，Rappid的自動化布局功能，也可重新排列您的圖表，使之更加美觀。

同時(shí)，您既可以通過更改形狀、字體大小、裝飾填充、以及輪廓，來調(diào)整圖形和連接器的樣式，又可以將自定義的數(shù)據(jù)添加到圖形中。

在導(dǎo)出方面，該編輯器可以保存為JSON、PNG、JPEG、以及SVG等多種格式。此外，通過第三方工具的嵌入，Rappid還可以實(shí)現(xiàn)：撤消/重做、對齊線、驗(yàn)證器、縮放和平移、打印、以及多選等功能。

優(yōu)點(diǎn)：

• 三種“皮膚”可供選擇，
• 方便的導(dǎo)航欄，
• 提供插件集，
• 響應(yīng)能力強(qiáng)，
• 能夠定期更新，并提供官方技術(shù)支持。

缺點(diǎn)：

• 付費(fèi)獲取許可證，
• 其功能實(shí)現(xiàn)取決于jQuery、Lodash和Backbone(MIT)。

【原標(biāo)題】Must-Know Pros and Cons of JavaScript Diagram Editors (作者: Ivan Petrenko)

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】