`

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线图的示例代码

    因为公司的项目需求,需要做一个K线图,可以让交易者清楚的看到某一交易品种在各个时间段内的报价,以及当前的实时报价。 我所考虑的有两个方向,一是类似于Highcharts等插件的实现方式 — svg,一是HTML5的canvas。...

    JavaScript实现K线图

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

    行情k线绘制工具

    行情k线绘制工具,Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。

    JavaScript画图折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图) 雷达图(填充雷达图)。。。

    商业级数据图表,它是一个纯JavaScript...折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图) 雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

    ECharts JavaScript图表库 v5.2.1.zip

    ECharts JavaScript图表库提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图...

    JavaScript图表库ECharts源码 XTJECharts.rar

    并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图, 同时支持任意维度的堆积和多图表混合展现。 3、推荐翻阅这份在线文档 《 Why ...

    HTML-Canvas:HTML5 Canvas正弦波

    波长和波数与速度和频率相关,如:k = 2Π / λ = 2Πf / v = ω / v 这里使用javascript进行数据可视化 将产品的销售数据显示为多折线图(JavaScript,canavs.js) 将数据显示为单个饼图(JavaScript,canavs.js)...

    Chart-Canvas

    图表画布Chart-Canvas 是一个可以绘制k线图的库,使用javascript和html5 canvas构建。目录|-- 图表画布 |-- .babelrc |-- .eslintignore |-- .eslintrc.js |-- .gitignore |-- LICENSE |-- package.json |-- README....

    KLineChart::chart_increasing:可高度定制的轻质k线图。零依赖性。支持移动。(可高度自定义的轻量级k线图,无第三方依赖,支持移动端)

    :chart_increasing_with_yen: :chart_increasing:使用html5画布构建的轻量级K线图。 :package:安装 使用npm npm install klinecharts --save 使用纱 yarn add klinecharts CDN :page_facing_up:文件 :hammer_...

    百度开源的JavaScript图表库 ECharts.zip

    底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图...

    利用ECharts.js画K线图的方法示例

    使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 支持饼图、环形图、折线图、面积图、柱形图、条形图等。 Chart.js 也是一款基于HTML5的图形库和ichartjs整体类似。不过Chart.js的教程文档没有ichartjs...

    ECharts JavaScript 图表库 v4.9.0

    为您提供ECharts JavaScript 图表库下载,ECharts (Enterprise Charts 商业产品图表库)提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此...

    M-Charts:基于Canvas的 Charts 实现

    K线图 热力图 日历坐标系 蜂窝矩阵 盒须图 极地图 玉珏图 基本弧线图 流动图 极地图 地图 自定义流动图 河流图 桑基图 螺旋条状图 TODO List 实现基础Chart Demo展示(Doing) 交互 完善chart 动画 变量封装 框架封装 ...

    javaScirpt图标库Echarts

    Charts,纯Javascript...图表类型支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图,同时支持任意维度的堆积和多图表混合展现

    echart-3.2.3图表的使用

    ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,...

    百度开源库表组件echarts

    基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、...K线图 柱状图、折线图等等

    ECharts图表组件使用

    支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、...

    echarts.min.js

    支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、...

    TradingViewLightweightCharts是最小和最快的金融HTML5图表

    小巧的封装中的顶级性能。免费、开源和功能丰富。仅需43kb,轻量级交互式图表的梦想现已成为现实。HTML5 Canvas技术确保(与图片不同)此图表在任何设备上始终都是完美的。

    echarts 统计图案例

    ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,...

Global site tag (gtag.js) - Google Analytics