canvas图表(4) - 散点图
原文地址:canvas图表(4) - 散点图
今天开始完成散点图,做完这一节,我的canvas图表系列就算是完成了,毕竟平时最频繁用到的就是这几类图表了:柱状,折线,饼图,散点。经过编写canvas图表项目的实践,我对canvas也做到了比较深入的理解,也是越来越喜欢计算机图形相关的知识了。接下来canvas的学习会告一段落,我会继续接着学习webGL,同时学习使用blender建立简单的3D模型。
本节效果请看:散点气泡图https://edwardzhong.github.io/sites/demo/dist/chartpoint.html
经过学习之前的其他图表后,就会发现很多地方都是相似的,只是具体的细节有些区别,所以这次主要就是讲解散点图不同的部分,功能点包括:
- 组织数据;
- 画面绘制;
- 数据动画的实现;
- 位移坐标绘制
- 鼠标事件的处理。
使用方式
用法基本跟柱状图和折线图类似,数据使用的是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,之前已经介绍过,不再详述。要注意的是,要谨慎使用阴影特性,因为它挺消耗性能,数据量一大,会卡的不要不要的
canvas图表(4) - 散点图的更多相关文章
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- canvas图表(1) - 柱状图
原文地址:canvas图表(1) - 柱状图 前几天用到了图表库,其中百度的ECharts,感觉做得最好,看它默认用的是canva,canvas图表在处理大数据方面比svg要好.那我也用canvas来 ...
- canvas图表(2) - 折线图
原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那 ...
- canvas图表(3) - 饼图
原文地址:canvas图表(3) - 饼图 这几天把canvas图表都优化了下,动画效果更加出色了,可以说很逼近echart了.刚刚写完的饼图,非常好的实现了既定的功能,交互的动画效果也是很棒的. 效 ...
- canvas图表详解系列(4):动态散点图
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- Chart.js – 效果精美的 HTML5 Canvas 图表库
Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...
- canvas图表详解系列(1):柱状图
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- canvas图表详解系列(2):折线图
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
随机推荐
- pm2用法详解+ecosystem.config
对于后台进程的管理,常用的工具是crontab,可用于两种场景:定时任务和常驻脚本.关于常驻脚本,今天介绍一款更好用的工具:pm2,基于nodejs开发的进程管理器,适用于后台常驻脚本管理,同时对no ...
- 详解变量声明加 var 和不加 var 的区别
在全局作用域中声明变量加 var 关键字和不加 var ,js 引擎都会将这个变量声明为全局变量,在实际运行时,两种声明方式的变量的行为也是几乎一致的.但是在全局作用域下是否声明一个变量的 时候加va ...
- Java中数组的遍历
(I)标准for循环遍历数组 例如代码片段: int [] nums = new int [] {0,1,2,3,4,5,6,7,8,9}; for(int i=0;i<11;i++){ Sys ...
- Linux入门(3)——Ubuntu16.04下安装VMware
下载linux版本 http://www.vmware.com/cn/products/workstation/workstation-evaluation.html 激活秘钥:5A02H-AU243 ...
- Vue.js2.0中的变化(持续更新中)
最近自己在学习Vue.js,在看一些课程的时候可能Vue更新太块了导致课程所讲知识和现在Vue的版本不符,从而报错,我会在以后的帖子持续更新Vue的变化与更新,大家也可以一起交流,共同监督学习! 1. ...
- 脱壳第一讲,手工脱壳ASPack2.12的壳.ESP定律
脱壳第一讲,手工脱壳ASPack2.12的壳.ESP定律 一丶什么是ESP定律 首先我们要明白什么是壳.壳的作用就是加密PE的. 而ESP定律就是壳在加密之前,肯定会保存所有寄存器环境,而出来的时候, ...
- 数据库.MongoDB.安装MongoDB数据库
树莓派安装方法 版本: mongodb 2.4.10 sudo apt-get install mongodb -y 安装完成后,检查命令 mongo 看到下图的内容,表示已安装并启动成功 ===== ...
- Java基础(00)
Java发展史 Java之父:詹姆斯.高斯林(James Gosling). SUN(Stanford University Network 斯坦福大学网络公司)产物. 1995年5月23日,java ...
- 我只是想获取access_token而已
起因是想在微信小程序中获取access_token. 之前资源只有一个阿里云虚拟主机和一个域名,于是用C#后端写了GET请求的接口,准备调用自己域名下的接口获取access_token 使用微信的wx ...
- 《mysql必知必会》读书笔记--存储过程的使用
以前对mysql的认识与应用只是停留在增删改查的阶段,最近正好在学习mysql相关内容,看了一本书叫做<MySQL必知必会>,看了之后对MySQL的高级用法有了一定的了解.以下内容只当读书 ...