html模拟在线股票走势,基于Html5的股票行情k线图源码

K线图 滑块控制

b14703397954d6c8.png

441.html

这个K线图和flash实现的K线图非常接近,滑块控制是实现的难点,这里是根据滑块滑动的位置计算k线数据的范围,并实时重画,事实证明html5 canvas标签的性能还是相当的好的,在PC机上每秒可以重画20次以上,而在iPad上每秒可以重画10次左右,在ipad上流畅性有一定问题,所以在ipad上实现了另外一个版本,使用手指滑动通过touch相关的时间控制范围

K线图 触摸控制

ad5080bb22c30a97.png

这个K线图和上面的基本一样,但是控制K线范围改用了触摸事件,用touchstart,touchmove等事件,这个需要事实计算手指所在的坐标,然后根据坐标判断是否要显示浮窗,显示K线柱的高,开,低,收等信息。

大分时图

967303c11628b92e.png

441.html

分时图的实现是在一张画布上,当鼠标在画布上移动时,需要根据鼠标的坐标出十字,并显示鼠标所在时间的价格,这儿的十字叉是div实现的,而在画布上显示对应时间的价格是用了画布的clearRect方法,先把指定区域的内容清除掉,然后再重新画上对应价格。这样实现的流畅性非常的好,无论是在平板上还是在PC上。

交易分析图

d6dc9cfba9de4e85.png

441.html

交易分析图画图不是难点,难点在于对鼠标事件或touch事件的处理,上图中的浮动框、十字叉都是div,这样的性能可以接受,而事实修改画布则不流畅。

成交额分析图

43c4c24c7565a61d.png

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

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

相关文章

html5 css 三角形,css怎么画三角形?

css怎么画三角形?下面本篇文章就来给大家介绍一下使用CSS画三角形的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。css怎么画三角形?三角形实现原理:宽度width为0;height为0&#…

springboot整合JPA 多表关联 :一对多 多对多

补充一下自定义SQL 这是连表查询,可以任意查出字符,用Map接收 Testvoid test3() {JPAQueryFactory jpaQueryFactory new JPAQueryFactory(em);QStudent student QStudent.student;QMessage message QMessage.message;//constructor(StuMesDto.class, …

光子计算机玩游戏,用于光计算的光子计算机

计算机速度可能每年都在提高,但如果用光脉冲而不是电流来代表它的二进制代码1和0,将给计算速度带来质的飞跃。据每日科学网9月10日报道,美国宾夕法尼亚大学研究人员用硫化镉纳米线制造出了第一个全光光子开关,并将其与逻辑门结合&…

python中网页关闭再打开_Python Selenium 之关闭窗口close与quit的方法

selenium关闭窗口有两个方法,close与quit,我们稍作研究便知道这两个方法的区别。 1.看源码或API 这是close()的说明: Closes the current window. 关闭当前窗口。 这是quit()的说明: Quits the driver and closes every associate…

python网络库_python的网络库

最近新功能上线,帮忙加了几个监控脚本。上次用的perl,语法太随意了,看起来很是不整洁,自己写的都觉得不好,更不要说给别人看。好久没用python了,反正这次准备使用新的监控设计方案,刚好换一下。…

求一批整数中出现最多的个位数字_(43)C++面试之从1到n整数中1出现的次数

// 面试题43:从1到n整数中1出现的次数// 题目:输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数。例如// 输入12,从1到12这些整数中包含1 的数字有1,10,11和12,1一共出现了5次。#incl…

计算机应用全能,全能计算助手

应用介绍全能计算助手是一款专门为中小学生乃至成年人使用的全能计算机高级计算器,是你随身的数学好帮手。日常计算、函数绘图、分式化简、方程组求解、多项式分解和展开、微积分,统统包含其中,是超越一般计算器的高级计算器。自动计算器&…

j2me安装_Java第一步 JDK安装

安装JDK之前需要了解Windows下DOS命令winr 输入cmddir: 列出当前目录下的文件以及文件夹md:创建目录[文件夹]rd: 删除目录cd: 进入指定目录cd..:从当前目录退回到上一级目录cd:从当前目录退回到根目录&…

继续教育计算机组成原理a试卷,计算机组成原理模拟试题及答案西工大.doc

本科生期末试卷一一. 选择题(每小题1分,共10分)1.计算机系统中的存贮器系统是指______。A RAM存贮器B ROM存贮器C 主存贮器D 主存贮器和外存贮器2.某机字长32位,其中1位符号位,31位表示尾数。若用定点小数表…

sql left join用法_图解 SQL 中 JOIN 的各种用法

点击上方“Java知音”,选择“置顶公众号”技术文章第一时间送达!作者:CodingStarcnblogs.com/BoyceYang/p/3145279.html一、概要JOIN对于接触过数据库的人,这个词都不陌生,而且很多人很清楚各种JOIN,还有很…

超级计算机清华,从清华到华科 名校为何主办超级计算机大赛?

古罗马政治家、哲学家塞涅卡曾经说过:“自然赐给了我们知识的种子,而不是知识的本身。”在超级计算机领域,ASC世界大学生超级计算机竞赛正是这样一颗“种子”,北京、上海、广州、太原、武汉……ASC竞赛正在将超算的知识播撒到全球…

2019计算机组成原理及答案,2019计算机组成原理复习题(一)

《2019计算机组成原理复习题(一)》由会员分享,可在线阅读,更多相关《2019计算机组成原理复习题(一)(3页珍藏版)》请在人人文库网上搜索。1、一、填空类型题1设浮点数阶码为8位(含1位阶符),尾数为24位(含1位数符),则32位二进制补码…

python __reduce__魔法方法_非常全的通俗易懂 Python 魔法方法指南(下)

点击上方“咸鱼学Python”,选择“加为星标” 第一时间关注Python技术干货! 作者:Rafe Kettler 翻译:hit9 来源:https://pyzh.readthedocs.io/en/latest/python-magic-methods-guide.html 06. 反射 你可以通过定义魔法方…

计算机一级查询记录,技巧查看电脑中使用过的记录痕迹的详细教程

XP的系统是很多的用户还在操作的一款系统,其实现在更新以后最新的系统也是很好的使用的,开机的时候很多的用户对于不同的设置开机的时间还有如果你的电脑被别人的看到了的话是怎么实现查看的呢,今天小编就来跟大家分享一下技巧查看电脑中使用…

图像中值滤波python代码_图像中值滤波FPGA实现

C语言实用数字图像处理.pdf6.34 MB05-11-13|19:30 FPGA实验报告-李炎东.doc633.66 kB16-01-14|10:28 中值滤波在红外成像引信中的应用及硬件实现.caj31.64 kB12-12-13|16:47 图像中值滤波硬件算法及其在FPGA中的实现.pdf344.77 kB05-11-13|21:14 图像灰度增强算法的研究.pdf1.7…

python生成固定长度随机数_python日记——random模块

randomrandom模块用于生成伪随机数。真正意义上的随机数(或者随机事件)是按照实验过程中表现的分布概率随机产生的,其结果是不可预测的。而计算机中的随机数是所谓的随机函数按照一定算法模拟产生的,其结果是确定的,是可预测的。所以用计算机…

计算机室内设计cad实践报告,cad实习报告3000字

电子电路设计是现代信息技术的重要科学,是从事设计各种元器件、电路设计和电子系统设计与制造的技术性强的学科,也是我国正在大力发展并继续人才的重要专业技术领域。从事该行业的工程人员具有电子应用于设计的基础理论、基本知识和基本技能,…

foreach判断最后一个_ArrayList集合为什么不能使用foreach增删改?

点击上方“Java技术前线”,选择“置顶或者星标”与你一起成长译者:奋斗的小程序员链接:http://suo.im/4XaI8Q编程过程中常常需要使用到集合,而ArrayList也是我们常常使用的,但是最近在一次删除和增加中出现了一些问题&…

计算机文本处理竞赛题目,文字处理竞赛题目(word2010).pdf

文字处理竞赛题目(word2010).pdf (5页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!11.90 积分文字录入与排版高手竞赛 大 学 计 算 机 基 础 教 研 室 2 0 1 5 / 1 1 / 1 滁州学院 滁州学院《大学计…

头部外伤指什么_什么是颅骨缺损?

什么是颅骨缺损?颅骨缺损颅骨缺损(defect of skull)是指因开放性颅脑损伤造成的颅骨残缺,导致脑部与外界直接相通。颅脑创伤是造成颅骨缺损的主要原因。颅骨缺损综合征是该病的主要症状,常表现为头痛、头晕、缺损处不适、缺损边缘疼痛及感觉过…