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轴上面。
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) - 饼图

最后

所有图表代码请看chart.js


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java8排序–性能陷阱

Java 8带来了lambda的所有优点&#xff0c;使我们能够使用声明式样式进行编程。 但这真的免费吗&#xff1f; 我们是否应该担心必须为新的编程功能付出的代价&#xff1f; 这是一个我们可能要担心的例子。 考虑对这个简单类的实例进行排序&#xff1a; private static class…

词频统计工程相关

&#xff08;the format of this article is from SkYjoKEr&#xff09; //开始干之前 模块1、WordClass 一个存放单词以及实现相关操作的类&#xff0c;其中单词以二元组<word, freq>的形式存储。 &#xff08;20min&#xff09; 2、WordCounter 完成单词统计&#xff0…

canvas图形编辑器

原文地址&#xff1a;http://jeffzhong.space/2017/11/02/drawboard/   使用canvas进行开发项目&#xff0c;我们离不开各种线段&#xff0c;曲线&#xff0c;图形&#xff0c;但每次都必须用代码一步一步去实现&#xff0c;显得非常麻烦。有没有一种类似于PS&#xff0c;CAD…

2015年Java 8强势开始

JDK 8从2015年开始&#xff0c;其博客文章和文章的受欢迎程度将激增。 这与Java本月自动升级到JDK 8恰好吻合。 在这篇文章中&#xff0c;我列出并简要描述了2015年已经发布的有关JDK 8的众多文章和文章。 JDK 8 Streams在最近的帖子中很受欢迎。 我在2015年发表的第一篇博文是…

富文本编辑器、日期选择器、软件天堂、防止XSS攻击、字体icon、转pdf

【超好用的日期选择器】 Layui&#xff1a;http://www.layui.com/laydate/ 备注&#xff1a;日期选择器&#xff0c;用过很多很多&#xff0c;自己也写过一些&#xff1b;相信这个简单而又不简单的选择器&#xff0c;能够给你多些美好的时光 【很不错的几个富文本编辑器】 …

GIS开源程序收集(转载)

分类包括&#xff1a;GIS基础函数库、GIS控件、GIS桌面程序、GIS数据引擎、WEBGIS浏览器端程序、WEBGIS服务器程序、GPS相关程序&#xff0c;其它分类 派系&#xff1a;“NET”派系&#xff0c;“C”派系&#xff0c;“Java”派系&#xff0c;脚本派系&#xff0c;其它派系 “N…

Sacrilege –自定义SWT滚动条

SWT是本机OS小部件之上的薄抽象层。 如果您打算将应用程序与OS外观很好地集成在一起&#xff0c;那将是一件非常好的事情。 但是&#xff0c;作为一种折衷方案&#xff0c;这种方法大大限制了样式功能。 特别是&#xff0c;我感觉到本机SW​​T滚动条通常会干扰更精细的视图布…

关键字屏蔽-正则

【问题】关键字屏蔽是社交类软件必做的功能&#xff0c;当然了&#xff0c;一般来讲都是产品的中后期来做&#xff1b;不同产品规定不一样&#xff0c;跟着产品运营走&#xff0c;可以的 【方法】我们从技术的角度来看到这个问题&#xff0c;实现一个功能后者说实现一个需求&a…

Sub-Projects in Xcode(Xcode中的子项目)

source:http://www.cocoanetics.com/2011/12/sub-projects-in-xcode/ translation:http://www.xiaojiayi.com/2012/08/15/xcode中的子项目&#xff08;译文&#xff09;/ is work! 转载于:https://www.cnblogs.com/snowleung/archive/2012/09/26/2703250.html

堆上与堆外的内存使用情况

总览 最近有人问我在Java中使用堆内存的好处和智慧。 面临相同选择的其他人可能会对这些答案感兴趣。 堆外内存没什么特别的。 线程堆栈&#xff0c;应用程序代码&#xff0c;NIO缓冲区都在堆外。 实际上&#xff0c;在C和C 中&#xff0c;您只有非托管内存&#xff0c;因为默…

从CSS实现正片叠底看=混合模式mix-blend-mode

兼容性&#xff1a;这个东西说多了也没意思&#xff0c;像HTML5和CSS3这种兼容性时刻变化的东东&#xff0c;我们最好在自己支持的设备上实验&#xff0c;不支持&#xff0c;就在想办法呗&#xff0c;这个东西就是为了方便和好玩 所有属性&#xff1a; mix-blend-mode: normal…

实现对gridview删除行时弹出确认对话框的四种方法

实现对gridview删除行时弹出确认对话框的四种方法 在.net2.0中&#xff0c;实现对gridview删除行时弹出确认对话框的四种方法 1&#xff0c;GridView中如何使用CommandField删除时&#xff0c;弹出确认框? 在VS2005提供的GridView中我们可以直接添加一个CommandField删除列&am…

我最喜欢的Java拼图2 + 1 = 4

这是我当前最喜欢的Java难题。 您如何获取代码来执行此操作&#xff1f; Integer b 2; Integer c 1;System.out.println("bc : " (bc) ); // output: bc : 4 !!Sytem.out.println&#xff08;&#xff09;没有技巧&#xff0c;即您将能够在调试器中看到相同的值。…

CSS3盒模型温故

CSS有一种基础设计模式叫盒模型&#xff0c;定义了Web页面中的元素是如何看做盒子来解析的。每一个盒子有不同的展示界面&#xff0c;下面就来介绍盒模型&#xff0c;主要有一下几种盒模型&#xff1a;inline、inline-block、block、table、absolute position、float。浏览器把…

SSL与WildFly 8和Undertow

我一直在研究WildFly 8的一些安全性主题&#xff0c;偶然发现了一些配置文档&#xff0c;这些文档没有很好地记录。 其中之一是新Web子系统Undertow的TLS / SSL配置。 有许多关于较旧的Web子系统的文档&#xff0c;并且确实仍然可以使用&#xff0c;但是这里是使用新方法进行配…

伸展树

伸展树结合了二叉搜索树BST及二叉平衡树AVL的旋转特点&#xff0c;在每一次访问到某节点时都通过旋转将该节点往上推一位&#xff0c;由于没有保存高度信息因为空间复杂度稍优于二叉平衡树。伸展树的插入&#xff0c;删除&#xff0c;搜索的平均时间复杂度均为o(logn)&#xff…

CSS属性选择器温故-4

1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则&#xff0c;通配符的使用提高了样式表的书写效率&#xff0c;也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总结&#xff1a;CSS选择器和jQuery的选择器非常相似&#xff…

如何封装Spring bean

据我所知&#xff0c;Spring Framework除了具有单独的上下文之外&#xff0c;没有提供任何封装Spring bean的机制。 因此&#xff0c;当您在Spring的Inversion of Control容器中注册了公共类时&#xff0c;可以通过相同的上下文配置将其自动连接到任何Spring bean中。 这非常强…

分享下自己的EmpireofCode进攻策略 https://empireofcode.com/ https://empireofcode.com/game/#

# 没什么用&#xff0c;该游戏的模块调用不友好&#xff0c;取数据难import queue from battle import commander # import mathunit_client commander.Client() doing_last_order True towerid [] towerrg [] towerfr [] towerps [] tower_id 0 towers [] safe_posi[4…

Python多篇新闻自动采集

昨天用python写了一个天气预报采集&#xff0c;今天趁着兴头写个新闻采集的。 目标是&#xff0c;将腾讯新闻主页上所有新闻爬取下来&#xff0c;获得每一篇新闻的名称、时间、来源以及正文。 接下来分解目标&#xff0c;一步一步地做。 步骤1&#xff1a;将主页上所有链接爬取…