創(chuàng)建一個HTML5網(wǎng)頁圖表應(yīng)用已經(jīng)非常簡單，利用Canvas更是能繪制出絢麗的動畫效果，也就是說你的HTML5圖表能動起來，給人不一樣的用戶體驗(yàn)。本文就主要來分享一些最常用的HTML5圖表插件，不僅外觀比較絢麗，而且也比較實(shí)用，希望大家喜歡。

1、HTML5 Canvas折線圖表和柱形圖表

之前我們已經(jīng)分享過很多HTML5圖表應(yīng)用了，包括折線圖、柱形圖、餅圖等，使用起來用戶體驗(yàn)都很不錯。今天要分享的一款HTML5 Canvas圖表應(yīng)用提供了折線圖和柱形圖兩種，這款HTML5圖表在初始化數(shù)據(jù)的時候有一種漸現(xiàn)的動畫特效，我們可以將這款圖表應(yīng)用在統(tǒng)計(jì)頁面上。

在線演示? ? ? ??源碼下載

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

之前我已經(jīng)向大家分享了幾款HTML5圖表應(yīng)用，HTML5 Canvas圖表應(yīng)用RGraph、HTML5 Canvas餅狀圖表。利用這些HTML5圖表可以很方便的展示各種數(shù)據(jù)，而且非常直觀。今天要向大家分享一款HTML5折線圖表插件Aristochart，Aristochart擴(kuò)展非常靈活，配置也比較簡單，是一款很實(shí)用的HTML5圖表應(yīng)用。

在線演示1? ??在線演示2? ??在線演示3? ??在線演示4? ??源碼下載

3、HTML5 3D動畫柱形圖表

這次我們要來分享一款效果非?？岬?a target="_blank" rel="nofollow">HTML53D柱形圖表，這款HTML5圖表和之前分享的都不一樣，主要是外觀上比較吸引人，首先圖表是3D立體的，有一種非常棒的視覺效果；其次，當(dāng)鼠標(biāo)劃過柱形圖表時，會有很不錯的HTML5動畫效果。

在線演示? ? ? ??源碼下載

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

今天已經(jīng)向大家分享過一款基于HTML5和CSS3的柱狀圖表應(yīng)用了，接下來同樣是一款HTML5圖表應(yīng)用，圖表名稱叫HTML5 D3 Chart，作者是一位德國開發(fā)者Brian Hanby。這款HTML5圖表展現(xiàn)了一款環(huán)狀圖和折線圖，圖表的特點(diǎn)是在初始化數(shù)據(jù)的時候會出現(xiàn)很酷的動畫效果，環(huán)狀圖和折線圖的動畫效果是不一樣的。

在線演示? ? ? ??源碼下載

5、實(shí)時更新數(shù)據(jù)的jQuery highcharts圖表插件

今天我們要來分享一款基于jQuery的highcharts實(shí)時圖表插件，highcharts圖表插件定義了每隔一秒鐘更新數(shù)據(jù)，然后根據(jù)每個數(shù)據(jù)點(diǎn)繪制一條折線，隨著數(shù)據(jù)的更新，折線也就會不停的向前移動，形成一個類似CPU實(shí)時監(jiān)控的曲線圖表。這款jQuery圖表插件應(yīng)用比較廣泛，兼容所有瀏覽器。

在線演示? ? ? ??源碼下載

6、基于HTML5 Canvas的圖表插件Chart.js

chart.js是一款基于HTML5?Canvas的圖表插件，chart.js的功能非常強(qiáng)大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環(huán)形圖、雷達(dá)圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個特點(diǎn)就是圖表在初始化的時候有彈性動畫特效，這也是HTML5 Canvas的一大功勞。

柱形圖? ??折線圖? ??餅狀圖? ??環(huán)形圖? ??雷達(dá)圖? ??極線圖? ??源碼下載

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

今天我們要來介紹一款基于HTML5SVG的折線圖表，該款圖片支持多條折線重疊在一起顯示，可以方便地比較不同顏色折線的數(shù)據(jù)。另外圖表還有一個特點(diǎn)，就是可以縮放和移動，這大大方便了用戶瀏覽圖表數(shù)據(jù)，非常人性化。更多圖表應(yīng)用，請移步至HTML5圖表欄目。

在線演示? ? ? ??源碼下載

8、HTML5/CSS3動態(tài)折線圖表 圖表數(shù)據(jù)切換動畫

前面我們剛剛分享過一款很不錯的HTML5/SVG折線圖表，這次我們依然要來分享一款帶超酷動畫的HTML5/CSS3動態(tài)折線圖表，圖表數(shù)據(jù)會定時切換，圖表數(shù)據(jù)在切換的時候有很酷的切換動畫，感覺數(shù)據(jù)模擬非常真實(shí)。另外，更多的HTML5圖表應(yīng)用可以到HTML5圖表欄目下查看。

在線演示? ? ? ??源碼下載

9、HTML5/SVG線性圖表 可繪制圖表區(qū)域顏色

今天要分享的這款HTML5圖表應(yīng)用是一款線性圖表，它主要是有SVG構(gòu)造出來的，這款SVG線性圖表可以用不同的顏色繪制出圖表的數(shù)據(jù)區(qū)域。另外，這款圖表和之前分享的HTML5線性圖表iGrapher類似，只是功能沒那么強(qiáng)大而已。

在線演示? ? ? ??源碼下載

10、HTML5線性圖表iGrapher 功能非常強(qiáng)大

iGrapher是一款基于HTML5的線性圖表應(yīng)用，和之前分享的HTML5線性圖表 圖表數(shù)據(jù)區(qū)域可著色類似，iGrapher也可以按不同的統(tǒng)計(jì)范圍來繪制曲線，同時我們在iGrapher中可以利用鼠標(biāo)滾輪來縮放統(tǒng)計(jì)區(qū)間，同時我們可以在menu欄中選擇需要顯示的統(tǒng)計(jì)數(shù)據(jù)。

在線演示? ? ? ??源碼下載

本文鏈接：http://www.html5tricks.com/10-cool-useful-html5-chart.html

本文作者：html5tricks– 超人