柱状图在很多应用中都比较常见,例如投票结果的统计分析,企业销售数据的统计分析等等。
需求分析:
一个柱状图一般包含以下几部分:
1、标题
2、横坐标(含标题)
3、竖坐标 (含标题、刻度)
4、柱(数据、颜色)
5、标识器
![](http://images0.cnblogs.com/blog/99087/201401/082351449882.png)
设计:
数据部分, 我们采用Json来表达:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var jasonData = { "title": "2014 各分公司营业额", "verticaltitle": "金额(万)", "horizontaltitle": "公司", "data": [{ "category": "营业额", "datacollection": [{ "title": "广州", "amount": "5000" }, { "title": "上海", "amount": "6000" }, { "title": "北京", "amount": "4000" }, { "title": "杭州", "amount": "1000" }, { "title": "成都", "amount": "1500" }] }] };
绘图部分, 我们采用HTML5画布的相关功能,主要采用画线lineto、绘制文字fillText等方法。
效果1:
![](http://images0.cnblogs.com/blog/99087/201401/082354169578.png)
效果2:
![](http://images0.cnblogs.com/blog/99087/201401/082354440512.png)
具体实现下载源码。