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 ...
随机推荐
- BZOJ4118 : [Wf2015]Window Manager
OPEN.CLOSE.RESIZE操作直接模拟即可. 对于MOVE,设$f_i$表示$i$号矩形的坐标,先无视边界通过DP求出每个矩形的坐标,再根据边界反向用第二次DP求出被移动矩形移动的真实距离,再 ...
- hadoop2.0安装中遇到的错误:mapreduce.shuffle set in yarn.nodemanager.aux-services is invalid
转:http://blog.csdn.net/bamuta/article/details/12995139 解决办法 : 在1个网站上找到了解决方法,(网络忘了没记)urg, my copy/pas ...
- 4分钟了解nano编辑器和简单命令 2015.10.6
nano感觉并不常用,但是偶尔遇到过几次. nano命令是一个类似VI的编辑器,但是更简单,其中的i,a等命令似乎可以用,但是有些命令不可以用.保存和退出最大的区别在于退出方式,如果你要保存所做的修改 ...
- 纪念逝去的岁月——C/C++冒泡排序
冒泡排序 代码 #include <stdio.h> void printList(int iList[], int iLen) { ; ; i < iLen; i++) { pri ...
- 总结新系统部署时，Oracle的一些注意事项：
1.Oracle安装时,要选择字符集为中文编码,数据库重要角色设置密码时,不要用数字开头,不然后面会报一些错误提示 2.emp导出的数据dmp格式,导入时要在服务器导入,具体没有试,要找机会试试,转化 ...
- 如何使用Apache的ab工具进行网站性能测试
1.打开Apache服务器的安装路径,在bin目录中有一个ab.exe的可执行程序,就是我们要介绍的压力测试工具. 2.在Windows系统的命令行下,进入ab.exe程序所在目录,执行ab.exe程 ...
- iOS 导入第三方文件夹时右侧出现问号
首先,和版本库有关. a代表add,m代表modify,?代表未能识别,通常如果使用git之类的版本控制器,添加文件后没有进行提交,就会出现? 1.遇到引用文件夹为蓝色的情况,是你以为勾了copy项, ...
- BizTalk开发系列(三十一)配置和使用HTTP适配器
BizTalk的主机分别进程内主机和独立主机.但由于一直使用的是进程内主机,对于独立主机的认识比较模糊,前不久在做一个BizTalk的项目的时 候,个别系统使用HTTP的方式发布Txt之类的文本的.刚 ...
- 关于c++风格 code style
Header files should be self-contained. All header files should have #define guards to prevent multip ...
- Java程序设计 实验三
北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1353 姓名:李海空 学号:20135329 成绩: 指 ...