From 60facb52e3534fb689658c71853f26f3e505f274 Mon Sep 17 00:00:00 2001 From: lin-xin <2981207131@qq.com> Date: Mon, 22 May 2017 17:37:48 +0800 Subject: [PATCH] Add canvas-demo --- canvas-demo/1.png | Bin 0 -> 11578 bytes canvas-demo/chart.html | 39 ++++++++ canvas-demo/sChart.js | 205 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 244 insertions(+) create mode 100644 canvas-demo/1.png create mode 100644 canvas-demo/chart.html create mode 100644 canvas-demo/sChart.js diff --git a/canvas-demo/1.png b/canvas-demo/1.png new file mode 100644 index 0000000000000000000000000000000000000000..a771e00c9de911cdc211bf405cd0cd67c58f2123 GIT binary patch literal 11578 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

RQI4Fz}kemPTlv)d;n;82n4AM$|7h^CF=OznN zeSTHla<<6kMgYl&_vDrF4x>In{0zzDXDZgeTSke+WE(bGCWgqS+4_e0OD4(xizj~E*ZEK_V{;g<5SUkzfdHVNjwDrKoLH>qc9<;hE zeya-Yv=&PN^&P)Yes{$&bU*(3@UjjIQ;eT9S zLMZTDI;&7_{Y?DW2ZIh$sIKe*fZSw(#a56db!yA<#L7Axn!wiy50(?EaVpw;rIq0j{dK;=K?hUy|-IA}Mcn7evZttA+u?&T^@S@s~#f$A@H{1Ne@Esw*j$8sw_ z-#%qf#L&_Dn1bz%tMQhZ%RNr4Kw5db76O#(JKlg z&LM?a+jkcvmJ!LreEEM~gYc|EXA{`XYfK@}ADCT_aU|JDWid|oLmRdOO+lcV&x2Bx z5vx5>SB56or1Y<>YXNCzrG+R4_#V)`VsiS|#D5B@T${0{9wF%rP+s}efjUxap8zTD zGd}Yn(>bwEFF!r2sVXp95~2c9E*mdV{;VxRyg8SFzW!_?no_3a3{G`Se`}h=$b5co zb+^!Q439G&C3SR#SF2=Hi}+plIj|qiqa~N4j};9{LxWj+P7 zf;lVu4~9vX)3V&-bUV<>cr3&ns^f*%^DQ�Mw3Mtf4sa!FJ0gmDkZ~$3S%TDibBz z;UxAx%}Y-5CcT)JhUfE|W6gBjm-OI|fD}%rpWwr*0@0{6dkTJxr87eF#TLw0{gq;Cr6Y?aDoZ;yHd?z5vEJ8wg#iS=H&|XF~#BGxu}cWPez{j z)b2!H?+o&HY)zwjYXkIz#Ui3Qy;JIDFm&mqsma1-&cU`=j>Q_|kp*{%wB+{_va$#ToF+em#EAesAw7jn#ArTS5!>3L{AglDs?X4Xld4;} z_vD>x0y^j^CUBXt=%(tAw};12c)-VmxdUk5;&N8s)2xhY-!)uK7BOZ@*IIDVTT;oZ zpWfix9+!ZpAO}KgOtoVL)BWrFp_vqY{Al{-6LXTZYkXXgc*Rv|%kl$fxK{bX%j;|6 z!KZV(Anog3oLJHZ0|IQ~_BK&fd8e%pOBk-xsKr%$HH7eq(WRcOyS|AF(l>zEgdVup z9Yo3H`YKlNNV-=DTEC;xjumX5|UraGr2A-TmT|xPfoQ zMf}netJsxj7f+SdpXvN$(w81k0i{b2jlzTQ{pVgv($uJ#H<7{@xY#H2T!GcNAvf}Ucm3H=%ATrTSQMNIz3LPXxKrfZ%_s6cd&Q{06Dd+Xej)M|Xcs68!V0xLL=Lk2$7g0E#aZs{Khct|yPC2ov#QaPvTszem)+5#ym!Q0kyAMA zUeyj{b$M`YRr8)9i?p&G&W<5vjm!*ta}T0(mOl_Q)z$?=wxHRJu|U4}EedGvD4$sn zZx%`M^cYDuvGJv#L{^AG$X)>Ivi~@_yTznvH&9XJ?-l$1m{~+VIrFAG-a?yVA`YBG P25G42-YdRq75cvbOUW;( literal 0 HcmV?d00001 diff --git a/canvas-demo/chart.html b/canvas-demo/chart.html new file mode 100644 index 0000000..8cf691a --- /dev/null +++ b/canvas-demo/chart.html @@ -0,0 +1,39 @@ + + + + + + + + + +

+ + + + + + \ No newline at end of file diff --git a/canvas-demo/sChart.js b/canvas-demo/sChart.js new file mode 100644 index 0000000..a8cb86b --- /dev/null +++ b/canvas-demo/sChart.js @@ -0,0 +1,205 @@ +function sBarChart(canvas, data, options) { + this.canvas = document.getElementById(canvas); + this.ctx = this.canvas.getContext('2d'); + this.data = data; // 存放图表数据 + this.dataLength = this.data.length; // 图表数据的长度 + this.width = this.canvas.width; // canvas 宽度 + this.height = this.canvas.height; // canvas 高度 + this.padding = 50; // canvas 内边距 + this.yEqual = 5; // y轴分成5等分 + this.yLength = 0; // y轴坐标点之间的真实长度 + this.xLength = 0; // x轴坐标点之间的真实长度 + this.yFictitious = 0; // y轴坐标点之间显示的间距 + this.yRatio = 0; // y轴坐标真实长度和坐标间距的比 + this.bgColor = '#ffffff'; // 默认背景颜色 + this.fillColor = '#1E9FFF'; // 默认填充颜色 + this.axisColor = '#666666'; // 坐标轴颜色 + this.contentColor = '#eeeeee'; // 内容横线颜色 + this.titleColor = '#000000'; // 图表标题颜色 + this.title = ''; // 图表标题 + this.titlePosition = 'top'; // 图表标题位置: top / bottom + this.looped = null; // 是否循环 + this.current = 0; // 当前加载柱状图高度的百分数 + this.currentIndex = -1; + this.onceMove = -1; + this.init(options); +} +sBarChart.prototype = { + init: function(options) { + if(options){ + this.padding = options.padding || 50; + this.yEqual = options.yEqual || 5; + this.bgColor = options.bgColor || '#ffffff'; + this.fillColor = options.fillColor || '#1E9FFF'; + this.axisColor = options.axisColor || '#666666'; + this.contentColor = options.contentColor || '#eeeeee'; + this.titleColor = options.titleColor || '#000000'; + this.title = options.title; + this.titlePosition = options.titlePosition || 'top'; + } + this.yLength = Math.floor((this.height - this.padding * 2 - 10) / this.yEqual); + this.xLength = Math.floor((this.width - this.padding * 1.5 - 10) / this.dataLength); + this.yFictitious = this.getYFictitious(this.data); + this.yRatio = this.yLength / this.yFictitious; + this.looping(); + }, + looping: function() { + this.looped = requestAnimationFrame(this.looping.bind(this)); + if(this.current < 100){ + this.current = (this.current + 3) > 100 ? 100 : (this.current + 3); + this.drawAnimation(); + }else{ + window.cancelAnimationFrame(this.looped); + this.looped = null; + this.watchHover(); + } + }, + drawAnimation: function() { + for(var i = 0; i < this.dataLength; i++) { + var x = Math.ceil(this.data[i].value * this.current / 100 * this.yRatio); + var y = this.height - this.padding - x; + + this.data[i].left = this.padding + this.xLength * (i + 0.25); + this.data[i].top = y; + this.data[i].right = this.padding + this.xLength * (i + 0.75); + this.data[i].bottom = this.height - this.padding; + this.drawUpdate(); + } + }, + drawUpdate: function() { + this.ctx.fillStyle = this.bgColor; + this.ctx.fillRect(0, 0, this.width, this.height); + this.drawAxis(); + this.drawPoint(); + this.drawTitle(); + this.drawChart(); + }, + drawChart: function() { + this.ctx.fillStyle = this.fillColor; + for(var i = 0; i < this.dataLength; i++) { + this.ctx.fillRect( + this.data[i].left, + this.data[i].top, + this.data[i].right - this.data[i].left, + this.data[i].bottom - this.data[i].top + ); + this.ctx.font = '12px Arial' + this.ctx.fillText( + this.data[i].value * this.current / 100, + this.data[i].left + this.xLength / 4, + this.data[i].top - 5 + ); + } + }, + drawAxis: function() { + this.ctx.beginPath(); + this.ctx.strokeStyle = this.axisColor; + // y轴线, +0.5是为了解决canvas画1像素会显示成2像素的问题 + this.ctx.moveTo(this.padding + 0.5, this.height - this.padding + 0.5); + this.ctx.lineTo(this.padding + 0.5, this.padding + 0.5); + // x轴线 + this.ctx.moveTo(this.padding + 0.5, this.height - this.padding + 0.5); + this.ctx.lineTo(this.width - this.padding / 2 + 0.5, this.height - this.padding + 0.5); + this.ctx.stroke(); + }, + drawPoint: function() { + // x轴坐标点 + this.ctx.beginPath(); + this.ctx.font = '12px Microsoft YaHei'; + this.ctx.textAlign = 'center'; + this.ctx.fillStyle = this.axisColor; + for(var i = 0; i < this.dataLength; i ++){ + var xAxis = this.data[i].xAxis; + var xlen = this.xLength * (i + 1); + this.ctx.moveTo(this.padding + xlen + 0.5, this.height - this.padding + 0.5); + this.ctx.lineTo(this.padding + xlen + 0.5, this.height - this.padding + 5.5); + this.ctx.fillText(xAxis, this.padding + xlen - this.xLength / 2, this.height - this.padding + 15); + } + this.ctx.stroke(); + + // y轴坐标点 + this.ctx.beginPath(); + this.ctx.font = '12px Microsoft YaHei'; + this.ctx.textAlign = 'right'; + this.ctx.fillStyle = this.axisColor; + this.ctx.moveTo(this.padding + 0.5, this.height - this.padding + 0.5); + this.ctx.lineTo(this.padding - 4.5, this.height - this.padding + 0.5); + this.ctx.fillText(0, this.padding - 10, this.height - this.padding + 5); + for(var i=0; i < this.yEqual; i ++){ + var y = this.yFictitious * (i + 1); + var ylen = this.yLength * (i + 1); + this.ctx.beginPath(); + this.ctx.strokeStyle = this.axisColor; + this.ctx.moveTo(this.padding + 0.5, this.height - this.padding - ylen + 0.5); + this.ctx.lineTo(this.padding - 4.5, this.height - this.padding - ylen + 0.5); + this.ctx.stroke(); + this.ctx.fillText(y,this.padding - 10, this.height - this.padding - ylen + 5); + this.ctx.beginPath(); + this.ctx.strokeStyle = this.contentColor; + this.ctx.moveTo(this.padding + 0.5, this.height - this.padding - ylen + 0.5) + this.ctx.lineTo(this.width - this.padding / 2 + 0.5, this.height - this.padding - ylen+0.5); + this.ctx.stroke(); + } + }, + drawTitle: function() { + if(this.title){ + this.ctx.beginPath(); + this.ctx.textAlign = 'center'; + this.ctx.fillStyle = this.titleColor; + this.ctx.font = '16px Microsoft YaHei'; + if(this.titlePosition === 'bottom' && this.padding >= 40){ + this.ctx.fillText(this.title, this.width / 2, this.height - 5) + }else{ + this.ctx.fillText(this.title, this.width / 2, this.padding / 2) + } + } + }, + /** + * 监听鼠标移动事件 + */ + watchHover: function() { + var self = this; + self.canvas.addEventListener('mousemove', function(ev) { + ev = ev || window.event; + self.currentIndex = -1; + for (var i = 0; i < self.data.length; i ++){ + if( ev.offsetX > self.data[i].left && + ev.offsetX < self.data[i].right && + ev.offsetY > self.data[i].top && + ev.offsetY < self.data[i].bottom ) + { + self.currentIndex = i; + } + } + self.drawHover(); + }) + }, + drawHover: function() { + if(this.currentIndex !== -1){ + if(this.onceMove === -1){ + this.onceMove = this.currentIndex; + this.canvas.style.cursor = 'pointer'; + } + }else{ + if(this.onceMove !== -1){ + this.onceMove = -1; + this.canvas.style.cursor = 'inherit'; + } + } + }, + /** + * y轴坐标点之间显示的间距 + * @param data + * @return y轴坐标间距 + */ + getYFictitious: function(data) { + var arr = data.slice(0); + arr.sort(function(a,b){ + return -(a.value-b.value); + }); + var len = Math.ceil(arr[0].value / this.yEqual); + var pow = len.toString().length - 1; + pow = pow > 2 ? 2 : pow; + return Math.ceil(len / Math.pow(10,pow)) * Math.pow(10,pow); + } +} \ No newline at end of file