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