经过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下载。