使用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：

 

 

具體實現 下載源碼。