如今，HTML5 可謂如眾星捧月一般，受到許多業(yè)內(nèi)巨頭的青睞。很多Web開發(fā)者也嘗試著用 HTML 5 來制作各種各樣的富 Web 應(yīng)用。HTML 5 規(guī)范引進(jìn)了很多新特性，其中最令人期待的之一就是 Canvas 元素。HTML 5 Canvas 提供了通過 JavaScript 繪制圖形的方法，非常強(qiáng)大。今天，本文收集了一些非常好的基于 HTML 5 Canvas 的圖表方案推薦給大家。

　　如今，HTML5 可謂如眾星捧月一般，受到許多業(yè)內(nèi)巨頭的青睞。很多Web開發(fā)者也嘗試著用 HTML 5 來制作各種各樣的富 Web 應(yīng)用。HTML 5 規(guī)范引進(jìn)了很多新特性，其中最令人期待的之一就是 Canvas 元素。HTML 5 Canvas 提供了通過 JavaScript 繪制圖形的方法，非常強(qiáng)大。今天，本文收集了一些非常好的基于 HTML 5 Canvas 的圖表方案推薦給大家。

 

1. Visualize

Visualize通過Javascript從結(jié)構(gòu)化的HTML表格獲取數(shù)據(jù)并借助HTML5 Canvas把數(shù)據(jù)轉(zhuǎn)換為可視化的圖表。

2. rGraph

rGraph是一個(gè)基于HTML5 canvas的圖表庫。借助HTML5的特性可以生成各種類型的圖表，例如餅圖、條形圖、圓環(huán)圖、甘特圖、雷達(dá)圖等。

3. iGrapher

iGrapher是一個(gè)免費(fèi)的基于Web的，分析和預(yù)測股票、貨幣和商品的市場走勢的可視化工具。

4. Function Plotter

由Ed Mackey開發(fā)的函數(shù)圖形繪制工具，使用Canvas繪制二維數(shù)學(xué)函數(shù)圖形。

5. Building HTML5 Canvas Bar Graph

使用HTML5 Canvas元素和Javascript繪制條形圖。

6. HTML5 Graph Slider

一個(gè)動態(tài)圖形查看器，可通過JavaScript接收數(shù)據(jù)并即時(shí)更新到圖表中。

7. Graph.tk

Graph.tk是一個(gè)開源的圖形工具，可以以不同的風(fēng)格呈現(xiàn)函數(shù)曲線。

8. Ticker Plot

Ticker plot也是一個(gè)開源項(xiàng)目，使用股票符號繪制走勢圖。

9. HumbleFinance

類似于Google的Flash財(cái)經(jīng)圖表工具，HumbleFinance是一個(gè)基于HTML5 canvas的圖表項(xiàng)目。

10. Charting HTML5

一個(gè)HTML5 canvas實(shí)驗(yàn)項(xiàng)目，看看它用于呈現(xiàn)圖表的特性。

11. Graphr

Graphr是一個(gè)使用JavaScript編寫的計(jì)算器，由Richard Ye開發(fā)。

12. Snazzy Animated Pie Chart with HTML5 and jQuery

基于HTML5特性開發(fā)的餅圖工具，擁有漂亮的動畫效果。

13. AwesomeJS

AwesomeChartJS是一個(gè)簡單的Javascript庫，可用于創(chuàng)建基于HTML 5 Canvas元素的圖表。

14. jsGraph

jsGraph是一個(gè)輕量的javascript庫，用于結(jié)合HTML5呈現(xiàn)圖表。

15. Facebook Privacy

基于Prototype開發(fā)的可視化數(shù)據(jù)圖表。

16. ASK KEN

ASK KEN™是一個(gè)序列的節(jié)點(diǎn)連接圖，可以讓你通過可視化導(dǎo)航鏈接到Freebase服務(wù)提供的主題。

17. CanvasXpress

CanvasXpress是另外一個(gè)結(jié)合HTML5特性開發(fā)的跨瀏覽器圖表庫，兼容主流瀏覽器。

18. ZingChart

如果前面那些開源和免費(fèi)的圖表方案都滿足不了你的項(xiàng)目，可以試試ZingChart，這是首個(gè)可以以Flash和HTML5 Canvas兩種方案呈現(xiàn)圖表的圖表庫。

深度閱讀

1. Canvas Cheat Sheet

PDF 和 PNG 格式的 HTML5 Canvas 速查手冊。

2. How to draw with HTML5 Canvas

如果使用 HTML5 Canvas 元素進(jìn)行繪圖。

3. Mozilla Canvas Tutorial

Mozilla提供的 HTML5 Canvas 元素教程。

4. HTML5 Canvas: The Basics

一步一步學(xué)習(xí)如何使用 HTML5 Canvas 元素。

5. W3Schools HTML5 Canvas

W3Schools 詳細(xì)介紹了HTML5 Canvas，附帶了基本的例子。

6. HTML5, Flex and Silverlight Charts: A Test of Performance

這篇文章對比了幾種圖表實(shí)現(xiàn)方案的性能：HTML5 charts vs. Flex charts vs. Silverlight charts

7. HTML5 Canvas Element Guide

非常好的 HTML5 canvas 元素教程。

8. 5 Clever Uses of the Canvas Tag

5個(gè)基于 HTML5 canvas 元素實(shí)現(xiàn)的非常棒的應(yīng)用。

9. Canvas Demos

使用 HTML5 canvas 元素實(shí)現(xiàn)的游戲、工具和其它應(yīng)用程序的示例及教程。

 

你可能還喜歡

• 九個(gè)讓人難以置信的HTML5和JavaScript實(shí)驗(yàn)
• 推薦21款最佳 HTML 5 網(wǎng)頁游戲
• 20佳驚艷的HTML5應(yīng)用程序示例
• 分享29款基于 HTML 5 Canvas 的網(wǎng)頁游戲
• HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表

（編譯來源：夢想天空  原文來自：HTML5 Canvas Graphing Solutions Every Web Developers Must Know）