前端數據可視化插件（一）圖表

時間 2019-11-30

標籤前端數據可視化插件圖表简体版

原文原文鏈接

摘要：

　　在大數據時代，不少時候咱們須要在網頁中顯示數據統計報表，從而能很直觀地瞭解數據的走向，開發人員不少時候須要使用圖表來表現一些數據。隨着Web技術的發展，從傳統只能依靠於flash、IE的vml，各個瀏覽器尚不統一的svg，到現在規範統一的canvas、svg爲表明的html5技術，表現點、線、面要素的技術已經愈來愈規範成熟。我把前端數據可視化分爲了五種：javascript

圖表
圖譜
地圖
關係圖
立體圖

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

amcharts
url： http://www.amcharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：amCharts是一種先進的圖表庫,將適合任何數據可視化的須要。圖表解決方案包括柱、欄、線、區域,一步,一步沒有冒口,平滑線,燭臺,OHLC,餡餅/甜甜圈,雷達/極地,XY /分散/泡沫,子彈,漏斗/金字塔圖以及指標。
awesomechartjs
url：http://cyberpython.github.io/AwesomeChartJS/
github：https://github.com/cyberpython/AwesomeChartJS
browser：現代瀏覽器
resume：AwesomeChartJS是一個簡單的Javascript庫,可用於建立圖表基於HTML 5畫布元素。
axiis
url：http://www.axiis.org/
browser：官方未說明
resume：Axiis框架是一個開源的數據可視化爲初學者和專家開發人員設計的。
bonsaijs
url：http://bonsaijs.org/
github：https://github.com/uxebu/bonsai
browser：IE9+、chrome20+、safari5+、firefox18+、opear12+
resume：用於建立圖形和動畫的js庫
canvasjs
url：http://canvasjs.com
browser：官方未說明
resume：一個使用HTML五、JavaScript建立圖表在畫布上，圖表包括幾個好看的主題和10倍的速度比傳統的基於Flash / SVG庫——致使輕量級的,美麗的和響應指示板。收費
canvasxpress
url：http://canvasxpress.org/
browser：Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+
resume：CanvasXpress是一個獨立的Javascript編寫的圖形庫，支持全部主流瀏覽器中計算機和移動設備。
chartist
url：http://gionkunz.github.io/chartist-js/
github：https://github.com/gionkunz/chartist-js
browser：Firefox, Chrome, Safari, Opera, IE9+
resume：繪製多種圖形的庫
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技術
chartkick
url：http://ankane.github.io/chartkick/
github：https://github.com/ankane/chartkick
browser：IE6+、chrome、safari、firefox、opear
resume：chartkick是一個依賴於ruby的繪製圖表的js庫，在Python中也可使用
DataWrapper
url：https://datawrapper.de/
github：https://github.com/datawrapper/datawrapper
browser：支持大部分瀏覽器
resume：Datawrapper徹底免費，開源。您可使用他們的免費主機服務，或者安裝在您本身的服務器上。Datawrapper用PHP編寫，很是易於安裝、修改和拓展。能夠繪製。可是DataWrapper是生成圖表後嵌入到站點的。
dataset
url：http://misoproject.com/dataset/
github：https://github.com/misoproject/dataset
browser：官方未說明
resume：dataset是一個JavaScript客戶端數據轉換和管理庫。數據集管理客戶端數據簡單處理加載、解析、排序、查詢和操縱來自各類數據源的數據。
dc
url：http://dc-js.github.io/dc.js/
github：https://github.com/dc-js/dc.js
browser：官方未說明
resume：專門爲探索大型、多維數據集而進行優化的庫
dygraphs
url：http://dygraphs.com/
browser：IE8+、chrome、safari、firefox、opear
resume：dygraphs是一種快速、靈活的開源JavaScript庫圖表。
echart
url：http://echarts.baidu.com/index.html
github：https://github.com/ecomfe/echarts
browser：IE9+、chrome、safari、firefox、opear
resume：基於Canvas，純Javascript圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
flotr2
url：http://www.humblesoftware.com/flotr2/
github：https://github.com/HumbleSoftware/Flotr2
browser：FF, Chrome, IE6+, Android, iOS
resume：Flotr2是HTML5畫圖表和圖形庫。能夠繪製線圖、條圖、蠟狀圖、餅圖、氣泡圖
Flot
url：http://www.flotcharts.org/
browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
resume：一個基於jQuery的繪圖庫，能夠繪製折線、散點、條形、餅狀圖
fusioncharts
url：http://www.fusioncharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：一個專門用來繪製圖表的庫，能夠繪製90多種圖表，可是收費
graphael
url：http://g.raphaeljs.com/
browser：Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
resume：能夠繪製各類圖表的插件，並且很是簡單靈活
highchart
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
humble Finance
url：http://www.humblesoftware.com/finance/index
browser：FireFox, Safari, Chromium, or IE6+
resume：HumbleFinance是一個HTML5數據可視化工具相似於Flash工具，徹底是用JavaScript編寫的工具使用原型和Flotr庫。
ichartjs
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目前支持餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖。
icharts
url：http://www.icharts.net/
browser：官方未說明
resume：iCharts免費版本提供了一些基本的交互式圖表樣式，若是更使用高級的樣式，則須要購買高級版本。
JavaScript InfoVis Toolkit
url：http://philogb.github.io/jit/
github：https://github.com/philogb/jit
browser：官方未給出具體版本
resume：JavaScript InfoVis Toolkit能夠動態繪製各類圖形，提供了一些預設的樣式可用於展現不一樣的數據
jqplot
url：http://www.jqplot.com/
browser：IE 7+, Firefox, Safari, and Opera
resume：基於jQuery的繪圖插件，能夠繪製折線、條形、散點、餅狀圖
jscharts
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數組和你的表已經準備好了!容許您建立圖柱狀圖,餅圖或簡單的線條圖。收費可是有免費版本。
kendo-ui
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
nvd3
url：http://nvd3.org/
github：https://github.com/novus/nvd3
browser：Chrome,Firefox, Opera, Safari and Internet Explorer 10
resume：d3圖表庫
pizza-pie-charts
url：http://zurb.com/playground/pizza-pie-charts
github：https://github.com/zurb/pizza
browser：官方未說明
resume：主要用來生成餅狀圖的庫
protovis
url：http://mbostock.github.io/protovis/
github：https://github.com/mbostock/protovis
browser：現代瀏覽器
resume：Protovis組成自定義視圖的數據用簡單的標誌如酒吧和點。與低級圖形庫,迅速成爲可視化乏味,Protovis定義是經過編碼數據的動態屬性,容許繼承,尺度和layoutsto簡化施工。
Peity
url：http://benpickles.github.io/peity/
browser：Chrome, Firefox, IE9+, Opera, Safari
resume：能夠繪製多種圖形，可是都是很小的圖形，與jQuery Sparklines類似
rgraph
url：http://www.rgraph.net/
browser：現代瀏覽器
resume：RGraph是一個基於HTML5的開放web圖表和圖表庫。RGraph建立這些圖表在web瀏覽器使用JavaScript,這意味着更快的頁面和web服務器負載,致使較小的頁面大小和更快的網站。
webfx
url：http://webfx.eae.net/
browser：Firefox 1.5, Opera 9 and Internet Explorer 6
resume：支持多種圖表的庫
xcharts
url：http://tenxer.github.io/xcharts/
github：https://github.com/tenXer/xcharts/
browser：現代瀏覽器
resume：xCharts美麗是一個JavaScript庫,用於構建和自定義數據驅動的web使用D3.js圖表可視化。使用HTML、CSS和SVG,xCharts被設計成動態、流體、集成和定製。
zingchart
url：http://www.zingchart.com/
browser：官方未聲明
resume：ZingChart創造驚人的可視化提供了靈活性和資源。提供超過100個圖表類型，獨特的特性,如縮放和交互式。