前端資料視覺化外掛大盤點
在大資料時代，很多時候我們需要在網頁中顯示資料統計報表，從而能很直觀地瞭解資料的走向，開發人員很多時候需要使用圖表來表現一些資料。隨著Web技術的發展，從傳統只能依靠於flash、IE的vml，各個瀏覽器尚不統一的svg，到如今規範統一的canvas、svg為代表的html5技術，表現點、線、面要素的技術已經越來越規範成熟。我把前端資料視覺化分為了五種：
1.圖表
2.圖譜
3.地圖
4.關係圖
5.立體圖
我將按照順序介紹62款前端視覺化外掛，下面就分享下34款圖表外掛：
1.amcharts
url： http://www.amcharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：amCharts是一種先進的圖表庫,將適合任何資料視覺化的需要。圖表解決方案包括柱、欄、線、區域,一步,一步沒有冒口,平滑線,燭臺,OHLC,餡餅/甜甜圈,雷達/極地,XY /分散/泡沫,子彈,漏斗/金字塔圖以及指標。
url：http://cyberpython.github.io/AwesomeChartJS/
github：https://github.com/cyberpython/AwesomeChartJS
browser：現代瀏覽器
resume：AwesomeChartJS是一個簡單的Javascript庫,可用於建立圖表基於HTML 5畫布元素。
url：http://www.axiis.org/
browser：官方未說明
resume：Axiis框架是一個開源的資料視覺化為初學者和專家開發人員設計的。
url：http://bonsaijs.org/
github：https://github.com/uxebu/bonsai
browser：IE9+、chrome20+、safari5+、firefox18+、opear12+
resume：用於建立圖形和動畫的js庫
url：http://canvasjs.com
browser：官方未說明
resume：一個使用HTML5、JavaScript建立圖表在畫布上，圖表包括幾個好看的主題和10倍的速度比傳統的基於Flash / SVG庫——導致輕量級的,美麗的和響應指示板。收費
url：http://canvasxpress.org/
browser：Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+
resume：CanvasXpress是一個獨立的Javascript編寫的圖形庫，支援所有主流瀏覽器中計算機和移動裝置。
url：http://gionkunz.github.io/chartist-js/
github：https://github.com/gionkunz/chartist-js
browser：Firefox, Chrome, Safari, Opera, IE9+
resume：繪製多種圖形的庫
url：http://www.chartjs.org/
github：https://github.com/nnnick/Chart.js
browser：IE9+、chrome、safari、firefox、opear、部分支援IE7/8
resume：chartjs是一個可以繪製多種圖表的庫，使用了html5的canvas技術
url：http://ankane.github.io/chartkick/
github：https://github.com/ankane/chartkick
browser：IE6+、chrome、safari、firefox、opear
resume：chartkick是一個依賴於ruby的繪製圖表的js庫，在Python中也可以使用
url：https://datawrapper.de/
github：https://github.com/datawrapper/datawrapper
browser：支援大部分瀏覽器
resume：Datawrapper完全免費，開源。您可以使用他們的免費主機服務，或者安裝在您自己的伺服器上。Datawrapper用PHP編寫，非常易於安裝、修改和拓展。可以繪製。但是DataWrapper是生成圖表後嵌入到站點的。
url：http://misoproject.com/dataset/
github：https://github.com/misoproject/dataset
browser：官方未說明
resume：dataset是一個JavaScript客戶端資料轉換和管理庫。資料集管理客戶端資料簡單處理載入、解析、排序、查詢和操縱來自各種資料來源的資料。
url：http://dc-js.github.io/dc.js/
github：https://github.com/dc-js/dc.js
browser：官方未說明
resume：專門為探索大型、多維資料集而進行優化的庫
url：http://dygraphs.com/
browser：IE8+、chrome、safari、firefox、opear
resume：dygraphs是一種快速、靈活的開源JavaScript庫圖表。
url：http://echarts.baidu.com/index.html
github：https://github.com/ecomfe/echarts
browser：IE9+、chrome、safari、firefox、opear
resume：基於Canvas，純Javascript圖表庫，提供直觀，生動，可互動，可個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。
url：http://www.humblesoftware.com/flotr2/
github：https://github.com/HumbleSoftware/Flotr2
browser：FF, Chrome, IE6+, Android, iOS
resume：Flotr2是HTML5畫圖表和圖形庫。可以繪製線圖、條圖、蠟狀圖、餅圖、氣泡圖
url：http://www.flotcharts.org/
browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
resume：一個基於jQuery的繪相簿，可以繪製折線、散點、條形、餅狀圖
url：http://www.fusioncharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：一個專門用來繪製圖表的庫，可以繪製90多種圖表，但是收費
url：http://g.raphaeljs.com/
browser：Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
resume：可以繪製各種圖表的外掛，而且非常簡單靈活
url：http://www.highcharts.com/
github：https://github.com/highslide-software/highcharts.com/
browser：支援各種裝置，ie6+
resume：在高版本瀏覽器中使用SVG，而在舊版本IE(包括IE6及更新版本)中使用後備的VML。有自己的團隊負責，但是隻對非商業用途免費，可以繪製 line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types
url：http://www.humblesoftware.com/finance/index
browser：FireFox, Safari, Chromium, or IE6+
resume：HumbleFinance是一個HTML5資料視覺化工具類似於Flash工具，完全是用JavaScript編寫的工具使用原型和Flotr庫。
url：http://www.ichartjs.com/
github：https://github.com/wanghetommy/ichartjs
browser：IE9+、chrome、safari、firefox、opear
resume：ichartjs 是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標籤繪製各式圖形。 ichartjs致力於為您的應用提供簡單、直觀、可互動的體驗級圖表元件。ichartjs目前支援餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖。
url：http://www.icharts.net/
browser：官方未說明
resume：iCharts免費版本提供了一些基本的互動式圖表樣式，如果更使用高階的樣式，則需要購買高階版本。
url：http://philogb.github.io/jit/
github：https://github.com/philogb/jit
browser：官方未給出具體版本
resume：JavaScript InfoVis Toolkit可以動態繪製各種圖形，提供了一些預設的樣式可用於展示不同的資料
url：http://www.jqplot.com/
browser：IE 7+, Firefox, Safari, and Opera
resume：基於jQuery的繪圖外掛，可以繪製折線、條形、散點、餅狀圖
url：http://www.jscharts.com/
browser：Firefox 1.5 +，Chrome 10 +，Internet Explorer 8 +，Safari 3.1 +，Opera 9 +
resume：jscharts是一個基於JavaScript的圖表生成器,需要很少或根本沒有編碼。jscharts繪製圖表是一個簡單和容易的任務,因為您只需要使用客戶端指令碼(即由web瀏覽器)。不需要額外的外掛或伺服器模組。就包括我們的指令碼,準備你的圖表資料XML、JSON或JavaScript陣列和你的表已經準備好了!允許您建立圖柱狀圖,餅圖或簡單的線條圖。收費但是有免費版本。
url：http://www.telerik.com/kendo-ui
github：https://github.com/telerik/kendo-ui-core
browser：現代瀏覽器
resume：http://www.cnblogs.com/xiyangbaixue/p/3951297.html
url：http://nvd3.org/
github：https://github.com/novus/nvd3
browser：Chrome,Firefox, Opera, Safari and Internet Explorer 10
resume：d3圖表庫
url：http://zurb.com/playground/pizza-pie-charts
github：https://github.com/zurb/pizza
browser：官方未說明
resume：主要用來生成餅狀圖的庫
url：http://mbostock.github.io/protovis/
github：https://github.com/mbostock/protovis
browser：現代瀏覽器
resume：Protovis組成自定義檢視的資料用簡單的標誌如酒吧和點。與低階圖形庫,迅速成為視覺化乏味,Protovis定義是通過編碼資料的動態屬性,允許繼承,尺度和layoutsto簡化施工。
url：http://benpickles.github.io/peity/
browser：Chrome, Firefox, IE9+, Opera, Safari
resume：可以繪製多種圖形，但是都是很小的圖形，與jQuery Sparklines相似
url：http://www.rgraph.net/
browser：現代瀏覽器
resume：RGraph是一個基於HTML5的開放web圖表和圖表庫。RGraph建立這些圖表在web瀏覽器使用JavaScript,這意味著更快的頁面和web伺服器負載,導致較小的頁面大小和更快的網站。
url：http://webfx.eae.net/
browser：Firefox 1.5, Opera 9 and Internet Explorer 6
resume：支援多種圖表的庫
url：http://tenxer.github.io/xcharts/
github：https://github.com/tenXer/xcharts/
browser：現代瀏覽器
resume：xCharts美麗是一個JavaScript庫,用於構建和自定義資料驅動的web使用D3.js圖表視覺化。使用HTML、CSS和SVG,xCharts被設計成動態、流體、整合和定製。
url：http://www.zingchart.com/
browser：官方未宣告
resume：ZingChart創造驚人的視覺化提供了靈活性和資源。提供超過100個圖表型別，獨特的特性,如縮放和互動式。
每款外掛各有千秋，根據專案需求挑選不同外掛。其中比較廣泛使用的如echart(百度產品)、highchart等，下面我將分享圖譜外掛。
9款圖譜外掛：
1.crossfilter
url：http://square.github.io/crossfilter/
github：https://github.com/square/crossfilter
browser：官方未說明
resume：一個可以操作大型、多元資料集的庫，幫助資料分析。
url：http://d3js.org/
github：https://github.com/mbostock/d3
browser：Firefox, Chrome, Safari, Opera, IE9+
resume：D3.js是一個JavaScript庫,基於資料操作文件。D3可以幫助你把資料使用HTML、SVG和CSS。D3強調web標準給你完整的現代瀏覽器的功能沒有把自己和一個專有的框架,結合強大的視覺化元件和DOM操作的資料驅動的方法。
url：http://www.humblesoftware.com/envision/index
github：https://github.com/HumbleSoftware/envisionjs
browser：IE6+、chrome、safari、firefox、opear
resume：envisionjs是一個庫來建立快速、動態和互動式視覺化的圖表
url：http://jsxgraph.uni-bayreuth.de/wp/
github：https://github.com/jsxgraph/jsxgraph
browser：現代瀏覽器
resume：JSXGraph互動式幾何是一個跨瀏覽器的庫,函式繪圖,圖表和資料視覺化在web瀏覽器中。它完全實現在JavaScript中,不依賴於任何其他庫,並使用SVG VML或畫布上。
url：http://paperjs.org/
github：https://github.com/paperjs/paper.js
browser：IE9+,chrome,firefox
resume：paperjs是一款不可多得的js外掛，可以繪製各種動態圖形效果
url：http://processingjs.org/
github：https://github.com/processing-js/processing-js/
browser：現代瀏覽器
resume：processingjs是用Java編寫的，所以圖形在網頁上顯示要靠Java程式，使用canvas技術
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是一款繪製向量圖的外掛，支援低版本的瀏覽器
url：http://omnipotent.net/jquery.sparkline/#s-about
github：
browser：Firefox 2+, Safari 3+, Opera 9, Chrome and Internet Explorer 6+，ios和andriod裝置
resume：使用內嵌在HTML中的資料或通過javascript直接生成微線圖(小內聯圖表)，最主要的特點是可以生成波形圖。
url：http://worrydream.com/Tangle/
github：
browser：
resume：Tangle是一個JavaScript庫,用於建立活性文件。讀者可以互動式地探索可能性,玩引數,並立即看到文件更新。Tangle是超級簡單,容易學習。
6款地圖外掛:
1.Kartograph
url：http://kartograph.org/
github：https://github.com/kartograph/kartograph.py
browser：Internet Explorer 7+，chrome，Firefox
resume：Gregor Aisch開發的一個基於JavaScript和Python的非常炫的、完全使用向量的庫。
url：http://leafletjs.com/
github：https://github.com/Leaflet/Leaflet
browser：Chrome，Firefox，Safari 5+，Opera 12+，IE 7–11
resume：leafletjs是一個開源的支援移動端的地圖外掛，js檔案僅僅有33kb，
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支援各種裝置，也有很多版本。雖然是一款老的地圖外掛，但是非常小、可擴充套件而且免費
相關推薦
前端資料視覺化外掛大盤點
在大資料時代，很多時候我們需要在網頁中顯示資料統計報表，從而能很直觀地瞭解資料的走向，開發人員很多時候需要使用圖表來表現一些資料。隨著Web技術的發展，從傳統只能依靠於flash、IE的vml，各個瀏覽器尚不統一的svg，到如今規範統一的canvas、svg為代表的h
前端資料視覺化外掛（三）地圖
摘要： 繼圖譜外掛之後，下面分享6款地圖外掛 Kartograph url：http://kartograph.org/ github：https://github.com/kartograph/kartograph.py browser：Internet Exp
前端資料視覺化外掛:Highcharts、Echarts和D3
前端資料視覺化外掛有很多，但我用過的只有Highcharts（https://www.hcharts.cn/）、Echarts（http://echarts.baidu.com/）和D3（https://d3js.org/），Web開發過程中選擇使用哪一個外掛是很重要的問題
前端資料視覺化外掛（五）立體圖
摘要： 這是前端資料視覺化最後一種，立體圖。下面分享4款立體圖外掛 PhiloGL url：http://www.senchalabs.org/philogl/ github：https://github.com/senchalabs/philogl browser
前端資料視覺化外掛（一）圖表
摘要： 在大資料時代，很多時候我們需要在網頁中顯示資料統計報表，從而能很直觀地瞭解資料的走向，開發人員很多時候需要使用圖表來表現一些資料。隨著Web技術的發展，從傳統只能依靠於flash、IE的vml，各個瀏覽器尚不統一的svg，到如今規範統一的canvas、svg
前端資料視覺化外掛（四）關係圖
摘要： 現在來分享9款關係圖外掛 arborjs url：http://arborjs.org/halfviz/#/a-new-hope github：https://github.com/samizdatco/arbor browser：IE6+,chrome,
基於World Wind的資料視覺化外掛
基於開源資料視覺化類庫（MSChart、VTK、D3）實現的元件樣例，並基於World Wind實現呼叫上述元件的功能外掛。 GitHub下載地址：https://github.com/hujiulin/WorldWind_DataVisualization 1. 載入元件 – Load plugin
ECharts 前端資料視覺化
ECharts，一個使用 JavaScript 實現的開源視覺化庫， 百度出品，底層依賴輕量級的向量圖形庫ZRender，相容大部分PC和移動端的瀏覽器，提供直觀，互動豐富，可高度個性化定製的資料視覺化圖表。看看http://echarts.baidu.com/feature.html的示例
python專案篇-從資料庫獲取資料以Json格式返回前端資料視覺化方式顯示
views.py: def adminEchartIncome(request): ret = models.incomeAccount.objects.all().order_by("dayIncome","id") # ret = serialize("json
前端資料視覺化echarts.js使用指南
一、開篇 首先這裡要感謝一下我的公司，因為公司需求上面的新穎的需求，讓我有幸可以學習到一些好玩有趣的前端技術，前端技術中好玩而且比較實用的我想應該要數前端的資料視覺化這一方面，目前市面上的資料視覺化的框架琳琅滿目，例如：D3.js、hightcharts.js、echart
D3，最受歡迎的前端資料視覺化庫
第一個瀏覽器只能渲染靜態頁面，所謂互動性僅限於單擊連結。1996年，Netscape在瀏覽器中內建了JavaScript直譯器，從而讓瀏覽器在載入頁面時，能夠解釋執行這門指令碼語言編寫的程式碼。 這個舉措並沒有它後來引發的鉅變那麼驚心動魄，但卻讓瀏覽器從被動的顯示，
認識大資料，盤點5款資料視覺化工具
什麼是資料視覺化呢？那幾款資料視覺化工具好使用呢？資料視覺化用專業術語來就愛那個就是通過視覺的方式向人類展示資料，這種在文字基礎上的圖表即簡單又實用，而且相關性、趨勢分析都非常明確，也非常可靠，通過圖表一目瞭然。用通俗的話說就是畫一張圖表，將資料以比例的方式展示，讓人能一眼就瞭解到自己想要了解的資料。挖走了
資料視覺化：淺談熱力圖如何在前端實現
作者 個推開發工程師甄鑫 當我們需要用更直觀有效的形式來展現各類大資料資訊時，熱力圖無疑是一種很好的方式。作為一種密度圖，熱力圖一般使用具備顯著顏色差異的方式來呈現資料效果，熱力圖中亮色一般代表事件發生頻率較高或事物分佈密度較大，暗色則反之。 值得一提的是，熱力圖最終效果常常優於
大快搜索大資料視覺化平臺監控功能深度解析
大快搜索大資料視覺化平臺監控功能深度解析 在上一篇的文章中已經明確說過DKM作為大快發行版DKhadoop的管理平臺，它的四大功能分別是：管理功能，監控功能，診斷功能和整合功能。管理功能已經給大家列舉了一些做了說明，今天就DKM平臺的監控功能再給大家做細緻的分享分析。 DKM 提供了許
資料視覺化（全綵）（大資料叢書，首次全面細緻地梳理了視覺化理論，方法 工具與應用案例 馬匡六教授 石教英教授鼎力推薦，十
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
大屏資料視覺化示例
資料視覺化：把相對複雜的、抽象的資料通過可視的、互動的方式進行展示，從而形象直觀地表達資料蘊含的資訊和規律。 資料視覺化是資料空間到圖形空間的對映，是抽象資料的具象表達。 資料視覺化互動的基本原則：總覽為先，縮放過濾按需檢視細節。 大屏資料視覺化是當前視覺化領域的一項熱門應用，通常可
5個常用的大資料視覺化分析工具，你知道嗎？
大資料及移動網際網路時代，每一個使用移動終端的人無時無刻不在生產資料，而作為網際網路服務提供的產品來說，也在持續不斷的積累資料。資料如同人工智慧一樣，往往能表現出更為客觀、理性的一面，資料可以讓人更加直觀、清晰的認識世界，資料也可以指導人更加理智的做出決策。 而在大資料時代的今天，最有價值的商品
福利來了：39個大資料視覺化工具
資料視覺化無處不在，而且比以前任何時候都重要。無論是在行政演示中為資料點建立一個視覺化程序，還是用視覺化概念來細分客戶，資料視覺化都顯得尤為重要。以前的工具的基本不能處理大資料。本文將推薦39個可用於處理大資料的視覺化工具(排名不分先後)。其中許多工具是開源的，能夠共同使用或嵌入已經設計好的應用程式
阿里雲ACE共創空間——大資料方案體驗3 DATA V資料視覺化
背景：DATA V作為阿里雲的資料視覺化服務，本次測試主要為體驗DATA V提供的豐富的視覺化模板，產品的選擇為基礎版，測試內容包括提供的場景模板和自定義元件使用的便利性。 控制檯：控制檯中包含四部分內容，我的視覺化為管理視覺化介面的標籤，基礎版本最大數量是可以使用5個大屏，企業版為20個。我的資料為管理資
從資料視覺化到分析圖：大資料如何影響建築設計？
資料視覺化已經成為了各個行業競相追逐的一個詞彙，從阿里巴巴的阿里雲，到百度的百度圖說，甚至，在建築設計，景觀、規劃等行業也暫露頭角，專案的前期資料分析，已經成為了市場經濟下不可或缺的一環。 那麼,大資料如何影響建築設計？ 回答這個問題之前，先請你看一專案案