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