canvas圖表(4) - 散點圖

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

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

通過學習以前的其餘圖表後，就會發現不少地方都是類似的，只是具體的細節有些區別，因此此次主要就是講解散點圖不一樣的部分，功能點包括：

1. 組織數據；
2. 畫面繪製；
3. 數據動畫的實現；
4. 位移座標繪製
5. 鼠標事件的處理。

使用方式

用法基本跟柱狀圖和折線圖相似，數據使用的是Echart的樣例上的，可是它的數據格式太反人道了，我從新組織了數據格式，這樣更符合咱們的使用習慣。

var con=document.getElementById('container');
    var point =new Point(con);
    point.init({
        title:'1990 與 2015 年各國家人均壽命與 GDP',
        xAxis:{
            name:'GDP',
            data:[10000,20000,30000,40000,50000,60000,70000],
            formatter:'$ {value}'
        },
        yAxis:{
            name:'AGE'
        },
        desc:{
            xVal:'gdp',
            yVal:'age',
            num:'number'
        },
        series:[{
            name:'1990',
            data:[
                {xVal:28604,yVal:77,num:17096869,name:'Australia'},
                {xVal:31163,yVal:77.4,num:27662440,name:'Canada'},
                {xVal:1516,yVal:68,num:1154605773,name:'China'},
                {xVal:13670,yVal:74.7,num:10582082,name:'Cuba'},
                {xVal:28599,yVal:75,num:4986705,name:'Finland'},
                {xVal:29476,yVal:77.1,num:56943299,name:'France'},
                {xVal:31476,yVal:75.4,num:78958237,name:'Germany'},
                {xVal:28666,yVal:78.1,num:254830,name:'Iceland'},
                {xVal:1777,yVal:57.7,num:870601776,name:'India'},
                {xVal:29550,yVal:79.1,num:122249285,name:'Japan'},
                {xVal:2076,yVal:67.9,num:20194354,name:'North Korea'},
                {xVal:12087,yVal:72,num:42972254,name:'South Korea'},
                {xVal:24021,yVal:75.4,num:3397534,name:'New Zealand'},
                {xVal:43296,yVal:76.8,num:4240375,name:'Norway'},
                {xVal:10088,yVal:70.8,num:38195258,name:'Poland'},
                {xVal:19349,yVal:69.6,num:147568552,name:'Russia'},
                {xVal:10670,yVal:67.3,num:53994605,name:'Turkey'},
                {xVal:26424,yVal:75.7,num:57110117,name:'United Kingdom'},
                {xVal:37062,yVal:75.4,num:252847810,name:'United States'}]
            },
            {
            name:'2015',
            data:[
                {xVal:44056,yVal:81.8,num:23968973,name:'Australia'},
                {xVal:43294,yVal:81.7,num:35939927,name:'Canada'},
                {xVal:13334,yVal:76.9,num:1376048943,name:'China'},
                {xVal:21291,yVal:78.5,num:11389562,name:'Cuba'},
                {xVal:38923,yVal:80.8,num:5503457,name:'Finland'},
                {xVal:37599,yVal:81.9,num:64395345,name:'France'},
                {xVal:44053,yVal:81.1,num:80688545,name:'Germany'},
                {xVal:42182,yVal:82.8,num:329425,name:'Iceland'},
                {xVal:5903,yVal:66.8,num:1311050527,name:'India'},
                {xVal:36162,yVal:83.5,num:126573481,name:'Japan'},
                {xVal:1390,yVal:71.4,num:25155317,name:'North Korea'},
                {xVal:34644,yVal:80.7,num:50293439,name:'South Korea'},
                {xVal:34186,yVal:80.6,num:4528526,name:'New Zealand'},
                {xVal:64304,yVal:81.6,num:5210967,name:'Norway'},
                {xVal:24787,yVal:77.3,num:38611794,name:'Poland'},
                {xVal:23038,yVal:73.13,num:143456918,name:'Russia'},
                {xVal:19360,yVal:76.5,num:78665830,name:'Turkey'},
                {xVal:38225,yVal:81.4,num:64715810,name:'United Kingdom'},
                {xVal:53354,yVal:79.1,num:321773631,name:'United States'}]
        }]
    });

數據動畫

清除屏幕，而後重繪，實現動畫效果。實現了氣泡半徑的縮放和睦泡的位移動畫，爲了更加的美觀，氣泡使用了徑向漸變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軸上面。

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) - 餅圖

最後

全部圖表代碼請看chart.js