使用HTML5画柱状图

柱状图在很多应用中都比较常见，例如投票结果的统计分析，企业销售数据的统计分析等等。

 

 需求分析：

 一个柱状图一般包含以下几部分：

 1、标题

 2、横坐标（含标题）

 3、竖坐标 （含标题、刻度）

 4、柱（数据、颜色）

 5、标识器

 设计：

数据部分， 我们采用Json来表达：

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：

 

 

效果2：

 

 

具体实现下载源码。