9款基於HTML5/SVG/Canvas的折線圖表應用

edithfang發表於2014-05-14

1、華麗的HTML5圖表 可展示實時資料

HTML5在圖表應用中也十分廣泛,比起以前的網頁圖表,HTML5圖表製作更便捷,功能更強大。這款HTML5圖表外掛外觀十分華麗和專業,在資料展示方面也很有優勢,圖表不僅支援多維資料展示,而且支援區域選擇資料功能,利用該HTML5圖表可以更加方便地管理你的資料。

html5-chart-data

線上演示 原始碼下載

2、HTML5折線圖表Aristochart 圖表配置簡單

之前我已經向大家分享了幾款HTML5圖表應用,HTML5 Canvas圖表應用RGraphHTML5 Canvas餅狀圖表。利用這些HTML5圖表可以很方便的展示各種資料,而且非常直觀。今天要向大家分享一款HTML5折線圖表外掛Aristochart,Aristochart擴充套件非常靈活,配置也比較簡單,是一款很實用的HTML5圖表應用。

aristochart-html5-chart

線上演示1 線上演示2 線上演示3 線上演示4 原始碼下載

3、HTML5 D3圖表 超酷的圖表初始化動畫效果

今天已經向大家分享過一款基於HTML5和CSS3的柱狀圖表應用了,接下來同樣是一款HTML5圖表應用,圖表名稱叫HTML5 D3 Chart,作者是一位德國開發者Brian Hanby。這款HTML5圖表展現了一款環狀圖和折線圖,圖表的特點是在初始化資料的時候會出現很酷的動畫效果,環狀圖和折線圖的動畫效果是不一樣的。

html5-d3-chart

線上演示 原始碼下載

4、HTML5 SVG多折線圖表 圖表可縮放顯示

今天我們要來介紹一款基於HTML5 SVG的折線圖表,該款圖片支援多條折線重疊在一起顯示,可以方便地比較不同顏色折線的資料。另外圖表還有一個特點,就是可以縮放和移動,這大大方便了使用者瀏覽圖表資料,非常人性化。更多圖表應用,請移步至HTML5圖表欄目。

html5-svg-multi-line-chart

線上演示 原始碼下載

5、HTML5 Canvas發光折線圖表應用

之前我們分享過很多HTML5折線圖表,像HTML5 SVG多折線圖表HTML5/CSS3動態折線圖表等。今天我們要分享一款基於HTML5 Canvas的折線圖表應用,其實我們僅僅是在canvas上面繪製了一條發光的折線,當然圖表的x、y座標你可以自己繪製上去。

html5-canvas-line-chart

線上演示 原始碼下載

6、HTML5數學函式圖形繪製外掛XCalc

XCalc是一款基於HTML5的數學函式圖形繪製外掛,這款函式圖形繪製外掛不僅可以繪製簡單的加減乘除運算的函式圖形,也可以繪製乘方運算和正弦餘弦運算的函式圖形。XCalc的配置也非常簡單,在HTML5圖表中應用十分廣泛。

html5-xcalc-demo

線上演示 原始碼下載

7、HTML5/CSS3動態折線圖表 圖表資料切換動畫

前面我們剛剛分享過一款很不錯的HTML5/SVG折線圖表,這次我們依然要來分享一款帶超酷動畫的HTML5/CSS3動態折線圖表,圖表資料會定時切換,圖表資料在切換的時候有很酷的切換動畫,感覺資料模擬非常真實。另外,更多的HTML5圖表應用可以到HTML5圖表欄目下檢視。

html5-css3-animated-graph

線上演示 原始碼下載

8、HTML5/SVG線性圖表 可繪製圖表區域顏色

今天要分享的這款HTML5圖表應用是一款線性圖表,它主要是有SVG構造出來的,這款SVG線性圖表可以用不同的顏色繪製出圖表的資料區域。另外,這款圖表和之前分享的HTML5線性圖表iGrapher 類似,只是功能沒那麼強大而已。

html5-svg-line-chart

線上演示 原始碼下載

9、HTML5線性圖表iGrapher 功能非常強大

iGrapher是一款基於HTML5的線性圖表應用,和之前分享的HTML5線性圖表 圖表資料區域可著色類似,iGrapher也可以按不同的統計範圍來繪製曲線,同時我們在iGrapher中可以利用滑鼠滾輪來縮放統計區間,同時我們可以在menu欄中選擇需要顯示的統計資料。

html5-chart-igrapher

線上演示 原始碼下載

以上就是9款基於HTML5/SVG/Canvas的折線圖表應用,歡迎收藏分享。

評論(1)

相關文章