值得了解的六大優(yōu)秀JavaScript圖表庫
譯文【51CTO.com快譯】眾所周知，族譜是一種特殊的圖表，它能夠以樹狀結(jié)構(gòu)的方式，向人們展示一個家族世代成員間的彼此關(guān)系。在實際歷史介紹，社會關(guān)系梳理、以及醫(yī)學研究等項目中，我們經(jīng)常需要通過可視化的工具，來展示某個族譜類型關(guān)系圖表。
顯然，從零開始構(gòu)建結(jié)構(gòu)合理、且內(nèi)容豐富的JavaScript圖表，并將其集成到現(xiàn)有Web應用中，會是一項艱巨的任務。這就是為什么Web開發(fā)人員通常會通過JS組件，來加快該過程，并避免不必要的錯誤的原因。
下面，我們以生成各種名門望族的家譜圖表為例，一起來探討時下流行的六大JavaScript圖表庫，及其主要功能。
作為一個可自定義和配置的JavaScript庫，DHTMLX Diagram能夠更快地構(gòu)建出各種類型的跨瀏覽器圖表。除了此處討論的族譜，它還可以通過組織結(jié)構(gòu)圖、流程圖、UML類圖等方式，直觀地呈現(xiàn)出不同量級的數(shù)據(jù)。
使用由它提供的輕量級且便捷的API，您可以通過其內(nèi)置的形狀，來輕松地創(chuàng)建出JavaScript類型的族譜樹狀圖。如果您想讓族譜的外觀看上去更加精致的話，那么可以使用HTML的傳統(tǒng)組件(如各種文本、圖像或圖標)，來補足每個成員節(jié)點上的屬性。您甚至可以為各個節(jié)點添加緊湊的上下文菜單，以便為查看者提供交互式的控件。
通常，各種樣式選項會允許您通過API或CSS，按需修改圖表的外觀。而DHTMLX控件恰好可以通過流行的JS框架(如Angular、React、Vue.js)，被無縫地集成到Web應用中。
您可以通過鏈接中的分步指南，了解如何使用DHTMLX來構(gòu)建各種樹形圖表。
值得一提的是，DHTMLX Diagram帶有一個實時編輯器，您能夠在不必操作代碼的情況下，隨時進行編輯。其中，它的左側(cè)面板允許您通過拖放，來選擇必要的形狀;它的右側(cè)面板能夠為選定的形狀提供各種編輯類的設置，包括：尺寸、位置、顏色、筆觸、以及內(nèi)容修改等。當然，您也可以根據(jù)項目的實際需求，在該編輯器中添加自定義的形狀，并設置用于編輯的各種參數(shù)。
DHTMLX Diagram的自動布局算法，可以讓您在設計大型圖表時，無需進行手動布置。此外，它的實用功能還包括：擴展和折疊圖表樹的分支，放大和縮小，以及使用搜索域來檢索特定的形狀，這些都可以讓大型圖表的交互變得更加高效和省時。此外，那些完整的族譜圖可以被DHTMLX Diagram導出為PDF、PNG或JSON等格式。
受益于全面的文檔、詳細的指南、以及交互式的示例，用戶能夠快速地掌握DHTMLX Diagram的主要概念，并能受益于其豐富的功能集。
DHTMLX Diagram的試用版下載鏈接為：https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml
售價：從599美元到2,899美元
作為一個JavaScript類型的圖形可視化工具包，yFiles for HTML可以利用諸如SVG、WebGL和HTML5 Canvas之類的流行繪圖技術(shù)，創(chuàng)建出各種美觀的圖表。
在用來生成族譜圖時，yFiles for HTML提供了各種現(xiàn)成的幾何形狀，并支持對性別和多個文本標簽的顏色編碼，進而讓圖表節(jié)點包含更加豐富的信息。同時，您可以通過諸如縮放、平移、撤消、重做之類的編輯功能，對應用中的圖表輕松地進行修改。
如上圖所示，您可以通過鏈接，來查看約翰·肯尼迪家族的完整圖譜。此外，您可以利用FamilyTreeLayout專用算法，在配置圖表結(jié)構(gòu)時，基于性別等條件，來組織族譜樹上的各個節(jié)點。
yFiles for HTML的實用性還體現(xiàn)在：對Typescript的綁定，對ECMAScript的各項功能提供支持，以及能夠兼容各種主流的JavaScript框架。您可以通過Demo應用的集合、針對開發(fā)人員的指南、以及各種教程(，來獲悉如何在實際情況下使用yFiles for HTML。
yFiles for HTML的試用版下載鏈接為：https://my.yworks.com/signup?product=YFILES_HTML_EVAL
售價：11,900.00美元起
3.GoJS
GoJS是基于TypeScript的解決方案，可被用于生成從基本的樹型圖表，到綜合類工業(yè)圖表等，復雜程度各異的表和圖形。例如，您可以創(chuàng)建一個具有可折疊與展開的，帶有所有相關(guān)屬性的傳統(tǒng)族譜，或者能夠針對給定家族，進行關(guān)系擴展的詳細樹形表。
如上圖所示，您可以通過鏈接，來查看日本皇室的完整圖譜。
GoJS不但可以通過個性化的模板和布局，來節(jié)省用戶在選擇和構(gòu)建圖表上所花費的時間，還提供了一系列諸如：本地文本編輯、工具提示、上下文菜單、調(diào)色板、以及概覽等功能，來改善用戶的體驗。此外，它還可以通過特殊的工具，來執(zhí)行自定義的、針對圖表中不同元素的動畫。
由于它屬于獨立于第三方的工具，因此GoJS非常適合于基于通用JavaScript框架的開發(fā)。而且，GoJS也可以在headless或Node.js之類的服務器環(huán)境中運行。
通過相關(guān)技術(shù)說明、完整的API文檔、以及各種交互式示例，您可以深入了解GoJS的技術(shù)特性，以及如何將其運用到自己的應用中。
GoJS的試用版下載鏈接為：https://www.nwoods.com/products/register.html
售價：從3,495美元到9,950美元
Basic Primitives專注于提供族譜圖、組織結(jié)構(gòu)圖、不同大小的層次結(jié)構(gòu)、PERT圖、技術(shù)樹、以及業(yè)務所有權(quán)圖等。它使用SVG和Canvas之類流行的設計技術(shù)，來為主流瀏覽器創(chuàng)建各種圖表。用戶可以通過這款基于Web的圖表類JS庫，來輕松地生成報告并進行分析。
通過使用特殊的自動擬合模式，用戶可以查看到特定邏輯圖表節(jié)點的詳細信息。據(jù)此，被選中的節(jié)點會自動放大，而當用戶跳轉(zhuǎn)到下一個節(jié)點時，它會自動收縮，進而實現(xiàn)在大型族譜中，節(jié)點與瀏覽節(jié)奏的交互。此外，該JavaScript庫還可以根據(jù)用戶指定的排序規(guī)則，自動排列族譜樹上的節(jié)點。當然，如果指定的規(guī)則并不適合，系統(tǒng)也可以自動選擇忽略。
如果您習慣使用React、Angular JS和jQuery，那么由Basic Primitives產(chǎn)生的圖表可以被直接添加到您的應用中。而且，在集成過程中，您可以參考由其開發(fā)團隊提供的各種示例和API用例。
Basic Primitives的試用版下載鏈接為：https://www.basicprimitives.com/downloads
售價：從427美元到2,308美元
OrgChart JS是一種具有廣泛定制功能的JavaScript插件，可專門用于提供組織結(jié)構(gòu)圖，以及說明性的族譜圖。您既可以利用其預定義的模板，進行圖表的創(chuàng)建，又可以基于現(xiàn)成的圖表，為不同的應用創(chuàng)建自定義的模板或多個模板。此外，OrgChart JS允許用戶在同一個圖表對象中實現(xiàn)無限數(shù)量的子樹。當然，如果您對圖表的外觀有所要求的話，也可以按需自定義和調(diào)整其CSS。
如上圖所示，您可以通過鏈接，來查看英國皇室的完整族譜。
該插件的另一個實用功能是內(nèi)置編輯表單。它不但可以使您快速更新圖表及其元素，還能夠通過導航功能和擴展/折疊選項，來處理數(shù)據(jù)密集型圖表。此外，如果您需要與他人共享族譜，OrgChart JS也支持將圖表導出為：PDF、PNG、SVG、CSV等格式。
您可以通過文檔頁面，來獲悉OrgChart JS的功能描述，以及如何將該JavaScript插件與React、Vue.js、Angular等相集成。
OrgChart JS的試用版下載鏈接為：https://balkangraph.com/OrgChartJS/Download
售價：從399美元到4,999美元
6.dTree
dTree可以被用于創(chuàng)建具有眾多父級的基本族譜(如下圖所示)，或具有其他層次的圖表。這款輕巧的前端JavaScript庫用到了復雜的D3.js。D3.js利用最新的Web標準，通過各種類型的可視化界面，來呈現(xiàn)數(shù)據(jù)。值得一提的是，dTree使用的是簡單的JSON數(shù)據(jù)格式。
由dTree產(chǎn)生的圖表可以接受Treehouse在線查看器的檢查，并托管目標族譜，而無需額外創(chuàng)建網(wǎng)站。dTree能夠從GitHub處獲取數(shù)據(jù)，并以美觀的格式顯示數(shù)據(jù)。值得注意的是，在您的應用使用該JS庫之前，請務必加載D3 v4.x。您可以從其GitHub頁面，了解如何安裝與使用該圖表庫的更多信息。
售價：免費(持有MIT許可證)
原文標題：Top 6 JavaScript Family Tree Diagram Libraries，作者：Ivan Petrenko
【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】
