摘要：最終效果圖下面代碼只有一個(gè)難點(diǎn)怎么算橫軸縱軸坐標(biāo)位置其余就容易多了，有一個(gè)注意問題，我其實(shí)寫復(fù)雜了各種位置都是動(dòng)態(tài)算的，因?yàn)閷?shí)際項(xiàng)目你用寫死的數(shù)值瀏覽器適配就會(huì)出問題。

上一篇文章我已經(jīng)說過數(shù)據(jù)準(zhǔn)備好畫圖就非常簡單了，如果你擔(dān)心不回話好辦，我給你個(gè)最簡單的小例子，

你先練練。

這個(gè)很簡單吧，什么面向?qū)ο笫裁吹亩疾挥?，你就先用最粗暴的方式擼出來。

然后，你在看下面我寫的代碼就容易了。最終效果圖

下面代碼只有一個(gè)難點(diǎn)：

1.怎么算橫軸、縱軸label坐標(biāo)位置

其余就容易多了，有一個(gè)注意問題，我其實(shí)寫復(fù)雜了各種位置都是動(dòng)態(tài)算的，因?yàn)閷?shí)際項(xiàng)目你用 寫死的數(shù)值瀏覽器適配就會(huì)出問題。不說了上代碼，先耐著性子敲一遍，然后在一點(diǎn)點(diǎn)研究。

/**
  此處可以寫一些裝13的東西
  盡可能用英文，不會(huì)可以自己百度，

  例如：
  Author：leo lau
  desc:ni shishibushiwozuitengaideren ,ni weisha bushuo hua
**/
"use strict";
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
    var data = [
      {"label":"一月","value":getRandomInt(0,400)},
      {"label":"二月","value":getRandomInt(1,400)},
      {"label":"三月","value":getRandomInt(1,400)},
      {"label":"四月","value":getRandomInt(0,400)},
      {"label":"五月","value":getRandomInt(1,400)}
    ];

    var targetId = "div1";
    var cw = 600;
    var ch = 450;
    //為啥用面向?qū)ο蠓绞?，因?yàn)轱@得拽唄
    //
    function Bcharts(targetId,cw,ch,data){
      //基礎(chǔ)信息
        var c = this;//為啥這么做？我懶，c = chart = this;
        c.configureChart(targetId,cw,ch,data);
        c.init();

    }
    Bcharts.prototype.configureChart = function(targetId,cw,ch,data){
      var c = this;
      c.setCanvasParameters(targetId,cw,ch,data);
      c.setChartParameters(targetId,cw,ch,data);
    };
    Bcharts.prototype.setCanvasParameters = function(targetId,cw,ch,data){
      var c = this;
      c.id = targetId;
      c.cw = cw;
      c.ch = ch;
      c.data = data;
    };
    Bcharts.prototype.setChartParameters = function(targetId,cw,ch,data){
      var c = this;
      c.axeRadio = 10;//定義一個(gè)比例,為啥是10，看圖大體是這個(gè)隨便定的，別忒離譜就好
      c.horGap = (c.cw*c.axeRadio)/100;
      c.verGap = (c.ch*c.axeRadio)/100;
    //標(biāo)識(shí)準(zhǔn)備
      c.fontRadio = 3;//原因同上
      c.horFontSize = (c.cw*c.fontRadio)/100;
      c.verFontSize = (c.ch*c.fontRadio)/100;

    };
    //初始化
    Bcharts.prototype.init = function(){
        var c = this;
        c.createCanvas();
        //這里只是把后臺(tái)給你的數(shù)據(jù)整理好了，并不是圖表直接能畫的數(shù)據(jù)
        //比如最大值是234，其實(shí)我們要花240，不可能是不整齊的
        c.handleData();
        //所以需要處理數(shù)據(jù)
        c.prepareData();

        //開畫
        c.draw();


    };
    Bcharts.prototype.createCanvas = function(){
        var c = this;
        var canvas = document.createElement("canvas");
        canvas.id = c.id + "-" + Math.random();
        canvas.width = c.cw;
        canvas.height = c.ch;
        document.getElementById(c.id).innerHTML = "";
        document.getElementById(c.id).appendChild(canvas);
        c.canvas = canvas;
        c.context = c.canvas.getContext("2d");
    };
    Bcharts.prototype.handleData = function(){
        //因?yàn)楹笈_(tái)肯定給你標(biāo)準(zhǔn)的數(shù)組格式一堆，但是你沒法直接用，得自己666一把
        var c = this;
        c.label = [];//這個(gè)數(shù)組放循環(huán)內(nèi)容的名字，比如[一月，二月]
        c.values = [];//放值[200,45……]
        c.data.forEach(function(item){
          c.label.push(item.label);
          c.values.push(item.value);
        });
    };
    Bcharts.prototype.prepareData = function(){
        var c = this;
        c.itemNum = c.data.length;
        c.MaxValue = Math.max.apply(null,c.values);
        c.MinValue = Math.min.apply(null,c.values);
        //算坐標(biāo)寬高
        c.horAxiWidth = c.cw - 2*c.horGap;
        c.verAxiWidth = c.ch - 2*c.verGap;

        //計(jì)算最大上邊界，比如最大數(shù)是234，坐標(biāo)得到240，而不是234
        //確定橫豎格寬度
        c.verBound = Math.ceil(c.MaxValue/10)*10;
        c.verFeq = c.verBound/c.itemNum;
        c.horFeq = c.horAxiWidth/c.itemNum;
    };
    Bcharts.prototype.draw = function(){
        var c = this;
        c.drawX();//x軸
        c.drawY();//y軸
        c.drawYLabel();//y坐標(biāo)字兒
        c.drawXLabel();//y坐標(biāo)字兒
        c.HorGuideLines();
        c.verGuideLines();
        c.drawBars();
    };
    Bcharts.prototype.drawX = function(){
      var c = this;
      var gd = c.context;
        gd.beginPath();
        gd.moveTo(c.horGap,c.ch -c.verGap);
        gd.lineTo(c.cw -c.horGap,c.ch -c.verGap);
        gd.lineWidth = 2;
        gd.stroke();
    };
    Bcharts.prototype.drawY = function(){
      var c = this;
      var gd = c.context;
        gd.beginPath();
        gd.moveTo(c.horGap,c.ch -c.verGap);
        gd.lineTo(c.horGap,c.verGap);
        gd.lineWidth = 2;
        gd.stroke();
    };
    Bcharts.prototype.drawYLabel = function(){
      var c = this;
      var gd = c.context;
      for(var i = 0;i<=c.itemNum;i++){
        var labelYText = c.verBound - i*c.verFeq;
        var labelPosX = c.horGap - c.horGap/c.axeRadio;
        var scaleReq = (c.verAxiWidth/c.verBound)*c.verFeq;
        var labelPosY = c.verGap+i*scaleReq;
        gd.textAlign = "right";
        gd.fillText(labelYText,labelPosX,labelPosY);
      }
      Bcharts.prototype.drawXLabel = function(){
        var c = this;
        var gd = c.context;
        for(var i = 0;i
PS：里面很多基礎(chǔ)函數(shù)要會(huì)，其實(shí)畫canvas考驗(yàn)的不是canvas技術(shù)，而是數(shù)學(xué)和基礎(chǔ)知識(shí)，一定要打好基礎(chǔ)。
整個(gè)代碼git地址：
https://github.com/leolau2012...