canvas 实现柱状图

define([],function(){

    var myChart={

        init:function(options){

            this.ctx = options.ctx;

            this.data = options.data;

            this.yInterval =options.yInterval||10;

            this.marginX=options.marginX||8

            this.w1=options.w1||25

            this.ox=options.ox||30

            this.yearMoney=options.yearMonty

            this.bottom=70

            this.draw()

        },

        setUnderLine:function(a,b){

            this.ctx.beginPath()

            this.ctx.lineWidth = 0.6

            this.ctx.strokeStyle="#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= _.values(this.yearMoney)

            for(var i=0;i<=(dataCollection.length-1)/12;i++){

                var x1=i*(this.w1+this.marginX)*12+this.ox+this.w1

                var y1=this.ctx.canvas.clientHeight -10

                var y2=this.ctx.canvas.clientHeight -30

                this.ctx.beginPath()

                this.ctx.moveTo(x1, y1 );

                this.ctx.lineTo(x1, y2 );

                this.ctx.stroke();

                this.ctx.beginPath()

                if(i<(dataCollection.length-1)/12){

                    this.ctx.moveTo(x1, this.ctx.canvas.clientHeight-10);

                    this.ctx.lineTo(x1+140, this.ctx.canvas.clientHeight-10)

                }

                if(i>0){

                    this.ctx.moveTo(x1, this.ctx.canvas.clientHeight -10 );

                    this.ctx.lineTo(x1-140,this.ctx.canvas.clientHeight -10);

                }

                this.ctx.stroke();

                this.ctx.fillStyle="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 = dataCollection[j];

                    this.ctx.moveTo(x, y - this.bottom);

                    this.ctx.lineTo(x, y - this.bottom  - (metaData.amount / this.yInterval) * 50 );

                    this.ctx.stroke();

                    this.ctx.fillStyle="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 = dataCollection[j]; /*alert(metaData.amount);*/

                    maxamount = (new Number(metaData.amount) > maxamount) ? metaData.amount : maxamount;

                }

            }

            this.maxAmount=maxamount

            //动态设置 canvas 的尺寸

            this.ctx.canvas.height = Math.ceil(this.maxAmount / this.yInterval) * 50 + 100;    //120 is for the chart title.

            this.ctx.canvas.width = this.categoryCount * this.dataCount * this.w1 + this.dataCount*this.marginX  + 50;  //150 is for right side index

            $("#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

})

demo:http://sandbox.runjs.cn/show/vwlqc81o

canvas 实现柱状图的更多相关文章

第167天：canvas绘制柱状图
canvas绘制柱状图 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta char ...
js canvas画柱状图没什么高端的就是一篇偶尔思路的
公司项目要用js画柱状图,本来想用个插件吧 chart.js 忽然一想我们也用不了那么大的插件.自己写个吧,也能看看自己那点数学水平能够不! 有几个小亮点吧 1.函数x 和函数y 对坐标进行了转化 ...
小程序图表wx-chart
下载地址 https://github.com/xiaolin3303/wx-charts 使用步骤: 一.解压后,把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的 ...
今天写动态canvas柱状图小结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
d3.js多个x轴y轴canvas柱状图
最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...
canvas图表详解系列（1）：柱状图
本章建议学习时间4小时学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
canvas图表(1) - 柱状图
原文地址:canvas图表(1) - 柱状图前几天用到了图表库,其中百度的ECharts,感觉做得最好,看它默认用的是canva,canvas图表在处理大数据方面比svg要好.那我也用canvas来 ...
【带着canvas去流浪】（1）绘制柱状图
目录一. 任务说明二. 重点提示三. 示例代码四. 思考题示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...
canvas学习之柱状图
项目地址:http://pan.baidu.com/s/1nvhWrwP 因为最近项目中使用到了图表,而且个人一直希望研究canvas,所以最近几天花时间对canvas好好研究了一下,并写了一个dem ...

随机推荐

BZOJ3072 : [Pa2012]Two Cakes
考虑DP,设$f[i][j]$表示考虑了$a[1..i]$和$b[1..j]$的最小代价. 若$a[i]==b[j]$,则$f[i][j]=\min(f[i-1][j],f[i][j-1])+1$. ...
float的元素脱离文档流，但不完全脱离，只是提升了半层；
float的元素脱离文档流,但不完全脱离,只是提升了半层:
模态视图（modalTrasitionStyle）如何适应不同的版本
随着版本的更新,模态视图对版本也有不同的要求,那如何让模态视图适应多版本的要求呢?下面是小编的个人看法! -(void)presentModalVC { modalViewController *mo ...
[备份]Emacs配置文件
(set-background-color "gray20")(set-foreground-color "wheat") (tool-bar-mode -1) ...
URAL 1658. Sum of Digits(DP)
题目链接隔了一年零三个月,重新刷URAL,这题挺麻烦的输出路径.输出路径挺扯的,乱写了写乱改改就A了...我本来想用很靠谱,记录每一条路径的,然后输出最小的,结果Tle,然后我使劲水水又过了一组,发 ...
向linux内核中添加外部中断驱动模块
本文主要介绍外部中断驱动模块的编写,包括:1.linux模块的框架及混杂设备的注册.卸载.操作函数集.2.中断的申请及释放.3.等待队列的使用.4.工作队列的使用.5.定时器的使用.6.向linux内 ...
mysql 查看语句的执行效率
EXPLAIN 一.用途: 1.什么时候必须为表加入索引以得到一个使用索引找到记得的更快的select 2.知道优化器是否以一个最佳次序联结表. <官方的关于explain的文档在http:// ...
[转]关于event的两个常被忽略的api：isDefaultPrevented()和preventDefault()
今天在robert penner(as3 singal的作者)的一篇blog文中顺藤摸瓜到了darron schall的另外一篇blog文(Creating Default, Cancelable E ...
Struts2中的Action类（解耦方式，耦合方式）
一.解耦方式特点:对web资源进行了封装,便于单元测试. 实现:ActionContext和接口方式 1.ActionContext 特点:Action执行的上下文对象.保存了执行Action所需要 ...
跨集群 distcp命令
两个集群之间做数据同步,而且两个集群之间的版本不一致,这个时候使用的是hftp协议或者webhdfs协议! 如果试图在两个运行着不同HDFS版本的集群上使用distcp命令来复制数据并使用hdfs协议 ...

canvas 实现 柱状图

canvas 实现 柱状图的更多相关文章

随机推荐

热门专题

canvas 实现柱状图

canvas 实现柱状图的更多相关文章