【51CTO.com快譯】

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

[[336118]]

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

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

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

DHTMLX Diagram可用于以結構良好、且易于配置的圖表形式呈現數據。它擁有兩種實時編輯器：組織結構圖編輯器(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)。用戶可對兩者進行自定義，并將其嵌入到Web應用程序之中。

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

DHTMLX圖表編輯器能使最終用戶在預定義的30多種形狀或流程圖的幫助下，創建出各種圖表和組織架構圖，并可以使用側面板來微調其外觀。

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

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

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

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

其界面的頂部工具欄包含了多個按鈕。您既可以使用撤消/重做功能，來隨時重置所有的更改，又可以實現應用的縮放，并啟用預覽模式。

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

在編輯完成后，您只需一次單擊，即可從編輯器中將組織結構圖和圖表導出為JSON、PDF或PNG格式。當然，您也可以導入JSON格式的文件。

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

優點：

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

缺點：

• 付費獲取許可證，
• 安裝和微調編輯器時，需要JavaScript知識。

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

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

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

該編輯器為流程圖、網絡、BPMN(業務流程建模與標注)、以及UML圖等提供了預定義的形狀。它們都被整齊地放置在右側面板中。當然，您也可以按需創建并添加形狀，或導入自定義的面板。

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

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

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

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

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

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

優點：

• 免費，
• 帶有大量的自動化版式，
• 許多預定義的形狀和圖標，
• 能夠將圖表保存到云端。

缺點：

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

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

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

該應用程序的界面雖然看似比較懷舊，但是能夠提供豐富的功能。在其左側面板上，您可以找到不同類別的形狀庫，可實現流程圖、UML、BPMN圖、網絡圖等結構。除了各種預定義的形狀和圖標，您還可以添加光柵(raster)和SVG圖像，并創建自定義的形狀與庫。此外，其左側面板中的便簽本功能，可方便您添加常用的形狀。

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

您可以通過兩種不同的方式，來直接繪制圖形的連接器：使用帶有藍色箭頭的浮動連接，或是通過將鼠標懸停在某個形狀上，以出現固定的連接點。此外，您還可以從左側的面板處添加對應類型的連接器。

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

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

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

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

優點：

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

缺點：

• 界面定制化不足，
• 界面設計有些過時，
• 連接形狀的方法比較繁瑣，
• 僅提供非結構化的文檔，
• 技術支持不足。

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

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

該編輯器在界面上提供了現代、深色、材質三種不同的外觀。其左側面板中可供選擇的形狀并不多，不過您依然可以創建標準的流程圖、BPMN圖、UML圖，以及組織結構圖等。同時，您也可以使用SVG來創建自定義的形狀。

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

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

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

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

優點：

• 三種“皮膚”可供選擇，
• 方便的導航欄，
• 提供插件集，
• 響應能力強，
• 能夠定期更新，并提供官方技術支持。

缺點：

• 付費獲取許可證，
• 其功能實現取決于jQuery、Lodash和Backbone(MIT)。

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

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