首页 > 代码库 > canvas 实现 柱状图

canvas 实现 柱状图

define([],function(){    var myChart={        init:function(options){            this.ctx = options.ctx;            this.data = http://www.mamicode.com/options.data;"#999999"            var   dataCollection = this.dataarray[0].datacollection;            if(b){                x1=a*(this.w1+this.marginX)+this.ox                x2=b*(this.w1+this.marginX)+this.ox                x3=24*(this.w1+this.marginX)+this.ox            }            /*          this.ctx.moveTo(this.ox+this.w1, this.ctx.canvas.clientHeight -10);             this.ctx.lineTo(dataCollection.length*(this.w1+this.marginX)+this.ox-this.marginX, this.ctx.canvas.clientHeight -10 );             this.ctx.stroke();*/            var yearText= _.keys(this.yearMoney)            var yearValue= http://www.mamicode.com/_.values(this.yearMoney)"black"                this.ctx.fillText(yearText[i]+"年业绩", x1+165 ,this.ctx.canvas.clientHeight -15);                /*this.ctx.fillStyle="#64B7E9"*/                this.ctx.fillText(yearValue[i], x1+170 ,this.ctx.canvas.clientHeight -1);            }            this.ctx.fillStyle="#8dbb42"            this.ctx.fillText("入职",this.data.n1*(this.w1+this.marginX)+this.ox+this.w1-16,this.ctx.canvas.clientHeight -40);            /*      this.ctx.fillText("职",this.data.n1*(this.w1+this.marginX)+this.ox+this.w1-6,this.ctx.canvas.clientHeight -25);*/        },        drawCloumn:function(){            var x = this.ox+this.w1            var y = this.ctx.canvas.clientHeight;            var colors = ["#AEDAF5", "#FFCC00"];            for (var i = 0; i < this.dataarray.length; i++) {                dataCollection = this.dataarray[i].datacollection;                this.ctx.beginPath();                this.ctx.lineWidth = this.w1;                this.ctx.strokeStyle = colors[i];                for (var j = 0; j < dataCollection.length; j++) {                    metaData = http://www.mamicode.com/dataCollection[j];"black"                    //绘制柱的金额                    this.ctx.font = "10px Arial";this.ctx.textAlign = "start";                    if(metaData.amount!==""){                        this.ctx.fillStyle="black"                        var amountTMP=metaData.amount*1                        amountTMP= amountTMP.toFixed(2)                        if(amountTMP==0.00){                            amountTMP=" "                        }                    }                    else{                        this.ctx.fillStyle="#999999"                        amountTMP="  "                    }                    this.ctx.fillText(amountTMP, x-15, y - this.bottom - 1 - (metaData.amount /  this.yInterval) * 50);                    //绘制柱的标题                    this.ctx.font = "12px Arial";                    this.ctx.fillText(metaData.title, x-this.w1/2 , y -this.bottom+15);                    x += (this.categoryCount * this.w1 + this.marginX);                }                /*ffffffffffff*/                var aa=this.ox+this.w1                for (var j = 0; j < dataCollection.length; j++) {                    this.ctx.beginPath()                    this.ctx.lineWidth = 1                    this.ctx.strokeStyle="#999999"                    this.ctx.moveTo(aa, y - this.bottom);                    this.ctx.lineTo(aa, y - this.bottom+5);                    this.ctx.stroke();                    aa+= (this.categoryCount * this.w1 + this.marginX);                }                /*ddddddd*/                x = 80 + 30 * (i + 1);            }        },        draw:function(){            //柱状图标题            var title = this.data.title;            //Y轴标题            var verticaltitle = this.data.verticaltitle;            //X轴标题            var horizontaltitle = this.data.horizontaltitle;            //颜色            var colors = ["#AEDAF5", "#FFCC00"];            this.dataarray = this.data.data;            var dataCollection;            var metaData;            var maxamount = 0;            this.categoryCount = this.dataarray.length;            this.dataCount = this.dataarray[0].datacollection.length;            //找出最大的数值,以便绘制Y轴的刻度。            for (var i = 0; i < this.dataarray.length; i++) {                dataCollection = this.dataarray[i].datacollection;                for (var j = 0; j < dataCollection.length; j++) {                    metaData = http://www.mamicode.com/dataCollection[j]; /*alert(metaData.amount);*/"#myCanvasDiv").scrollLeft($("#myCanvasDiv")[0].scrollWidth)            /*            this.verticalbar()*/            this.horizontalbar()            this.drawCloumn()            this.setUnderLine()        },        verticalbar:function(){            //计算需要绘制几个刻度            var segmentcount = Math.ceil(this.maxAmount / this.yInterval);            //Y轴的高度            var height = segmentcount * 50;            this.height=height            //绘制Y轴            this.ctx.beginPath();            this.ctx.lineWidth = 1;            this.ctx.strokeStyle = "#999999";            this.ctx.moveTo(this.ox, this.ctx.canvas.clientHeight - this.bottom);            this.ctx.lineTo(this.ox, this.ctx.canvas.clientHeight - this.bottom - height - 20);            this.ctx.stroke();            //绘制刻度数            this.ctx.font = "12px Arial";            this.ctx.textAlign = "end";            this.ctx.fillText("0", this.ox-10, this.ctx.canvas.clientHeight - this.bottom);            for (var j = 1; j < segmentcount + 1; j++) {                /*  this.ctx.lineWidth = 1;                 this.ctx.strokeStyle = "#999999";*/                this.ctx.beginPath();                this.ctx.moveTo(this.ox,  this.ctx.canvas.clientHeight - this.bottom - (j ) * 50 );                this.ctx.lineTo(this.ox-10,  this.ctx.canvas.clientHeight -this.bottom - (j ) * 50 );                this.ctx.stroke();                this.ctx.fillText(this.yInterval * j, this.ox-10 , this.ctx.canvas.clientHeight - this.bottom - (j - 1) * 50 -40);            }        },        horizontalbar:function(){            var width = this.categoryCount * this.dataCount *  this.w1 + this.dataCount*this.marginX;            //绘制X轴            this.ctx.beginPath();            this.ctx.lineWidth = 1;            this.ctx.strokeStyle = "#999999";            this.ctx.moveTo(this.ox, this.ctx.canvas.clientHeight - this.bottom);            this.ctx.lineTo(this.ox+width+50, this.ctx.canvas.clientHeight - this.bottom);            this.ctx.stroke();        }    }    return myChart})

 

<iframe style="width: 100%; height: 400px;" src="http://sandbox.runjs.cn/show/vwlqc81o" frameborder="0" width="320" height="240"></iframe>