Html5 Canvas画柱状图介绍_H5之家 - 中国HTML5教程资源分享第一站

今天带来一个最近抽空弄的html5的“chart”插件，为什么打引号？因为它太弱了，只是为了学习html5的canvas才弄的一个学习demo，姑且就让我叫它残缺的"chart"，而且目前也只有柱状图的显示。下面代码就是简单的通过调用相关类库，画的一个柱状图：

<!DOCTYPE html> <head><title>chart demo</title> <style> #chartContainer{ border:solid 1px #999; } </style> <script src=""></script> <script src=""></script> <script> window.onload = function(){ var chart = new h5Charts.SerialChart(); chart.dataProvider = [{age:"18",amount:10},{age:"38",amount:30},{age:"8",amount:6},{age:"29",amount:20}]; chart.categoryField = "age"; chart.valueField = "amount"; chart.type = "column"; chart.columnWidth = 55; chart.colors = ["#f00","#0f0","#0ff","#00f"]; chart.addTo("chartContainer"); }; </script> </head> <body> <canvas id="chartContainer" width="500" height="400"> browser doesn't support html5 </canvas> </body> </html>

上面的程序首先引入了需要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下载。