經過Html5 Canvas畫柱狀圖

     離開園子一年多了，如今回來了。問我去哪裏了？哈哈，其實哪裏都沒去，只是潛水潛了一年啊。時間真TM的快，三年前第一次來園子，那時候差很少剛上大學，而如今一會兒大學就畢業了。在這裏要感謝博客園，感謝dudu，感謝園子裏的碼農們，讓我這幾年大學沒白讀，天天能在這裏看精彩的博文我已經很知足了。呃，廢話很少說了，嘿嘿。

     今天帶來一個最近抽空弄的html5的「chart」插件，爲何打引號？由於它太弱了，只是爲了學習html5的canvas才弄的一個學習demo，姑且就讓我叫它殘缺的"chart"，並且目前也只有柱狀圖的顯示。下面代碼就是簡單的經過調用相關類庫，畫的一個柱狀圖：

    

 

       上面的程序首先引入了須要js文件，分別是H5Draw.js和h5Charts.js。其中H5Draw.js是對canvas api的簡單封裝，在h5Charts.js中會使用H5Draw.js中提供的繪圖函數，h5Charts.js即是繪製柱狀圖的內部實現。在這裏，咱們不須要知道內部具體如何實現，只要實例化一個柱狀圖的chart對象，而後給chart對象設置須要的屬性便可，其中dataProvider屬性就是須要進行可視化展現的用戶數據，這裏的type是column即是柱狀圖。最後調用chart對象的addTo函數，將該對象添加到指定的canvas元素中，就完成了。

        對於H5Draw.js和h5Charts.js的代碼，這裏就不詳細說了，由於都只是簡單的封裝，若是您感興趣，能夠直接從前面代碼中的src地址中下載，或者能夠去https://github.com/scottkiss/H5Draw下載。