前端資料視覺化外掛(一)圖表
摘要:
在大資料時代,很多時候我們需要在網頁中顯示資料統計報表,從而能很直觀地瞭解資料的走向,開發人員很多時候需要使用圖表來表現一些資料。隨著Web技術的發展,從傳統只能依靠於flash、IE的vml,各個瀏覽器尚不統一的svg,到如今規範統一的canvas、svg為代表的html5技術,表現點、線、面要素的技術已經越來越規範成熟。我把前端資料視覺化分為了五種:
- 圖表
- 圖譜
- 地圖
- 關係圖
- 立體圖
我將按照順序介紹62款前端視覺化外掛,下面就分享下34款圖表外掛
- 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:一個使用HTML5、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個圖表型別,獨特的特性,如縮放和互動式。
小結:
每款外掛各有千秋,根據專案需求挑選不同外掛。其中比較廣泛使用的如echart(百度產品)、highchart等,後面我將分享圖譜外掛。
相關推薦
前端資料視覺化外掛(一)圖表
摘要: 在大資料時代,很多時候我們需要在網頁中顯示資料統計報表,從而能很直觀地瞭解資料的走向,開發人員很多時候需要使用圖表來表現一些資料。隨著Web技術的發展,從傳統只能依靠於flash、IE的vml,各個瀏覽器尚不統一的svg,到如今規範統一的canvas、svg
前端資料視覺化外掛(三)地圖
摘要: 繼圖譜外掛之後,下面分享6款地圖外掛 Kartograph url:http://kartograph.org/ github:https://github.com/kartograph/kartograph.py browser:Internet Exp
前端資料視覺化外掛(五)立體圖
摘要: 這是前端資料視覺化最後一種,立體圖。下面分享4款立體圖外掛 PhiloGL url:http://www.senchalabs.org/philogl/ github:https://github.com/senchalabs/philogl browser
前端資料視覺化外掛(四)關係圖
摘要: 現在來分享9款關係圖外掛 arborjs url:http://arborjs.org/halfviz/#/a-new-hope github:https://github.com/samizdatco/arbor browser:IE6+,chrome,
Python資料視覺化matplotlib(一)—— 圖表的基本元素
Python資料視覺化matplotlib(一)—— 圖表的基本元素 圖表建立 plt.show() # 圖表視窗1 → plt.show() plt.plot(np.random.rand(10)) plt.show() # 直接生成圖表 魔法函式 % matp
資料視覺化方法(一)
資料視覺化可以提供對資料的直觀感受,這個有時是很難通過表格的形式把握到的。本文將介紹分類問題的視覺化方法。 資料視覺化的第一步就是獲取資料,下面是用“岩石vs水雷資料集”為例,展示資料獲取方法。 1 import pandas as pd 2 3 ta
python資料視覺化seaborn(一)—— 整體樣式與調色盤
很久之前對seaborn有過一些涉及但是沒有深入探究,這次有趁著有資料視覺化的需求,就好好學一學 Seaborn其實是在matplotlib的基礎上進行了更高階的API封裝,從而使得作圖更加容易,在大多數情況下使用seaborn就能做出很具有吸引力的圖,為資料分析提供了很大的便利性。但是
matplotlib資料視覺化分析(2)-- numpy將陣列儲存到檔案
1 陣列以二進位制的格式儲存 np.save 和 np.load 是讀寫磁碟資料的兩個主要函式。預設情況下,陣列以未壓縮的原始二進位制格式儲存在副檔名為 npy 的檔案中,以陣列 a 為例: # coding:utf-8 import numpy as np
Python資料視覺化matplotlib(二)—— 子圖功能
Python資料視覺化matplotlib(二)—— 子圖功能 在matplotlib中,整個影象為一個Figure物件,在Figure物件中可以包含一個或者多個Axes物件,每個Axes(ax)物件都是一個擁有自己座標系統的繪圖區域 import pandas as
前端資料視覺化外掛大盤點
在大資料時代,很多時候我們需要在網頁中顯示資料統計報表,從而能很直觀地瞭解資料的走向,開發人員很多時候需要使用圖表來表現一些資料。隨著Web技術的發展,從傳統只能依靠於flash、IE的vml,各個瀏覽器尚不統一的svg,到如今規範統一的canvas、svg為代表的h
前端資料視覺化外掛:Highcharts、Echarts和D3
前端資料視覺化外掛有很多,但我用過的只有Highcharts(https://www.hcharts.cn/)、Echarts(http://echarts.baidu.com/)和D3(https://d3js.org/),Web開發過程中選擇使用哪一個外掛是很重要的問題
R語言資料視覺化教程(ggplot2)_座標軸設定
# 8.座標軸# 8.1交換x軸和y軸# 使用coord_flip()來翻轉座標軸library(ggplot2)ggplot(PlantGrowth,aes(x=group,y=weight))+geom_boxplot()ggplot(PlantGrowth,aes(x=
python視覺化進階---seaborn1.8 線性關係資料視覺化 Implot()
線性關係資料視覺化 1. Implot() 示例1: import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns #設定風格、尺度 sns.se
一款redis資料庫視覺化工具(RedisDesktopManager)
原來的官網是這個,現在已經不好使了,大家可以選擇其他工具, RedisDesktopManager下載地址:https://redisdesktop.com/download 替代產品: 替代品可以選擇:treeNMS管理工具 我這有個歷史版本如果大家覺得可以,就下載一下試試: 連結:htt
找尋一款redis資料庫視覺化工具(RedisDesktopManager)
使用過程中可能會遇到的問題我在文後有所總結 我下載Windows版的: 我的redis裝在虛擬機器上的Linux上,看一下IP地址 安裝後的RedisDesktopManager 安裝上面的樣式新增一個連線(連線密碼如果沒有就不填)
資料視覺化seaborn(countplot定製)
sns.countplot能顯示該列資料值的統計分佈,要再顯示百分比,程式如下def add_freq(): ncount=len(train) ax2=ax.twinx() ax2.yaxis.tick_left() ax.yaxis.tic
安裝kibana視覺化外掛(SpringBoot整合Elasticsearch)
1. 什麼是kibana Kibana是一個開源的分析和視覺化平臺,設計用於和Elasticsearch一起工作。 你用Kibana來搜尋,檢視,並和儲存在Elasticsearch索引中的資料進行互動。 你可以輕鬆地執行高階資料分析,並且以各種圖示、表格和地圖的形式視覺化資料。 Kibana使
Android Studio酷炫外掛(一)——自動化快速實現Parcelable介面序列化
一、前言 相信資料序列化大家都多多少少有接觸到,比如自定義了一個實體類,需要在activity之間傳輸該類物件,就需要將資料序列化。android中實現方式有兩種,第一、實現Serializable介面,這種比較簡單,直接宣告就好;第二種,實現Parcelable介面,這種
Android Plugin插樁式實現外掛化開發(一)-實現原理及Activity外掛化實現
1. 前言在現在一些大型的Android應用中都採用了外掛化的開發方式,比如美團,支付寶及我們常用的微信等採用了插修的化的開發方式來進行開發的,既然國內一流的網際網路公司都採用這樣的方式來開發那它一定能帶給開發部署大型應用帶來很大的便捷,那麼外掛化的優勢在哪裡呢?1.1 外掛
Android外掛化原理(一)Activity外掛化
相關文章 前言 四大元件的外掛化是外掛化技術的核心知識點,而Activity外掛化更是重中之重,Activity外掛化主要有三種實現方式,分別是反射實現、介面實現和Hook技術實現。反射實現會對效能有所影響,主流的外掛化框架沒有采用此方式,關於介面實