TML5多媒體作品以其對(duì)各種平臺(tái)的兼容而見(jiàn)長(zhǎng)，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個(gè)方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。

首先訪問(wèn)“百度H5”網(wǎng)頁(yè)（https://h5.baidu.com/），可以看到非常簡(jiǎn)單的頁(yè)面，僅有“我的H5”和“我的模板”兩個(gè)選項(xiàng)。其中“我的模板”是通過(guò)套用模板的方式來(lái)制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數(shù)來(lái)自由創(chuàng)作，制作好的作品也會(huì)顯示在這里（圖1）。

1. 通過(guò)創(chuàng)意模板輕松制作

在首頁(yè)中選擇“我的模板”，隨后會(huì)進(jìn)入一個(gè)模板展示頁(yè)面，這些都是設(shè)計(jì)者們分享的模板。根據(jù)你所要設(shè)計(jì)的作品的類(lèi)別，可以按類(lèi)選擇一個(gè)類(lèi)似的作品作為制作的模板，然后在此基礎(chǔ)上進(jìn)行修改，即可快速形成自己的多媒體作品（圖2）。

比如要制作一個(gè)招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點(diǎn)擊右下角的“使用模板”按鈕（圖3）。

接下來(lái)先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點(diǎn)擊“確定”按鈕（圖4）。

隨后進(jìn)入實(shí)質(zhì)性的模板修改編輯階段。對(duì)于不合適的內(nèi)容，可先刪除頁(yè)面元素再添加。點(diǎn)擊“文本”菜單插入所需文本內(nèi)容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀，則點(diǎn)擊“圖形”菜單選擇添加（圖5）。

此外，對(duì)于作品中所要用到的展示數(shù)據(jù)，可以通過(guò)插入圖表、表單等方式，非常輕松地完成數(shù)據(jù)展示制作（圖6）。如果要實(shí)現(xiàn)更多的效果，可通過(guò)“插件”菜單，選擇添加頁(yè)面加載套件和加載進(jìn)度、添加計(jì)數(shù)器、添加幀動(dòng)畫(huà)、添加相冊(cè)或地圖等。

對(duì)于需要修改的屬性，可通過(guò)窗口右側(cè)的分類(lèi)屬性窗口選擇設(shè)置。通過(guò)窗口下方的編輯區(qū)域，可控制動(dòng)畫(huà)、加載頁(yè)、全局全景和背景、當(dāng)前頁(yè)等參數(shù)設(shè)置。例如，要定制個(gè)性化的加載頁(yè)面效果，點(diǎn)擊“加載頁(yè)”選項(xiàng)卡，然后通過(guò)下方的滑塊，對(duì)加載頁(yè)中的圖片和進(jìn)度進(jìn)行自定義編輯（圖7）。

對(duì)頁(yè)面上的各種元素進(jìn)行修改和編輯完成之后，點(diǎn)擊工具欄左上角的磁盤(pán)按鈕將作品保存在網(wǎng)上。注意，編輯過(guò)程中產(chǎn)生的內(nèi)容軟件會(huì)自動(dòng)保存，但為了防止丟失，還是要養(yǎng)成勤于手動(dòng)保存的習(xí)慣。

最后，就可以發(fā)布作品了。點(diǎn)擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作（圖8）。

由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的，因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時(shí)要填寫(xiě)作品分享的標(biāo)題，設(shè)置個(gè)人域名。我們只需在“個(gè)性化域名”中填寫(xiě)自己命名的作品個(gè)性域名地址，發(fā)布后其他人就可以用這個(gè)域名來(lái)訪問(wèn)HTML5作品了（圖9）。

小提示：使用上述服務(wù)需要使用自己的百度賬號(hào)登錄。為維護(hù)網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過(guò)用戶(hù)實(shí)名制認(rèn)證方可進(jìn)行。

2. DIY 完全自己設(shè)計(jì)制作

套用模板適合于初學(xué)者或設(shè)計(jì)能力不強(qiáng)的用戶(hù)。其實(shí)，不用套用模板，完全可以從頭全部由自己來(lái)設(shè)計(jì)作品。

制作時(shí)，在主頁(yè)中選擇“我的H5”，然后點(diǎn)擊空白頁(yè)上印有圓圈套加號(hào)圖標(biāo)的按鈕，向?qū)?huì)詢(xún)問(wèn)創(chuàng)建什么樣的布局。從“分頁(yè)布局”或“整頁(yè)布局”中選擇一種布局方式。如果是分頁(yè)布局，則依靠頁(yè)面間的前后滑動(dòng)實(shí)現(xiàn)簡(jiǎn)單跳轉(zhuǎn)；如果是整頁(yè)布局，則將整個(gè)頁(yè)面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實(shí)現(xiàn)不同的功能（圖10）。

隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng)，只是全要親自設(shè)計(jì)，不能套用現(xiàn)成的組件而已。在創(chuàng)作過(guò)程中，只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容，用媒體和圖形工具添加圖片、圖形、音視頻，數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具，借助于“插件”擴(kuò)展來(lái)補(bǔ)充完善，發(fā)揮自由想象的創(chuàng)作空間，一定能創(chuàng)作出更具個(gè)性化的作品。

端數(shù)據(jù)可視化插件大盤(pán)點(diǎn) 圖表/圖譜/地圖/關(guān)系圖全有

在大數(shù)據(jù)時(shí)代，很多時(shí)候我們需要在網(wǎng)頁(yè)中顯示數(shù)據(jù)統(tǒng)計(jì)報(bào)表，從而能很直觀地了解數(shù)據(jù)的走向，開(kāi)發(fā)人員很多時(shí)候需要使用圖表來(lái)表現(xiàn)一些數(shù)據(jù)。隨著Web技術(shù)的發(fā)展，從傳統(tǒng)只能依靠于flash、IE的vml，各個(gè)瀏覽器尚不統(tǒng)一的svg，到如今規(guī)范統(tǒng)一的canvas、svg為代表的html5技術(shù)，表現(xiàn)點(diǎn)、線、面要素的技術(shù)已經(jīng)越來(lái)越規(guī)范成熟。我把前端數(shù)據(jù)可視化分為了五種：

1.圖表

2.圖譜

3.地圖

4.關(guān)系圖

5.立體圖

我將按照順序介紹62款前端可視化插件，下面就分享下34款圖表插件：

1.amcharts

url： http://www.amcharts.com/

browser：IE6+、chrome、safari、firefox、opear

resume：amCharts是一種先進(jìn)的圖表庫(kù),將適合任何數(shù)據(jù)可視化的需要。圖表解決方案包括柱、欄、線、區(qū)域,一步,一步?jīng)]有冒口,平滑線,燭臺(tái),OHLC,餡餅/甜甜圈,雷達(dá)/極地,XY /分散/泡沫,子彈,漏斗/金字塔圖以及指標(biāo)。

2.awesomechartjs

url：http://cyberpython.github.io/AwesomeChartJS/

github：https://github.com/cyberpython/AwesomeChartJS

browser：現(xiàn)代瀏覽器

resume：AwesomeChartJS是一個(gè)簡(jiǎn)單的Javascript庫(kù),可用于創(chuàng)建圖表基于HTML 5畫(huà)布元素。

3.axiis

url：http://www.axiis.org/

browser：官方未說(shuō)明

resume：Axiis框架是一個(gè)開(kāi)源的數(shù)據(jù)可視化為初學(xué)者和專(zhuān)家開(kāi)發(fā)人員設(shè)計(jì)的。

4.bonsaijs

url：http://bonsaijs.org/

github：https://github.com/uxebu/bonsai

browser：IE9+、chrome20+、safari5+、firefox18+、opear12+

resume：用于創(chuàng)建圖形和動(dòng)畫(huà)的js庫(kù)

5.canvasjs

url：http://canvasjs.com

browser：官方未說(shuō)明

resume：一個(gè)使用HTML5、JavaScript創(chuàng)建圖表在畫(huà)布上，圖表包括幾個(gè)好看的主題和10倍的速度比傳統(tǒng)的基于Flash / SVG庫(kù)——導(dǎo)致輕量級(jí)的,美麗的和響應(yīng)指示板。收費(fèi)

6.canvasxpress

url：http://canvasxpress.org/

browser：Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+

resume：CanvasXpress是一個(gè)獨(dú)立的Javascript編寫(xiě)的圖形庫(kù)，支持所有主流瀏覽器中計(jì)算機(jī)和移動(dòng)設(shè)備。

7.chartist

url：http://gionkunz.github.io/chartist-js/

github：https://github.com/gionkunz/chartist-js

browser：Firefox, Chrome, Safari, Opera, IE9+

resume：繪制多種圖形的庫(kù)

8.chartjs

url：http://www.chartjs.org/

github：https://github.com/nnnick/Chart.js

browser：IE9+、chrome、safari、firefox、opear、部分支持IE7/8

resume：chartjs是一個(gè)可以繪制多種圖表的庫(kù)，使用了html5的canvas技術(shù)

9.chartkick

url：http://ankane.github.io/chartkick/

github：https://github.com/ankane/chartkick

browser：IE6+、chrome、safari、firefox、opear

resume：chartkick是一個(gè)依賴(lài)于ruby的繪制圖表的js庫(kù)，在Python中也可以使用

10.DataWrapper

url：https://datawrapper.de/

github：https://github.com/datawrapper/datawrapper

browser：支持大部分瀏覽器

resume：Datawrapper完全免費(fèi)，開(kāi)源。您可以使用他們的免費(fèi)主機(jī)服務(wù)，或者安裝在您自己的服務(wù)器上。Datawrapper用PHP編寫(xiě)，非常易于安裝、修改和拓展?？梢岳L制。但是DataWrapper是生成圖表后嵌入到站點(diǎn)的。

11.dataset

url：http://misoproject.com/dataset/

github：https://github.com/misoproject/dataset

browser：官方未說(shuō)明

resume：dataset是一個(gè)JavaScript客戶(hù)端數(shù)據(jù)轉(zhuǎn)換和管理庫(kù)。數(shù)據(jù)集管理客戶(hù)端數(shù)據(jù)簡(jiǎn)單處理加載、解析、排序、查詢(xún)和操縱來(lái)自各種數(shù)據(jù)源的數(shù)據(jù)。

12.dc

url：http://dc-js.github.io/dc.js/

github：https://github.com/dc-js/dc.js

browser：官方未說(shuō)明

resume：專(zhuān)門(mén)為探索大型、多維數(shù)據(jù)集而進(jìn)行優(yōu)化的庫(kù)

13.dygraphs

url：http://dygraphs.com/

browser：IE8+、chrome、safari、firefox、opear

resume：dygraphs是一種快速、靈活的開(kāi)源JavaScript庫(kù)圖表。

14.echart

url：http://echarts.baidu.com/index.html

github：https://github.com/ecomfe/echarts

browser：IE9+、chrome、safari、firefox、opear

resume：基于Canvas，純Javascript圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶(hù)體驗(yàn)，賦予了用戶(hù)對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

15.flotr2

url：http://www.humblesoftware.com/flotr2/

github：https://github.com/HumbleSoftware/Flotr2

browser：FF, Chrome, IE6+, Android, iOS

resume：Flotr2是HTML5畫(huà)圖表和圖形庫(kù)。可以繪制線圖、條圖、蠟狀圖、餅圖、氣泡圖

16.Flot

url：http://www.flotcharts.org/

browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+

resume：一個(gè)基于jQuery的繪圖庫(kù)，可以繪制折線、散點(diǎn)、條形、餅狀圖

17.fusioncharts

url：http://www.fusioncharts.com/

browser：IE6+、chrome、safari、firefox、opear

resume：一個(gè)專(zhuān)門(mén)用來(lái)繪制圖表的庫(kù)，可以繪制90多種圖表，但是收費(fèi)

18.graphael

url：http://g.raphaeljs.com/

browser：Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+

resume：可以繪制各種圖表的插件，而且非常簡(jiǎn)單靈活

19.highchart

url：http://www.highcharts.com/

github：https://github.com/highslide-software/highcharts.com/

browser：支持各種設(shè)備，ie6+

resume：在高版本瀏覽器中使用SVG，而在舊版本IE(包括IE6及更新版本)中使用后備的VML。有自己的團(tuán)隊(duì)負(fù)責(zé)，但是只對(duì)非商業(yè)用途免費(fèi)，可以繪制 line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types

20.humble Finance

url：http://www.humblesoftware.com/finance/index

browser：FireFox, Safari, Chromium, or IE6+

resume：HumbleFinance是一個(gè)HTML5數(shù)據(jù)可視化工具類(lèi)似于Flash工具，完全是用JavaScript編寫(xiě)的工具使用原型和Flotr庫(kù)。

21.ichartjs

url：http://www.ichartjs.com/

github：https://github.com/wanghetommy/ichartjs

browser：IE9+、chrome、safari、firefox、opear

resume：ichartjs 是一款基于HTML5的圖形庫(kù)。使用純javascript語(yǔ)言, 利用HTML5的canvas標(biāo)簽繪制各式圖形。 ichartjs致力于為您的應(yīng)用提供簡(jiǎn)單、直觀、可交互的體驗(yàn)級(jí)圖表組件。ichartjs目前支持餅圖、環(huán)形圖、折線圖、面積圖、柱形圖、條形圖。

22.icharts

url：http://www.icharts.net/

browser：官方未說(shuō)明

resume：iCharts免費(fèi)版本提供了一些基本的交互式圖表樣式，如果更使用高級(jí)的樣式，則需要購(gòu)買(mǎi)高級(jí)版本。

23.JavaScript InfoVis Toolkit

url：http://philogb.github.io/jit/

github：https://github.com/philogb/jit

browser：官方未給出具體版本

resume：JavaScript InfoVis Toolkit可以動(dòng)態(tài)繪制各種圖形，提供了一些預(yù)設(shè)的樣式可用于展示不同的數(shù)據(jù)

24.jqplot

url：http://www.jqplot.com/

browser：IE 7+, Firefox, Safari, and Opera

resume：基于jQuery的繪圖插件，可以繪制折線、條形、散點(diǎn)、餅狀圖

25.jscharts

url：http://www.jscharts.com/

browser：Firefox 1.5 +，Chrome 10 +，Internet Explorer 8 +，Safari 3.1 +，Opera 9 +

resume：jscharts是一個(gè)基于JavaScript的圖表生成器,需要很少或根本沒(méi)有編碼。jscharts繪制圖表是一個(gè)簡(jiǎn)單和容易的任務(wù),因?yàn)槟恍枰褂每蛻?hù)端腳本(即由web瀏覽器)。不需要額外的插件或服務(wù)器模塊。就包括我們的腳本,準(zhǔn)備你的圖表數(shù)據(jù)XML、JSON或JavaScript數(shù)組和你的表已經(jīng)準(zhǔn)備好了!允許您創(chuàng)建圖柱狀圖,餅圖或簡(jiǎn)單的線條圖。收費(fèi)但是有免費(fèi)版本。

26.kendo-ui

url：http://www.telerik.com/kendo-ui

github：https://github.com/telerik/kendo-ui-core

browser：現(xiàn)代瀏覽器

resume：http://www.cnblogs.com/xiyangbaixue/p/3951297.html

27.nvd3

url：http://nvd3.org/

github：https://github.com/novus/nvd3

browser：Chrome,Firefox, Opera, Safari and Internet Explorer 10

resume：d3圖表庫(kù)

28.pizza-pie-charts

url：http://zurb.com/playground/pizza-pie-charts

github：https://github.com/zurb/pizza

browser：官方未說(shuō)明

resume：主要用來(lái)生成餅狀圖的庫(kù)

29.protovis

url：http://mbostock.github.io/protovis/

github：https://github.com/mbostock/protovis

browser：現(xiàn)代瀏覽器

resume：Protovis組成自定義視圖的數(shù)據(jù)用簡(jiǎn)單的標(biāo)志如酒吧和點(diǎn)。與低級(jí)圖形庫(kù),迅速成為可視化乏味,Protovis定義是通過(guò)編碼數(shù)據(jù)的動(dòng)態(tài)屬性,允許繼承,尺度和layoutsto簡(jiǎn)化施工。

30.Peity

url：http://benpickles.github.io/peity/

browser：Chrome, Firefox, IE9+, Opera, Safari

resume：可以繪制多種圖形，但是都是很小的圖形，與jQuery Sparklines相似

31.rgraph

url：http://www.rgraph.net/

browser：現(xiàn)代瀏覽器

resume：RGraph是一個(gè)基于HTML5的開(kāi)放web圖表和圖表庫(kù)。RGraph創(chuàng)建這些圖表在web瀏覽器使用JavaScript,這意味著更快的頁(yè)面和web服務(wù)器負(fù)載,導(dǎo)致較小的頁(yè)面大小和更快的網(wǎng)站。

32.webfx

url：http://webfx.eae.net/

browser：Firefox 1.5, Opera 9 and Internet Explorer 6

resume：支持多種圖表的庫(kù)

33.xcharts

url：http://tenxer.github.io/xcharts/

github：https://github.com/tenXer/xcharts/

browser：現(xiàn)代瀏覽器

resume：xCharts美麗是一個(gè)JavaScript庫(kù),用于構(gòu)建和自定義數(shù)據(jù)驅(qū)動(dòng)的web使用D3.js圖表可視化。使用HTML、CSS和SVG,xCharts被設(shè)計(jì)成動(dòng)態(tài)、流體、集成和定制。

34.zingchart

url：http://www.zingchart.com/

browser：官方未聲明

resume：ZingChart創(chuàng)造驚人的可視化提供了靈活性和資源。提供超過(guò)100個(gè)圖表類(lèi)型，獨(dú)特的特性,如縮放和交互式。

小結(jié)：

每款插件各有千秋，根據(jù)項(xiàng)目需求挑選不同插件。其中比較廣泛使用的如echart(百度產(chǎn)品)、highchart等，下面我將分享圖譜插件。

9款圖譜插件：

1.crossfilter

url：http://square.github.io/crossfilter/

github：https://github.com/square/crossfilter

browser：官方未說(shuō)明

resume：一個(gè)可以操作大型、多元數(shù)據(jù)集的庫(kù)，幫助數(shù)據(jù)分析。

2.d3js

url：http://d3js.org/

github：https://github.com/mbostock/d3

browser：Firefox, Chrome, Safari, Opera, IE9+

resume：D3.js是一個(gè)JavaScript庫(kù),基于數(shù)據(jù)操作文檔。D3可以幫助你把數(shù)據(jù)使用HTML、SVG和CSS。D3強(qiáng)調(diào)web標(biāo)準(zhǔn)給你完整的現(xiàn)代瀏覽器的功能沒(méi)有把自己和一個(gè)專(zhuān)有的框架,結(jié)合強(qiáng)大的可視化組件和DOM操作的數(shù)據(jù)驅(qū)動(dòng)的方法。

3.envisionjs

url：http://www.humblesoftware.com/envision/index

github：https://github.com/HumbleSoftware/envisionjs

browser：IE6+、chrome、safari、firefox、opear

resume：envisionjs是一個(gè)庫(kù)來(lái)創(chuàng)建快速、動(dòng)態(tài)和交互式可視化的圖表

4.jsxgraph

url：http://jsxgraph.uni-bayreuth.de/wp/

github：https://github.com/jsxgraph/jsxgraph

browser：現(xiàn)代瀏覽器

resume：JSXGraph交互式幾何是一個(gè)跨瀏覽器的庫(kù),函數(shù)繪圖,圖表和數(shù)據(jù)可視化在web瀏覽器中。它完全實(shí)現(xiàn)在JavaScript中,不依賴(lài)于任何其他庫(kù),并使用SVG VML或畫(huà)布上。

5.paperjs

url：http://paperjs.org/

github：https://github.com/paperjs/paper.js

browser：IE9+,chrome,firefox

resume：paperjs是一款不可多得的js插件，可以繪制各種動(dòng)態(tài)圖形效果

6.processingjs

url：http://processingjs.org/

github：https://github.com/processing-js/processing-js/

browser：現(xiàn)代瀏覽器

resume：processingjs是用Java編寫(xiě)的，所以圖形在網(wǎng)頁(yè)上顯示要靠Java程序，使用canvas技術(shù)

7.Rapha?l

url：http://raphaeljs.com/

github：

browser：Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

resume：Rapha?l是一款繪制矢量圖的插件，支持低版本的瀏覽器

8.sparklines

url：http://omnipotent.net/jquery.sparkline/#s-about

github：

browser：Firefox 2+, Safari 3+, Opera 9, Chrome and Internet Explorer 6+，ios和andriod設(shè)備

resume：使用內(nèi)嵌在HTML中的數(shù)據(jù)或通過(guò)javascript直接生成微線圖(小內(nèi)聯(lián)圖表)，最主要的特點(diǎn)是可以生成波形圖。

9.tangle

url：http://worrydream.com/Tangle/

github：

browser：

resume：Tangle是一個(gè)JavaScript庫(kù),用于創(chuàng)建活性文檔。讀者可以交互式地探索可能性,玩參數(shù),并立即看到文檔更新。Tangle是超級(jí)簡(jiǎn)單,容易學(xué)習(xí)。

小結(jié)：后面將分享6款地圖插件。

6款地圖插件:

1.Kartograph

url：http://kartograph.org/

github：https://github.com/kartograph/kartograph.py

browser：Internet Explorer 7+，chrome，F(xiàn)irefox

resume：Gregor Aisch開(kāi)發(fā)的一個(gè)基于JavaScript和Python的非常炫的、完全使用矢量的庫(kù)。

2.leafletjs

url：http://leafletjs.com/

github：https://github.com/Leaflet/Leaflet

browser：Chrome，F(xiàn)irefox，Safari 5+，Opera 12+，IE 7–11

resume：leafletjs是一個(gè)開(kāi)源的支持移動(dòng)端的地圖插件，js文件僅僅有33kb，

3.Modest Maps

url：http://modestmaps.com/

github：https://github.com/modestmaps/modestmaps-js

browser：Firefox, Chrome, Opera, iOS, Android, and Internet Explorer 7-9.

resume：Modest Maps支持各種設(shè)備，也有很多版本。雖然是一款老的地圖插件，但是非常小、可擴(kuò)展而且免費(fèi)

4.polymaps

url：http://polymaps.org/

github：https://github.com/simplegeo/polymaps

browser：現(xiàn)代瀏覽器

resume：Polymaps依賴(lài)于SVG，因此在較新的瀏覽器中表現(xiàn)很好。

5.imagemapster

url：http://www.outsharked.com/imagemapster/

browser：Firefox, Chrome, Safari, Opera, IE6+

resume：ImageMapster是一個(gè)jQuery插件,它使你的HTML圖片像Flash一樣炫

6.datavlab

url：http://datavlab.org/

github：https://github.com/TBEDP/datavjs

browser：IE6+、chrome、safari、firefox、opear

resume：datav.js是為了降低日常對(duì)于可視化方法使用的成本，用數(shù)據(jù)可視化的方法幫助到更多的人。

現(xiàn)在來(lái)分享9款關(guān)系圖插件:

1.arborjs

url：http://arborjs.org/halfviz/#/a-new-hope

github：https://github.com/samizdatco/arbor

browser：IE6+,chrome,firefox

resume：基于jQuery的圖譜可視化庫(kù)，對(duì)于高版本的瀏覽器這個(gè)庫(kù)使用了HTML的canvas元素

2.cubism

url：http://square.github.io/cubism/

github：https://github.com/square/cubism

browser：官方未說(shuō)明

resume：時(shí)間序列數(shù)據(jù)可視化的D3插件

3.gantti

url：http://bastianallgeier.com/gantti/

github：https://github.com/bastianallgeier/gantti

browser：IE7+、chrome、safari、firefox、opear

resume：是一款PHP的前端數(shù)據(jù)展示插件

4.getspringy

url：http://getspringy.com/

github：https://github.com/dhotson/springy/

browser：官方未說(shuō)明

resume：Springy是一個(gè)使用JavaScirpt實(shí)現(xiàn)的有向圖布局算法，使用了真實(shí)世界中的一些物理原理，你可以隨意拖動(dòng)圖表中的元素。

5.graphdracula

url：http://www.graphdracula.net/

github：https://github.com/strathausen/dracula

browser：官方未說(shuō)明

resume：graphdracula是一組工具來(lái)顯示和布局互動(dòng)圖表,以及各種相關(guān)算法。

6.sigamajs

url：http://sigmajs.org/

github：https://github.com/jacomyal/sigma.js

browser：IE9+,chrome,firefox

resume：一個(gè)非常輕量級(jí)的圖譜可視化庫(kù)。Sigma.js很漂亮，速度也快。

7.smoothiecharts

url：http://smoothiecharts.org/

github：https://github.com/joewalnes/smoothie/

browser：IE7+、chrome、safari、firefox、opear

resume：smoothiecharts是一個(gè)非常小的圖表庫(kù)為實(shí)時(shí)流媒體數(shù)據(jù)而設(shè)計(jì)的

8.timeplot

url：http://www.simile-widgets.org/timeplot/

github：

browser：官方未說(shuō)明

resume：Timeplot是基于dhtml AJAXy部件繪圖時(shí)間序列和覆蓋基于時(shí)間的事件

9.visjs

url：http://visjs.org/

github：https://github.com/almende/vis/

browser：Chrome, Firefox, Opera, Safari, IE9+

resume：Vis.js是一個(gè)動(dòng)態(tài)的、基于瀏覽器可視化庫(kù)。庫(kù)被設(shè)計(jì)成易于使用,處理大量的動(dòng)態(tài)數(shù)據(jù),使操作和交互的數(shù)據(jù)。時(shí)間表,包括組件庫(kù)數(shù)據(jù)集網(wǎng)絡(luò)、Graph2d,Graph3d。

End. 作者：夕陽(yáng)白雪 via：36大數(shù)據(jù) 感謝！