canvas图表(4) - 散点图

港控/mmm° 2023-06-11 06:27 5阅读 0赞

原文地址：[canvas图表(4) - 散点图][canvas_4_ -]  
今天开始完成散点图，做完这一节，我的canvas图表系列就算是完成了，毕竟平时最频繁用到的就是这几类图表了：柱状，折线，饼图，散点。经过编写canvas图表项目的实践，我对canvas也做到了比较深入的理解，也是越来越喜欢计算机图形相关的知识了。接下来canvas的学习会告一段落，我会继续接着学习webGL，同时学习使用blender建立简单的3D模型。

本节效果请看：*[散点气泡图https://edwardzhong.github.io/sites/demo/dist/chartpoint.html][https_edwardzhong.github.io_sites_demo_dist_chartpoint.html]*  
![chartpoint.jpg][]

经过学习之前的*[其他图表][Link 1]*后，就会发现很多地方都是相似的，只是具体的细节有些区别，所以这次主要就是讲解散点图不同的部分，功能点包括：

1.  组织数据；
2.  画面绘制；  
    **3. 数据动画的实现；**  
    **4. 位移坐标绘制**  
    **5. 鼠标事件的处理。**

## 使用方式 ##

用法基本跟柱状图和折线图类似，数据使用的是Echart的样例上的，但是它的数据格式太反人道了，我重新组织了数据格式，这样更符合我们的使用习惯。

## 数据动画 ##

清除屏幕，然后重绘，实现动画效果。实现了气泡半径的缩放和气泡的位移动画，为了更加的美观，气泡使用了径向渐变createRadialGradient和阴影shadow，之前已经介绍过，不再详述。要注意的是，要谨慎使用阴影特性，因为它挺消耗性能，数据量一大，会卡的不要不要的?

animate(){ var that=this, ctx=this.ctx, item,obj,h,r,isStop=true; (function run(){ ctx.save(); //清屏 ctx.clearRect(0,0,that.W,that.H); // 画坐标系 that.drawAxis(); // 画标签 that.drawTag(); // 画y轴刻度 that.drawY(); ctx.translate(that.padding,that.H-that.padding); ctx.shadowBlur=1; isStop=true; for(var i=0,l=that.animateArr.length;i<l;i ){ item=that.animateArr[i]; if(item.hide)continue; item.isStop=true; ctx.strokeStyle=item.color; ctx.shadowColor=item.color; for(var j=0,jl=item.data.length;j<jl;j ){ obj=item.data[j]; var gradient=ctx.createRadialGradient(obj.x,-obj.h,0,obj.x,-obj.h,obj.radius); gradient.addColorStop(0,'hsla(' item.hsl ',70%,80%,0.7)'); gradient.addColorStop(1,'hsla(' item.hsl ',70%,60%,0.7)'); ctx.fillStyle=gradient; ctx.beginPath(); if(obj.r>obj.radius){ r=obj.r-obj.v; if(r<obj.radius){ obj.r=obj.radius; } } else { r=obj.r obj.v; if(r>obj.radius){ obj.r=obj.radius; } } if(obj.r!=obj.radius){ obj.r=r; item.isStop=false; } if(obj.p>obj.h){ h=obj.y-4; if(h<obj.h){ obj.y=obj.p=obj.h; } } else { h=obj.y 4; if(h>obj.h){ obj.y=obj.p=obj.h; } } if(obj.y!=obj.h){ obj.y=h; item.isStop=false; } ctx.arc(obj.x,-obj.y,obj.r,0,Math.PI*2,false); ctx.fill(); ctx.stroke(); } if(!item.isStop){isStop=false; } } ctx.restore(); if(isStop){return;} requestAnimationFrame(run); }()); }

## 位移坐标绘制 ##

比较有特色和有意思的是，根据鼠标位置在画板中实时绘制虚线十字架，同时在x轴y轴显示该点对应的数值信息。

我首先设置了8像素的间隔，然后间隔使用moveTo和lineTo绘制坐标，分别绘制了y轴和x轴的虚线，同时根据坐标点计算出该位置对应的数值，并将它们绘制到x轴和y轴上面。  
![it][]

drawLine(pos){ var that=this, ctx=that.ctx, padding=this.padding, xmax=this.xAxis.data.slice(-1)[0], xdis=this.W-padding*2, ymin=this.info.min, ymax=this.info.max, ydis=this.H-padding*2-this.paddingTop, yNum,xNum,space=8; ctx.save(); ctx.lineWidth=0.5; ctx.strokeStyle='hsla(0,0%,30%,1)'; // 绘制虚线十字坐标 ctx.beginPath(); for(var i=0;i*space<=xdis;i ){ ctx[i%2?'lineTo':'moveTo'](padding i*space,pos.y*2); } for(var i=0;i*space<=ydis;i ){ ctx[i%2?'lineTo':'moveTo'](pos.x*2,padding that.paddingTop i*space); } ctx.stroke(); // 绘制在xy轴对应的数值 ctx.fillStyle='hsla(0,0%,30%,1)'; ctx.fillRect(padding-75,pos.y*2-20,70,36); ctx.fillRect(pos.x*2-55,that.H-padding 10,110,40); yNum=Math.round((ymin (that.H-padding-pos.y*2)/ydis*(ymax-ymin))*100)/100; xNum=Math.round((pos.x*2-padding)/xdis*xmax*100)/100; ctx.font='22px arial'; ctx.textAlign='center'; ctx.textBaseLine='middle'; ctx.fillStyle='hsla(0,0%,100%,1)'; ctx.fillText(yNum,padding-40,pos.y*2 5); ctx.fillText(xNum,pos.x*2,that.H-padding 40); ctx.restore(); }

## 事件处理 ##

mousemove的时候，如果位置在标签上和在图表画面上时，变为手形图标。滑过画板内容的时候，还要判断是否在某个气泡上面，如果是则用浮层显示该气泡对应的内容，同时前置该气泡并用scale放大。接着还要绘制该点的虚线十字架并在xy轴绘制对应数值。

mousedown某个击标签就会显示隐藏对应分类，每次触发就会看到气泡的半径变化和位移的动画效果。

事件相关内容具体实现可参考*[canvas图表(3) - 饼图][Link 1]*

## 最后 ##

所有图表代码请看*[chart.js][]*

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[canvas_4_ -]: http://jeffzhong.space/2017/11/24/chartpoint/
[https_edwardzhong.github.io_sites_demo_dist_chartpoint.html]: http://jeffzhong.space/sites/demo/dist/chartpoint.html
[chartpoint.jpg]: http://oncse3u6r.bkt.clouddn.com/chartpoint.jpg
[Link 1]: http://www.cnblogs.com/edwardloveyou/p/7884050.html
[it]: http://oncse3u6r.bkt.clouddn.com/chartpoint2.jpg
[chart.js]: https://github.com/edwardzhong/html5Canvas/blob/master/chart/chart.js