整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
多企業(yè)在進(jìn)行數(shù)據(jù)分析設(shè)計的時候，都特別青睞于用地圖來反映企業(yè)的營業(yè)收入情況，不僅有利于對于各個城市的營收情況，也能對地圖進(jìn)行不同顏色的渲染，以此達(dá)到預(yù)警的效果。
今天小編用億信ABI給大家演示一遍如何設(shè)置html5地圖來展示企業(yè)的營業(yè)收入情況。億信ABI是億信華辰自主研發(fā)的一款從數(shù)據(jù)源接入，到數(shù)據(jù)采集、數(shù)據(jù)處理，再到數(shù)據(jù)分析和挖掘，打通數(shù)據(jù)生命周期的各個環(huán)節(jié)，實現(xiàn)數(shù)據(jù)填報、處理、分析一體化的一站式數(shù)據(jù)分析工具。
1、在億信華辰官網(wǎng)打開億信ABI的試用版本，點擊“數(shù)據(jù)分析”中的“圖表分析”，在左側(cè)的工具欄中添加統(tǒng)計圖組件，選擇html5地圖類型，將柱狀圖組件以拖拽到方式添加到報表模板中：
雙擊組件出現(xiàn)統(tǒng)計圖設(shè)置窗口，選擇“統(tǒng)計圖類型”后在左側(cè)欄中找到“地圖”這一項。選擇你需要的地圖類型，點擊確定。
目前有5種類型的html5地圖：流向圖，主干線圖，雙線圖，渲染圖，標(biāo)點圖，3D地球。
2、html5地圖類型介紹
（1）流向圖：常用來可視化源匯流數(shù)據(jù)。源地和匯地可以是點，也可以是面。源地和匯地之間的互動數(shù)據(jù)，常用線段來表達(dá)，線的寬度或顏色來表示源地和匯地之間的流向數(shù)值，線段上可以使用自定義圖片如箭頭來表示流向方向。流向地圖多應(yīng)用于區(qū)際貿(mào)易、交通流向、人口遷移、購物消費行為、通訊信息流動、航空線路等場景。
（2）主干線圖：帶主干線的地圖，用于查看地理位置信息之上定義的關(guān)系圖。
（3）渲染圖：地圖按區(qū)域指標(biāo)數(shù)值大小以不同的顏色渲染來展示和區(qū)分，以起到預(yù)警的作用。
（4）標(biāo)點圖：標(biāo)點和地圖的結(jié)合，我們以地圖為背景，在上面標(biāo)點。我們將標(biāo)點展示在一個指定的地理區(qū)域內(nèi)，標(biāo)點里可以展示數(shù)值。
（5）3D地球：具3D效果的地球統(tǒng)計圖，外形如地球儀，會自動緩慢旋轉(zhuǎn)以展現(xiàn)世界地圖的全貌。
此處以渲染圖為例講解制作過程，其他類型的制作流程都大同小異。
3、html5地圖取數(shù)設(shè)置
重新回到工作區(qū)域，從右側(cè)的“基礎(chǔ)組件”中拖入一個分析區(qū)表格，在分析表拾取相應(yīng)的主題表數(shù)據(jù)，根據(jù)地區(qū)維度浮動出指標(biāo)值（設(shè)置“浮動維單元格”）。
雙擊“統(tǒng)計圖”，在統(tǒng)計圖設(shè)置中設(shè)置數(shù)據(jù)源，關(guān)聯(lián)做好的分析表格，如圖。
4、調(diào)整地圖配色
為了讓地圖的效果更好，通常會先選擇系統(tǒng)中提供的配色方案，然后再設(shè)置標(biāo)題、微調(diào)背景墻壁、邊框和填充等的顏色樣式。如下圖所示，選擇需要的配色方案之后，在預(yù)覽中就能看到地圖的配色效果。
接著，可以在高級選項中，設(shè)置邊框和填充色，其他微調(diào)設(shè)置就不一一介紹。
5、其他設(shè)置
可以同時使用標(biāo)點圖和渲染圖：添加兩個系列，分別選擇不同的系列類型。
還可以選擇地圖類型：
最后保存，計算。
顏色偏藍(lán)說明收入良好，偏黃說明狀況不佳。
如果你對億信華辰DEMO的效果感興趣，可以去官網(wǎng)詳細(xì)查看全新demo的技術(shù)解析，包括從導(dǎo)航頁到數(shù)據(jù)等的深度呈現(xiàn)如何實現(xiàn)等技巧。
今天的教程就到這里吧！希望對你有幫助哦~勤加練習(xí)，探索更多的解決辦法，彰顯你的數(shù)據(jù)天賦！小伙伴們，加油吧！
TML5多媒體作品以其對各種平臺的兼容而見長，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。
首先訪問“百度H5”網(wǎng)頁（https://h5.baidu.com/），可以看到非常簡單的頁面，僅有“我的H5”和“我的模板”兩個選項。其中“我的模板”是通過套用模板的方式來制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數(shù)來自由創(chuàng)作，制作好的作品也會顯示在這里（圖1）。
1. 通過創(chuàng)意模板輕松制作
在首頁中選擇“我的模板”，隨后會進(jìn)入一個模板展示頁面，這些都是設(shè)計者們分享的模板。根據(jù)你所要設(shè)計的作品的類別，可以按類選擇一個類似的作品作為制作的模板，然后在此基礎(chǔ)上進(jìn)行修改，即可快速形成自己的多媒體作品（圖2）。
比如要制作一個招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點擊右下角的“使用模板”按鈕（圖3）。
接下來先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點擊“確定”按鈕（圖4）。
隨后進(jìn)入實質(zhì)性的模板修改編輯階段。對于不合適的內(nèi)容，可先刪除頁面元素再添加。點擊“文本”菜單插入所需文本內(nèi)容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀，則點擊“圖形”菜單選擇添加（圖5）。
此外，對于作品中所要用到的展示數(shù)據(jù)，可以通過插入圖表、表單等方式，非常輕松地完成數(shù)據(jù)展示制作（圖6）。如果要實現(xiàn)更多的效果，可通過“插件”菜單，選擇添加頁面加載套件和加載進(jìn)度、添加計數(shù)器、添加幀動畫、添加相冊或地圖等。
對于需要修改的屬性，可通過窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過窗口下方的編輯區(qū)域，可控制動畫、加載頁、全局全景和背景、當(dāng)前頁等參數(shù)設(shè)置。例如，要定制個性化的加載頁面效果，點擊“加載頁”選項卡，然后通過下方的滑塊，對加載頁中的圖片和進(jìn)度進(jìn)行自定義編輯（圖7）。
對頁面上的各種元素進(jìn)行修改和編輯完成之后，點擊工具欄左上角的磁盤按鈕將作品保存在網(wǎng)上。注意，編輯過程中產(chǎn)生的內(nèi)容軟件會自動保存，但為了防止丟失，還是要養(yǎng)成勤于手動保存的習(xí)慣。
最后，就可以發(fā)布作品了。點擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作（圖8）。
由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的，因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時要填寫作品分享的標(biāo)題，設(shè)置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址，發(fā)布后其他人就可以用這個域名來訪問HTML5作品了（圖9）。
小提示：使用上述服務(wù)需要使用自己的百度賬號登錄。為維護(hù)網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過用戶實名制認(rèn)證方可進(jìn)行。
2. DIY 完全自己設(shè)計制作
套用模板適合于初學(xué)者或設(shè)計能力不強(qiáng)的用戶。其實，不用套用模板，完全可以從頭全部由自己來設(shè)計作品。
制作時，在主頁中選擇“我的H5”，然后點擊空白頁上印有圓圈套加號圖標(biāo)的按鈕，向?qū)儐杽?chuàng)建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局，則依靠頁面間的前后滑動實現(xiàn)簡單跳轉(zhuǎn)；如果是整頁布局，則將整個頁面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實現(xiàn)不同的功能（圖10）。
隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng)，只是全要親自設(shè)計，不能套用現(xiàn)成的組件而已。在創(chuàng)作過程中，只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容，用媒體和圖形工具添加圖片、圖形、音視頻，數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具，借助于“插件”擴(kuò)展來補(bǔ)充完善，發(fā)揮自由想象的創(chuàng)作空間，一定能創(chuàng)作出更具個性化的作品。
端數(shù)據(jù)可視化插件大盤點 圖表/圖譜/地圖/關(guān)系圖全有
在大數(shù)據(jù)時代，很多時候我們需要在網(wǎng)頁中顯示數(shù)據(jù)統(tǒng)計報表，從而能很直觀地了解數(shù)據(jù)的走向，開發(fā)人員很多時候需要使用圖表來表現(xiàn)一些數(shù)據(jù)。隨著Web技術(shù)的發(fā)展，從傳統(tǒng)只能依靠于flash、IE的vml，各個瀏覽器尚不統(tǒng)一的svg，到如今規(guī)范統(tǒng)一的canvas、svg為代表的html5技術(shù)，表現(xiàn)點、線、面要素的技術(shù)已經(jīng)越來越規(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)的圖表庫,將適合任何數(shù)據(jù)可視化的需要。圖表解決方案包括柱、欄、線、區(qū)域,一步,一步?jīng)]有冒口,平滑線,燭臺,OHLC,餡餅/甜甜圈,雷達(dá)/極地,XY /分散/泡沫,子彈,漏斗/金字塔圖以及指標(biāo)。
2.awesomechartjs
url：http://cyberpython.github.io/AwesomeChartJS/
github：https://github.com/cyberpython/AwesomeChartJS
browser：現(xiàn)代瀏覽器
resume：AwesomeChartJS是一個簡單的Javascript庫,可用于創(chuàng)建圖表基于HTML 5畫布元素。
3.axiis
url：http://www.axiis.org/
browser：官方未說明
resume：Axiis框架是一個開源的數(shù)據(jù)可視化為初學(xué)者和專家開發(fā)人員設(shè)計的。
4.bonsaijs
url：http://bonsaijs.org/
github：https://github.com/uxebu/bonsai
browser：IE9+、chrome20+、safari5+、firefox18+、opear12+
resume：用于創(chuàng)建圖形和動畫的js庫
5.canvasjs
url：http://canvasjs.com
browser：官方未說明
resume：一個使用HTML5、JavaScript創(chuàng)建圖表在畫布上，圖表包括幾個好看的主題和10倍的速度比傳統(tǒng)的基于Flash / SVG庫——導(dǎo)致輕量級的,美麗的和響應(yīng)指示板。收費
6.canvasxpress
url：http://canvasxpress.org/
browser：Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+
resume：CanvasXpress是一個獨立的Javascript編寫的圖形庫，支持所有主流瀏覽器中計算機(jī)和移動設(shè)備。
7.chartist
url：http://gionkunz.github.io/chartist-js/
github：https://github.com/gionkunz/chartist-js
browser：Firefox, Chrome, Safari, Opera, IE9+
resume：繪制多種圖形的庫
8.chartjs
url：http://www.chartjs.org/
github：https://github.com/nnnick/Chart.js
browser：IE9+、chrome、safari、firefox、opear、部分支持IE7/8
resume：chartjs是一個可以繪制多種圖表的庫，使用了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是一個依賴于ruby的繪制圖表的js庫，在Python中也可以使用
10.DataWrapper
url：https://datawrapper.de/
github：https://github.com/datawrapper/datawrapper
browser：支持大部分瀏覽器
resume：Datawrapper完全免費，開源。您可以使用他們的免費主機(jī)服務(wù)，或者安裝在您自己的服務(wù)器上。Datawrapper用PHP編寫，非常易于安裝、修改和拓展。可以繪制。但是DataWrapper是生成圖表后嵌入到站點的。
11.dataset
url：http://misoproject.com/dataset/
github：https://github.com/misoproject/dataset
browser：官方未說明
resume：dataset是一個JavaScript客戶端數(shù)據(jù)轉(zhuǎn)換和管理庫。數(shù)據(jù)集管理客戶端數(shù)據(jù)簡單處理加載、解析、排序、查詢和操縱來自各種數(shù)據(jù)源的數(shù)據(jù)。
12.dc
url：http://dc-js.github.io/dc.js/
github：https://github.com/dc-js/dc.js
browser：官方未說明
resume：專門為探索大型、多維數(shù)據(jù)集而進(jìn)行優(yōu)化的庫
13.dygraphs
url：http://dygraphs.com/
browser：IE8+、chrome、safari、firefox、opear
resume：dygraphs是一種快速、靈活的開源JavaScript庫圖表。
14.echart
url：http://echarts.baidu.com/index.html
github：https://github.com/ecomfe/echarts
browser：IE9+、chrome、safari、firefox、opear
resume：基于Canvas，純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗，賦予了用戶對數(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畫圖表和圖形庫。可以繪制線圖、條圖、蠟狀圖、餅圖、氣泡圖
16.Flot
url：http://www.flotcharts.org/
browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
resume：一個基于jQuery的繪圖庫，可以繪制折線、散點、條形、餅狀圖
17.fusioncharts
url：http://www.fusioncharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：一個專門用來繪制圖表的庫，可以繪制90多種圖表，但是收費
18.graphael
url：http://g.raphaeljs.com/
browser：Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
resume：可以繪制各種圖表的插件，而且非常簡單靈活
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)隊負(fù)責(zé)，但是只對非商業(yè)用途免費，可以繪制 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是一個HTML5數(shù)據(jù)可視化工具類似于Flash工具，完全是用JavaScript編寫的工具使用原型和Flotr庫。
21.ichartjs
url：http://www.ichartjs.com/
github：https://github.com/wanghetommy/ichartjs
browser：IE9+、chrome、safari、firefox、opear
resume：ichartjs 是一款基于HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標(biāo)簽繪制各式圖形。 ichartjs致力于為您的應(yīng)用提供簡單、直觀、可交互的體驗級圖表組件。ichartjs目前支持餅圖、環(huán)形圖、折線圖、面積圖、柱形圖、條形圖。
22.icharts
url：http://www.icharts.net/
browser：官方未說明
resume：iCharts免費版本提供了一些基本的交互式圖表樣式，如果更使用高級的樣式，則需要購買高級版本。
23.JavaScript InfoVis Toolkit
url：http://philogb.github.io/jit/
github：https://github.com/philogb/jit
browser：官方未給出具體版本
resume：JavaScript InfoVis Toolkit可以動態(tài)繪制各種圖形，提供了一些預(yù)設(shè)的樣式可用于展示不同的數(shù)據(jù)
24.jqplot
url：http://www.jqplot.com/
browser：IE 7+, Firefox, Safari, and Opera
resume：基于jQuery的繪圖插件，可以繪制折線、條形、散點、餅狀圖
25.jscharts
url：http://www.jscharts.com/
browser：Firefox 1.5 +，Chrome 10 +，Internet Explorer 8 +，Safari 3.1 +，Opera 9 +
resume：jscharts是一個基于JavaScript的圖表生成器,需要很少或根本沒有編碼。jscharts繪制圖表是一個簡單和容易的任務(wù),因為您只需要使用客戶端腳本(即由web瀏覽器)。不需要額外的插件或服務(wù)器模塊。就包括我們的腳本,準(zhǔn)備你的圖表數(shù)據(jù)XML、JSON或JavaScript數(shù)組和你的表已經(jīng)準(zhǔn)備好了!允許您創(chuàng)建圖柱狀圖,餅圖或簡單的線條圖。收費但是有免費版本。
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圖表庫
28.pizza-pie-charts
url：http://zurb.com/playground/pizza-pie-charts
github：https://github.com/zurb/pizza
browser：官方未說明
resume：主要用來生成餅狀圖的庫
29.protovis
url：http://mbostock.github.io/protovis/
github：https://github.com/mbostock/protovis
browser：現(xiàn)代瀏覽器
resume：Protovis組成自定義視圖的數(shù)據(jù)用簡單的標(biāo)志如酒吧和點。與低級圖形庫,迅速成為可視化乏味,Protovis定義是通過編碼數(shù)據(jù)的動態(tài)屬性,允許繼承,尺度和layoutsto簡化施工。
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是一個基于HTML5的開放web圖表和圖表庫。RGraph創(chuàng)建這些圖表在web瀏覽器使用JavaScript,這意味著更快的頁面和web服務(wù)器負(fù)載,導(dǎo)致較小的頁面大小和更快的網(wǎng)站。
32.webfx
url：http://webfx.eae.net/
browser：Firefox 1.5, Opera 9 and Internet Explorer 6
resume：支持多種圖表的庫
33.xcharts
url：http://tenxer.github.io/xcharts/
github：https://github.com/tenXer/xcharts/
browser：現(xiàn)代瀏覽器
resume：xCharts美麗是一個JavaScript庫,用于構(gòu)建和自定義數(shù)據(jù)驅(qū)動的web使用D3.js圖表可視化。使用HTML、CSS和SVG,xCharts被設(shè)計成動態(tài)、流體、集成和定制。
34.zingchart
url：http://www.zingchart.com/
browser：官方未聲明
resume：ZingChart創(chuàng)造驚人的可視化提供了靈活性和資源。提供超過100個圖表類型，獨特的特性,如縮放和交互式。
小結(jié)：
每款插件各有千秋，根據(jù)項目需求挑選不同插件。其中比較廣泛使用的如echart(百度產(chǎn)品)、highchart等，下面我將分享圖譜插件。
9款圖譜插件：
1.crossfilter
url：http://square.github.io/crossfilter/
github：https://github.com/square/crossfilter
browser：官方未說明
resume：一個可以操作大型、多元數(shù)據(jù)集的庫，幫助數(shù)據(jù)分析。
2.d3js
url：http://d3js.org/
github：https://github.com/mbostock/d3
browser：Firefox, Chrome, Safari, Opera, IE9+
resume：D3.js是一個JavaScript庫,基于數(shù)據(jù)操作文檔。D3可以幫助你把數(shù)據(jù)使用HTML、SVG和CSS。D3強(qiáng)調(diào)web標(biāo)準(zhǔn)給你完整的現(xiàn)代瀏覽器的功能沒有把自己和一個專有的框架,結(jié)合強(qiáng)大的可視化組件和DOM操作的數(shù)據(jù)驅(qū)動的方法。
3.envisionjs
url：http://www.humblesoftware.com/envision/index
github：https://github.com/HumbleSoftware/envisionjs
browser：IE6+、chrome、safari、firefox、opear
resume：envisionjs是一個庫來創(chuàng)建快速、動態(tài)和交互式可視化的圖表
4.jsxgraph
url：http://jsxgraph.uni-bayreuth.de/wp/
github：https://github.com/jsxgraph/jsxgraph
browser：現(xiàn)代瀏覽器
resume：JSXGraph交互式幾何是一個跨瀏覽器的庫,函數(shù)繪圖,圖表和數(shù)據(jù)可視化在web瀏覽器中。它完全實現(xiàn)在JavaScript中,不依賴于任何其他庫,并使用SVG VML或畫布上。
5.paperjs
url：http://paperjs.org/
github：https://github.com/paperjs/paper.js
browser：IE9+,chrome,firefox
resume：paperjs是一款不可多得的js插件，可以繪制各種動態(tài)圖形效果
6.processingjs
url：http://processingjs.org/
github：https://github.com/processing-js/processing-js/
browser：現(xiàn)代瀏覽器
resume：processingjs是用Java編寫的，所以圖形在網(wǎng)頁上顯示要靠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ù)或通過javascript直接生成微線圖(小內(nèi)聯(lián)圖表)，最主要的特點是可以生成波形圖。
9.tangle
url：http://worrydream.com/Tangle/
github：
browser：
resume：Tangle是一個JavaScript庫,用于創(chuàng)建活性文檔。讀者可以交互式地探索可能性,玩參數(shù),并立即看到文檔更新。Tangle是超級簡單,容易學(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開發(fā)的一個基于JavaScript和Python的非常炫的、完全使用矢量的庫。
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是一個開源的支持移動端的地圖插件，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ò)展而且免費
4.polymaps
url：http://polymaps.org/
github：https://github.com/simplegeo/polymaps
browser：現(xiàn)代瀏覽器
resume：Polymaps依賴于SVG，因此在較新的瀏覽器中表現(xiàn)很好。
5.imagemapster
url：http://www.outsharked.com/imagemapster/
browser：Firefox, Chrome, Safari, Opera, IE6+
resume：ImageMapster是一個jQuery插件,它使你的HTML圖片像Flash一樣炫
6.datavlab
url：http://datavlab.org/
github：https://github.com/TBEDP/datavjs
browser：IE6+、chrome、safari、firefox、opear
resume：datav.js是為了降低日常對于可視化方法使用的成本，用數(shù)據(jù)可視化的方法幫助到更多的人。
現(xiàn)在來分享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的圖譜可視化庫，對于高版本的瀏覽器這個庫使用了HTML的canvas元素
2.cubism
url：http://square.github.io/cubism/
github：https://github.com/square/cubism
browser：官方未說明
resume：時間序列數(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：官方未說明
resume：Springy是一個使用JavaScirpt實現(xiàn)的有向圖布局算法，使用了真實世界中的一些物理原理，你可以隨意拖動圖表中的元素。
5.graphdracula
url：http://www.graphdracula.net/
github：https://github.com/strathausen/dracula
browser：官方未說明
resume：graphdracula是一組工具來顯示和布局互動圖表,以及各種相關(guān)算法。
6.sigamajs
url：http://sigmajs.org/
github：https://github.com/jacomyal/sigma.js
browser：IE9+,chrome,firefox
resume：一個非常輕量級的圖譜可視化庫。Sigma.js很漂亮，速度也快。
7.smoothiecharts
url：http://smoothiecharts.org/
github：https://github.com/joewalnes/smoothie/
browser：IE7+、chrome、safari、firefox、opear
resume：smoothiecharts是一個非常小的圖表庫為實時流媒體數(shù)據(jù)而設(shè)計的
8.timeplot
url：http://www.simile-widgets.org/timeplot/
github：
browser：官方未說明
resume：Timeplot是基于dhtml AJAXy部件繪圖時間序列和覆蓋基于時間的事件
9.visjs
url：http://visjs.org/
github：https://github.com/almende/vis/
browser：Chrome, Firefox, Opera, Safari, IE9+
resume：Vis.js是一個動態(tài)的、基于瀏覽器可視化庫。庫被設(shè)計成易于使用,處理大量的動態(tài)數(shù)據(jù),使操作和交互的數(shù)據(jù)。時間表,包括組件庫數(shù)據(jù)集網(wǎng)絡(luò)、Graph2d,Graph3d。
End. 作者：夕陽白雪 via：36大數(shù)據(jù) 感謝！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
