`

Javascript Canvas 股票K线 ~

阅读更多
今一段时间好久没有发文了,也很少上javaeye,都是因为工作太忙,大脑处于集中状态,没闲下来,项目就要发布了,有时间将以前编写的程序和大家分享一下 :)

以下是使用HTML5特性 Canvas 编写的程序,后台使用 rails 因为是很久之前写的,rails版本比较老 , : )

IDC url :http://9536.ipc.la/day.htm 实时数据好了,雷达数据还未好:)

下载代码:
  (代码见附件,源代码压缩后10m,下载可能有点慢,请耐心等待 )

运行方式:
 
ruby script/server -p3001


访问本地: http://localhost:3001/day/day.htm



看图说话:

以下是参考图片





分享到:
评论
21 楼 rainsilence 2012-07-23  
fqf530854528 写道
canvas 标签在js中没有体现出来啊,如果是单纯的html5,canvas标签的方法都可以使用,但是我将代码放入rails中,canvas标签就会出错啊

一个服务器端语言,一个客户端语言,浑身不搭界。出错只能说明你代码有问题
20 楼 fqf530854528 2012-07-23  
canvas 标签在js中没有体现出来啊,如果是单纯的html5,canvas标签的方法都可以使用,但是我将代码放入rails中,canvas标签就会出错啊
19 楼 weiyongqing 2012-01-11  
用ruby怎么运行不了啊
,恳请楼主指点啊
18 楼 luckybbdog 2011-07-27  
edisonlz 写道
luckybbdog 写道
嗯,一直没找到合适的朋友来做,自己一个人也做不来,所以一直拖着。

如果要做大,这个是需要很多钱买数据的, :)


先看看能不能读取大智慧的数据,因为还有一些数据我是在大智慧里算出来的,用那些数据接口的话还不知道要怎样才能算的出来
17 楼 edisonlz 2011-07-27  
luckybbdog 写道
嗯,一直没找到合适的朋友来做,自己一个人也做不来,所以一直拖着。

如果要做大,这个是需要很多钱买数据的, :)
16 楼 luckybbdog 2011-07-26  
嗯,一直没找到合适的朋友来做,自己一个人也做不来,所以一直拖着。
15 楼 edisonlz 2011-07-26  
luckybbdog 写道
edisonlz 写道
数据是从yahoo finance中得到的,免费的,有兴趣可以看看
这个项目主要时用html5 canvas做的

luckybbdog 写道
cool~
一直在找这个思路的东西
但不懂ruby,只懂一点python
请教下博主数据源从哪来呢?网上抓取还是有数据接口呢?
不过好像看上面显示的是天狼的
博主是天狼的员工么?
天狼的东西比较烂诶~



不懂ruby诶~下载了都看不了啊~
是挺有兴趣弄一个html5技术做前端显示的股票网站的
像财金通(mycjt.cn)那样,嗯,俺不是做广告,只是俺现在只找到这个网站做的比较好而已,freestockcharts.com那个是用sliverlight弄的
可惜俺能力不够,有两个IT界的炒股的朋友很有兴趣弄,可惜他们不是做网站方向的。
数据源能用linux的服务器里虚拟机装大智慧或通达信或用银江接口吗?然后用python读取数据源,再加上自己的自定义数据和自定义指标以及盘后股池和盘中预警股池前端显示吗?


你要做的事情,一个人干太复杂了,而且会耗时很长 :)
14 楼 luckybbdog 2011-07-25  
edisonlz 写道
数据是从yahoo finance中得到的,免费的,有兴趣可以看看
这个项目主要时用html5 canvas做的

luckybbdog 写道
cool~
一直在找这个思路的东西
但不懂ruby,只懂一点python
请教下博主数据源从哪来呢?网上抓取还是有数据接口呢?
不过好像看上面显示的是天狼的
博主是天狼的员工么?
天狼的东西比较烂诶~



不懂ruby诶~下载了都看不了啊~
是挺有兴趣弄一个html5技术做前端显示的股票网站的
像财金通(mycjt.cn)那样,嗯,俺不是做广告,只是俺现在只找到这个网站做的比较好而已,freestockcharts.com那个是用sliverlight弄的
可惜俺能力不够,有两个IT界的炒股的朋友很有兴趣弄,可惜他们不是做网站方向的。
数据源能用linux的服务器里虚拟机装大智慧或通达信或用银江接口吗?然后用python读取数据源,再加上自己的自定义数据和自定义指标以及盘后股池和盘中预警股池前端显示吗?
13 楼 edisonlz 2011-07-25  
数据是从yahoo finance中得到的,免费的,有兴趣可以看看
这个项目主要时用html5 canvas做的

luckybbdog 写道
cool~
一直在找这个思路的东西
但不懂ruby,只懂一点python
请教下博主数据源从哪来呢?网上抓取还是有数据接口呢?
不过好像看上面显示的是天狼的
博主是天狼的员工么?
天狼的东西比较烂诶~

12 楼 luckybbdog 2011-07-25  
cool~
一直在找这个思路的东西
但不懂ruby,只懂一点python
请教下博主数据源从哪来呢?网上抓取还是有数据接口呢?
不过好像看上面显示的是天狼的
博主是天狼的员工么?
天狼的东西比较烂诶~
11 楼 poeho 2011-02-09  
js里的命名有点乱。。
10 楼 edisonlz 2010-11-26  

IE 可以跑,目前还没时间调试,IE下使用 vml绘图。、
witcheryne 写道
IE 6 - 8都跑不了

你们主要客户群是哪些??
设备终端呢?



haolei92 写道
解压密码呢?

没有解压密码

guyinglong 写道
我的小红伞报毒。。。

小红伞对js报错吧
9 楼 witcheryne 2010-11-26  
IE 6 - 8都跑不了

你们主要客户群是哪些??
设备终端呢?
8 楼 haolei92 2010-11-25  
解压密码呢?
7 楼 qchong 2010-11-25  
实时数据从何而来?
6 楼 guyinglong 2010-11-21  
我的小红伞报毒。。。
5 楼 Army 2010-11-21  
event is not defined
[Break on this error] x1=event.pageX; tt_g.js (第 426 行)

-o-
4 楼 rainsilence 2010-11-21  
wugc 写道
Cool啊。
但现在有哪些浏览器支持啊?
Chrome only?

全浏览器
3 楼 rainsilence 2010-11-21  
这种程度的特效去浏览器支持
2 楼 wugc 2010-11-21  
Cool啊。
但现在有哪些浏览器支持啊?
Chrome only?

相关推荐

    基于html5的canvas实现的股票k线图,均线图,KDJ技术指标.zip

    在这个项目中,Canvas被用来绘制股票的K线图、均线图以及KDJ技术指标,这些都是股票分析中的核心元素。 1. **股票K线图**:K线图,又称阴阳烛图,是股票市场中常用的图表形式,用于展示股票价格的历史走势。它由...

    行情K线JS Canvas绘制工具

    行情K线JS Canvas绘制工具是一种基于JavaScript和HTML5 Canvas技术实现的用于绘制股票行情图表的解决方案。这个工具主要用于展示股票的开盘价、收盘价、最高价和最低价,也就是我们通常所说的K线图。K线图是金融市场...

    基于html5 canvers的k线图.zip

    在金融领域,K线图(也称为OHLC图)是用于展示股票、期货、数字货币等市场数据的重要图表类型,它包含了开盘价、最高价、最低价和收盘价的信息。"基于html5 canvas的k线图.zip"这个压缩包文件可能包含了一个使用...

    K线图绘制,javascript

    K线图,也被称为蜡烛图或阴阳图,是金融市场上广泛使用的图表类型,尤其在股票、期货、外汇和加密货币交易中。这种图表通过四条主要数据——开盘价、收盘价、最高价和最低价,来展示资产价格在特定时间周期内的波动...

    微信小程序 使用canvas制作K线.pdf

    K线图是一种常见的金融市场图表,用于展示股票、期货等金融产品的价格走势。本文将详细讲解如何利用canvas API来绘制K线图。 首先,我们需要了解canvas的基础概念。canvas是一个HTML5元素,允许动态生成图形,通过...

    行情k线绘制工具

    行情K线绘制工具是金融数据分析领域中不可或缺的一部分,主要用于展示股票、期货、外汇等市场的价格走势。K线图,也称为蜡烛图或日本烛台图,是一种视觉化的价格图表,能够清晰地显示一段时间内证券或商品的开盘价、...

    微信小程序 使用canvas制作K线实例详解

    在微信小程序中,使用canvas制作K线图是一个常见的需求,特别是在金融数据分析或股票交易应用中。K线图,又称蜡烛图,是一种显示价格变化的图表,由开盘价、收盘价、最高价和最低价组成。本文将详细介绍如何在微信小...

    JavaScript实现K线图

    使用js编写的K线图实现方式,使用H5canvas绘图方案。支持左右滑动,手势缩放,长按显示十字光标功能。对于移动端的手势触摸事件使用了Hammer.js库,对这个库的使用集中在kline.js底部的bindListener方法内,不熟悉这...

    canvas-h5绘制

    本篇文章将详细讲解如何利用canvas进行H5绘制,包括K线图、饼状图、雷达图、面积图、漏斗图、散点图和折线图,以及柱状图的绘制方法。 首先,我们需要了解canvas的基本结构。在HTML中,我们创建一个`<canvas>`元素...

    鼠标位置的例子(防股票K线图).rar

    为了适应股票K线图的需求,可能还会涉及到SVG或canvas元素,因为这些技术常用于绘制复杂的图形,如金融图表。在这些元素中,我们可能需要转换鼠标坐标,因为它们有自己的坐标系统。例如,如果K线图是用SVG绘制的,...

    微信小程序开发-股票分时图K线图案例源码.zip

    在微信小程序开发中,制作股票分时图和K线图是常见的需求,这些图表能够直观地展示股票市场的实时数据和历史走势,帮助用户分析投资决策。本案例源码提供了实现这一功能的具体代码,适合初学者和有经验的开发者学习...

    纯js的k线图demo,可以直接运行测试

    在IT行业中,特别是数据分析和金融领域,K线图是一种非常重要的可视化工具,它用于展示股票、期货、数字货币等市场的价格走势。在这个纯JS的K线图demo中,开发者提供了一个可以直接运行并测试的实例,这对于学习和...

    html54stock 开放源碼的HTML5股票工具

    它利用HTML5的新特性,如Canvas和Web Storage,以及JavaScript库,如jQuery和Highcharts,实现了丰富的图表展示功能,包括K线图、成交量图、MACD等常用股票指标。该项目的目标是为开发者提供一个简单易用的框架,...

    html5 canvas绘制随机游动线条动画特效

    通过在HTML中添加`<canvas>`标签,并用JavaScript来控制其上下文(`context`),我们可以绘制点、线、形状以及进行颜色填充、渐变等操作。 在描述中提到的随机游动线条动画,其核心技术可能包含以下几个方面: 1. ...

    读股票k线源代码

    在IT行业中,股票K线图是一种非常重要的图表类型,它被广泛用于金融市场分析,特别是股票、期货和外汇交易。K线图(也称为蜡烛图)通过四个关键数据点——开盘价、收盘价、最高价和最低价,来展示一个时间周期内证券...

    微信小程序demo组件:canvas股票分时图.zip

    5. `fillRect(x, y, width, height)`:绘制填充的矩形,用于绘制股票的K线或者柱状图。 6. `strokeRect(x, y, width, height)`:仅绘制矩形边框,可以用来绘制坐标轴。 在绘制股票分时图的过程中,还需要处理数据。...

    微信小程序demo组件:canvas股票分时图.rar

    在股票分时图的实现中,Canvas的优势在于能够高效地绘制复杂的图形,如股票图表中的K线、分时线、成交量柱状图等。以下是一些关键的知识点: 1. **Canvas API**:首先要熟悉Canvas的绘图方法,如`beginPath()`、`...

    股票分时图K线图小程序.zip小程序精选源码

    股票分时图与K线图是股票市场分析中不可或缺的工具,它们可以帮助投资者理解股票价格的实时变动和历史走势。本资源提供的是一个基于小程序的股票分时图和K线图的源码,旨在帮助开发者快速构建自己的股票分析平台。 ...

    微信小程序精选源码亲测可用_股票分时图K线图小程序.rar

    "微信小程序精选源码亲测可用_股票分时图K线图小程序.rar" 是一个包含可用于开发微信小程序的源代码的压缩包,其核心功能是展示股票的分时图和K线图。 1. **微信小程序框架**: 微信小程序基于微信自己的框架WXML...

Global site tag (gtag.js) - Google Analytics