使用canvas绘制股票图【envision.js】

最新推荐文章于 2024-04-26 16:02:19 发布
最新推荐文章于 2024-04-26 16:02:19 发布
阅读量1.1w 收藏 2
点赞数 1
分类专栏： envision.js 股票图 canvas flotr2 html5 文章标签： javascript function 图形 firebug 浏览器 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slalx/article/details/7797852
版权
最近的一个小项目需要用到一些财经图表，如股票图，净值曲线图，投资组合饼图等。按照产品的要求，这些图表需要在移动设备【手机，平板电脑】
和pc端良好运行。我们都知道在ios设备上没法运行flash，所以必须把使用flash开发的方案放弃，只能转向采用javascript开发，最新的移动设
备上的浏览器对javascript支持越来越好，同时用于图形图像开发的canvas属性在这里也支持良好。
   选好了技术方案，那就开发吧，很显然如果从零要把这些图表开发的比较完美还是很费时费力的，再说了不要重复发明轮子不是一直教导我们吗。那
么我们就来看看有没有现成的轮子供我们使用呢，经过搜索和查找，envision.js这个javascript图形类库引起了我的注意，这个类库的features
  • 支持所有现代浏览器，从IE6+
  • 支持触摸特性，移动设备
  • 财经图表
  • 时间序列图表
  • 能够自定义图表
  • 基于flotr2,同时也能够适配其他库
最低0.47元/天 解锁文章
slalx
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
html5+js的数据仿股票模拟曲线图
10-10
一款实用的仿股票曲线图，可用于系统大数据展示
heatmap.js canvas绘制热力图js库
08-27
在网页开发中，我们常常使用JavaScript库来创建热力图，其中`heatmap.js`是一个非常受欢迎的选择。本文将深入探讨`heatmap.js`库以及如何在canvas上绘制热力图。 `heatmap.js`是一个轻量级且功能强大的JavaScript库...
微信小程序demo组件：canvas股票分时图(源代码+截图)
06-19
微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程序demo组件：canvas股票分时图(源代码+截图)微信小程
Canvas绘制股票K线图
weixin_33989058的博客
01-18 1201
最近想在小程序做股票K线图，于是尝试用Canvas实现股票K线图。K线图用到Canvas的API其实只有划线和画矩形，即moveTo(),lineTo(),fillRect()等函数。 第一步，我们先定义K线类： function Bar(open,high,low,close,width){ this.open = open; this.high = high; this...
鸿蒙Canvas自定义View之k线图绘制
最新发布
AC1992的专栏
04-26 218
【代码】鸿蒙Canvas自定义View之k线图绘制。
分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envision.js
weixin_34095889的博客
04-10 116
日期：2012-4-7  来源：GBin1.com 在线演示  本地下载 今天我们介绍一个超棒的创建快速动态互动HTML5可视化图形效果的javascript类库 - Envision.js，这个类库拥有俩个内建的图表类型： 时间序列图表 金融图形图表 主要特性 实时图形展示 时间序列，支持缩放，内建互动操作 金融类型图表，可定制 支持AJAX 自定义图形...
【JavaScript源代码】JavaScript使用canvas绘制坐标和线.docx
12-29
JavaScript使用canvas绘制坐标和线 　本文实例为大家分享了JavaScript使用canvas绘制坐标和线的具体代码，供大家参考，具体内容如下　具体代码如下:　<!DOCTYPE html>　　<html lang="en">　　<head>　　 ...
HTML5 Canvas绘制灰太狼图像效果.zip
09-25
首先，可能使用`drawImage()`方法来加载灰太狼的图片资源，并将其绘制到Canvas上。该方法通常接收3个参数：图像源、X坐标和Y坐标，或者9个参数来精确控制缩放和裁剪。 ```javascript var img = new Image(); img....
Html5_Canvas绘制心电图曲线.rar
07-10
Html5_Canvas绘制心电图，绘制出了超逼真的心电图曲线，要是有什么第三方硬件输入数据，是不是这真的就是心电图了？PS：查看效果时建议使用Google Chrome浏览器，因Google Chrome浏览器对Html5支持最好。
html5 canvas绘制曲线动画特效.zip
08-30
Canvas API是一个基于矢量图形的JavaScript接口，它提供了多种方法和属性，用于在二维画布上绘制线条、形状、图像等。在HTML5中，`<canvas>`元素作为图形的容器，而实际的绘图操作则通过JavaScript代码完成。 在...
行情K线JS Canvas绘制工具
05-19
使用Canvas完成的行情绘制工具，所有说明都在代码注释中。附件中含有示例。
envisionjs, 动态HTML5可视化.zip
09-18
envisionjs, 动态HTML5可视化 Envision.js快速交互式HTML5图表。 http://groups.google.com/group/envisionjs/特性现代浏览器，IE 6 移动/触控支持预生成模板适用于现有库依赖项Envi
Html5版本的全套股票行情图
02-23
Html5版本的全套股票行情图 html54stock
K线图画图最强大的javascript脚本
04-19
K线图画图最强大的javascript脚本，里面有详细的例子可供学习
733. 图像渲染---js解法
qq_45679015的博客
04-26 272
题目描述: 有一幅以二维整数数组表示的图画，每一个整数表示该图画的像素值大小，数值在 0 到 65535 之间。 给你一个坐标 (sr, sc) 表示图像渲染开始的像素值（行 ，列）和一个新的颜色值 newColor，让你重新上色这幅图像。 为了完成上色工作，从初始坐标开始，记录初始坐标的上下左右四个方向上像素值与初始坐标相同的相连像素点，接着再记录这四个方向上符合条件的像素点与他们对应四个方向上像素值与初始坐标相同的相连像素点，……，重复该过程。将所有有记录的像素点的颜色值改为新的颜色值。 最后返回经过上
HTML5 Canvas 绘制股市走势图
热门推荐
我爱大海V5的专栏
12-20 1万+
做金融类网站的时候，出现的最多的是价格走势图，但由于金融市场变化非常快，人工做图的话很不靠谱，机器生成的话开发难度比较大。所以小型金融网站通常会引用大网站的数据，例如 Google 财经频道的走势图。 可是 Google 采用的是 flash 来展示价格走势，如果我们的网站要针对 iPad 等移动终端进行开发的话，只能使用 HTML5 canvas 标签绘图。今天在网上看到一个
股票行情图的绘制，分时图和闪电图
NatanLu的专栏
12-15 9570
心血来潮，想到去年独立开发的一个项目XX操盘，其中有关于个股的走势行情图是完全基于自定义view实现的，本文分析一下大致流程及部分实现代码；具体的自定义控件步骤想必大家比我还清楚的，不作详解分时图效果图如下(分时图暂未录制动图，闪电动图在最后哦~~~) 实现步骤：1.自定义相关属性：attrs.xml中声明<declare-styleable name="MinView"> <attr
css股票曲线图图解,怎么看懂股票曲线图?各个曲线图代表的含义
weixin_33894125的博客
08-03 980
怎么看懂股票曲线图?各个曲线图代表的含义在股票技术分析中，我们经常要分析K线图，分时图等等，有些新手在入门的时候常常把两者弄混，所以统称它们为曲线图，实际它们就是K线图和分时图了，到底如何看懂股票曲线图?一起看看这些曲线所代表的含义吧。如何看股票的曲线图?1)白色曲线：表示大盘加权指数，即证交所每日公布媒体常说的大盘实际指数。2) 黄色曲线：大盘不含加权的指标，即不考虑股票盘子的大小，而将所有股票...
JavaScript中使用Canvas绘制YUV420图像
07-08
在JavaScript中使用Canvas绘制YUV420图像是一个相对复杂的任务，因为Canvas默认使用RGB颜色模式而不是YUV。你需要进行一些额外的步骤来将YUV420数据转换为RGB，并将其绘制到Canvas上。 下面是一个基本的示例代码，用于展示如何使用Canvas绘制YUV420图像： ```html <!DOCTYPE html> <html> <head> <title>Canvas YUV420</title> </head> <body> <canvas id="myCanvas" width="400" height="300"></canvas> <script> // 获取Canvas元素 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 获取YUV420图像的Y、U、V分量数据（假设已经获取到了） // 假设Y分量数据为yData，U分量数据为uData，V分量数据为vData // 创建一个ImageData对象用于存储RGB数据 var imageData = ctx.createImageData(canvas.width, canvas.height); var data = imageData.data; // YUV420转RGB函数 function yuv420ToRgb(y, u, v) { var r, g, b; // YUV到RGB转换公式 r = y + 1.402 * (v - 128); g = y - 0.344136 * (u - 128) - 0.714136 * (v - 128); b = y + 1.772 * (u - 128); // 将RGB值限制在0到255之间 r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b)); return [r, g, b]; } // 遍历每个像素 for (var i = 0; i < canvas.width * canvas.height; i++) { var y = yData[i]; var u = uData[Math.floor(i / 4)]; var v = vData[Math.floor(i / 4)]; // 转换YUV到RGB var rgb = yuv420ToRgb(y, u, v); // 填充RGB值到ImageData var dataIndex = i * 4; data[dataIndex] = rgb[0]; // 红色通道 data[dataIndex + 1] = rgb[1]; // 绿色通道 data[dataIndex + 2] = rgb[2]; // 蓝色通道 data[dataIndex + 3] = 255; // 不透明度 } // 将ImageData对象绘制到Canvas上 ctx.putImageData(imageData, 0, 0); </script> </body> </html> ``` 在上面的示例中，我们假设已经获取到了YUV420图像的Y、U、V分量数据，并创建了一个ImageData对象来存储RGB数据。然后，我们使用一个yuv420ToRgb函数将YUV数据转换为RGB，并将转换后的RGB值填充到ImageData对象中。最后，我们使用putImageData方法将ImageData对象绘制到Canvas上。 请注意，上述示例是一个简化的版本，并未考虑YUV420图像的具体格式和数据排列。在实际应用中，你可能需要根据实际情况进行适当的解析和处理。此外，由于JavaScript是单线程的，处理大量像素数据可能会导致性能问题，你可能需要考虑使用Web Worker或其他优化技术来提高性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值