離開園子一年多了,如今回來了。問我去哪裏了?哈哈,其實哪裏都沒去,只是潛水潛了一年啊。時間真TM的快,三年前第一次來園子,那時候差很少剛上大學,而如今一會兒大學就畢業了。在這裏要感謝博客園,感謝dudu,感謝園子裏的碼農們,讓我這幾年大學沒白讀,天天能在這裏看精彩的博文我已經很知足了。呃,廢話很少說了,嘿嘿。html
今天帶來一個最近抽空弄的html5的「chart」插件,爲何打引號?由於它太弱了,只是爲了學習html5的canvas才弄的一個學習demo,姑且就讓我叫它殘缺的"chart",並且目前也只有柱狀圖的顯示。下面代碼就是簡單的經過調用相關類庫,畫的一個柱狀圖:html5
上面的程序首先引入了須要js文件,分別是H5Draw.js和h5Charts.js。其中H5Draw.js是對canvas api的簡單封裝,在h5Charts.js中會使用H5Draw.js中提供的繪圖函數,h5Charts.js即是繪製柱狀圖的內部實現。在這裏,咱們不須要知道內部具體如何實現,只要實例化一個柱狀圖的chart對象,而後給chart對象設置須要的屬性便可,其中dataProvider屬性就是須要進行可視化展現的用戶數據,這裏的type是column即是柱狀圖。最後調用chart對象的addTo函數,將該對象添加到指定的canvas元素中,就完成了。git
對於H5Draw.js和h5Charts.js的代碼,這裏就不詳細說了,由於都只是簡單的封裝,若是您感興趣,能夠直接從前面代碼中的src地址中下載,或者能夠去https://github.com/scottkiss/H5Draw下載。github