當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

canvas图表(4) - 散点图

發(fā)布時間：2023/12/2 编程问答 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 canvas图表(4) - 散点图小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

原文地址：canvas圖表(4) - 散點圖
今天開始完成散點圖，做完這一節(jié)，我的canvas圖表系列就算是完成了，畢竟平時最頻繁用到的就是這幾類圖表了：柱狀，折線，餅圖，散點。經過編寫canvas圖表項目的實踐，我對canvas也做到了比較深入的理解，也是越來越喜歡計算機圖形相關的知識了。接下來canvas的學習會告一段落，我會繼續(xù)接著學習webGL，同時學習使用blender建立簡單的3D模型。

本節(jié)效果請看：散點氣泡圖https://edwardzhong.github.io/sites/demo/dist/chartpoint.html

經過學習之前的其他圖表后，就會發(fā)現(xiàn)很多地方都是相似的，只是具體的細節(jié)有些區(qū)別，所以這次主要就是講解散點圖不同的部分，功能點包括：

組織數(shù)據(jù)；

畫面繪制；
3. 數(shù)據(jù)動畫的實現(xiàn)；
4. 位移坐標繪制
5. 鼠標事件的處理。

使用方式

用法基本跟柱狀圖和折線圖類似，數(shù)據(jù)使用的是Echart的樣例上的，但是它的數(shù)據(jù)格式太反人道了，我重新組織了數(shù)據(jù)格式，這樣更符合我們的使用習慣。

數(shù)據(jù)動畫

清除屏幕，然后重繪，實現(xiàn)動畫效果。實現(xiàn)了氣泡半徑的縮放和氣泡的位移動畫，為了更加的美觀，氣泡使用了徑向漸變createRadialGradient和陰影shadow，之前已經介紹過，不再詳述。要注意的是，要謹慎使用陰影特性，因為它挺消耗性能，數(shù)據(jù)量一大，會卡的不要不要的?

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);}());}

位移坐標繪制

比較有特色和有意思的是，根據(jù)鼠標位置在畫板中實時繪制虛線十字架，同時在x軸y軸顯示該點對應的數(shù)值信息。

我首先設置了8像素的間隔，然后間隔使用moveTo和lineTo繪制坐標，分別繪制了y軸和x軸的虛線，同時根據(jù)坐標點計算出該位置對應的數(shù)值，并將它們繪制到x軸和y軸上面。

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軸對應的數(shù)值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的時候，如果位置在標簽上和在圖表畫面上時，變?yōu)槭中螆D標。滑過畫板內容的時候，還要判斷是否在某個氣泡上面，如果是則用浮層顯示該氣泡對應的內容，同時前置該氣泡并用scale放大。接著還要繪制該點的虛線十字架并在xy軸繪制對應數(shù)值。

mousedown某個擊標簽就會顯示隱藏對應分類，每次觸發(fā)就會看到氣泡的半徑變化和位移的動畫效果。

事件相關內容具體實現(xiàn)可參考canvas圖表(3) - 餅圖

最后

所有圖表代碼請看chart.js

更多專業(yè)前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的canvas图表(4) - 散点图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： React 等框架使用 index 做
下一篇： canvas图形编辑器