原文地址： "canvas圖表(4) 散點圖" 今天開始完成散點圖，做完這一節，我的canvas圖表系列就算是完成了，畢竟平時最頻繁用到的就是這幾類圖表了：柱狀，折線，餅圖，散點。經過編寫canvas圖表項目的實踐，我對canvas也做到了比較深入的理解，也是越來越喜歡電腦圖形相關的知識了。接下來 ...
原文地址：canvas圖表(4) - 散點圖
今天開始完成散點圖，做完這一節，我的canvas圖表系列就算是完成了，畢竟平時最頻繁用到的就是這幾類圖表了：柱狀，折線，餅圖，散點。經過編寫canvas圖表項目的實踐，我對canvas也做到了比較深入的理解，也是越來越喜歡電腦圖形相關的知識了。接下來canvas的學習會告一段落，我會繼續接著學習webGL，同時學習使用blender建立簡單的3D模型。
本節效果請看：散點氣泡圖https://edwardzhong.github.io/sites/demo/dist/chartpoint.html
經過學習之前的其他圖表後，就會發現很多地方都是相似的，只是具體的細節有些區別，所以這次主要就是講解散點圖不同的部分，功能點包括：
- 組織數據；
- 畫面繪製；
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，之前已經介紹過，不再詳述。要註意的是，要謹慎使用陰影特性，因為它挺消耗性能，數據量一大，會卡的不要不要的
