HQChart使用教程9- 如何快速创建K线训练页面

最新推荐文章于 2024-06-06 14:18:43 发布

HQChart

最新推荐文章于 2024-06-06 14:18:43 发布

阅读量3k

点赞数 1

分类专栏： JavaScript HQChart 文章标签： K线 K线训练指标 H5

本文链接：https://blog.csdn.net/jones2000/article/details/90478687

版权

HQChart 同时被 2 个专栏收录

164 篇文章 98 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

HQChart使用教程9- 如何快速创建K线训练页面

K线训练已重构新版本使用详见
demo页面部分代码
Option的配置项说明
注册K线训练K线移动的监听
K线训练操作接口
HQChart代码地址

K线训练已重构新版本使用详见

HQChart使用教程60-新版k线训练使用教程

效果图
https://opensource.zealink.com/hqweb/demo/phone13.html
在这里插入图片描述

demo页面部分代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>页面行情(K线图)</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="content/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body>
    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>

    <script src="content/js/jquery.min.js"></script>
    <script src="content/js/webfont.js"></script>
    <script src="../jscommon/umychart.network.js"></script>     <!-- 网络接口 -->
    <script src="../jscommon/umychart.js"></script>             <!-- K线图形 -->
    <script src="../jscommon/umychart.complier.js"></script>    <!-- 麦语言解析执行器 -->
    <script src="../jscommon/umychart.index.data.js"></script>  <!-- 基础指标库 -->
    <script src="../jscommon/umychart.style.js"></script>       <!-- 白色风格和黑色风格配置信息 -->
    
    <script>

        //简单的把K线控件封装下
        function KLineTrainChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上

            //K线配置信息
            this.Option= {
                Type:'K线训练',   //创建图形类型
                
                Windows: //窗口指标
                [
                    {Index:"MA", Modify:false,Change:false},
                    {Index:"VOL", Modify:false,Change:false},
                ], 
                
                Symbol:'000001.sz',
                //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统
    
                IsShowCorssCursorInfo:false,    //是否显示十字光标的刻度信息
    
                KLine:  //K线设置
                {
                    Right:1,                    //复权 0 不复权 1 前复权 2 后复权
                    Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                    MaxReqeustDataCount:1000,   //数据个数
                    MaxRequestMinuteDayCount:10, //分钟数据取5天
                    PageSize:50,               //一屏显示多少数据
                    //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷
                    IsShowTooltip:false,                 //是否显示K线提示信息
                },
    
                Border: //边框
                {
                    Left:1,         //左边间距
                    Right:50,       //右边间距
                    Bottom:25,      //底部间距
                    Top:25          //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:3,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false},
                    {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                ],

                Train:
                {
                    DataCount:20,                   //训练数据
                }
            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                $(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件

                //var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
                //JSChart.SetStyle(blackStyle);
                //this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景

                this.OnSize();  //让K线全屏
                this.Chart.SetOption(this.Option);  //设置K线配置

                //注册指标计算完成监听
                this.Chart.AddEventCallback({
                    event:JSCHART_EVENT_ID.RECV_TRAIN_MOVE_STEP, 
                    callback:function(event,data,obj) { self.OnTrainMoveStep(event,data,obj); }
                });
            }

            this.OnTrainMoveStep=function(e, data, obj)    //e=注册事件的信息, data=K线训练数据 obj=K线组件
            {
                console.log('[KLineChart::OnTrainMoveStep] e, data, obj', e, data, obj);
            }

            this.OnSize=function()  //自适应大小调整
            {
                var height= $(window).height();
                var width = $(window).width();
                this.DivKLine.style.top='px';
                this.DivKLine.style.left='px';
                this.DivKLine.style.width=width+'px';
                this.DivKLine.style.height=height+'px';
                this.Chart.OnSize();
            }

            this.MoveNextLine=function()    //移动到下一个K线上
            {
                this.Chart.JSChartContainer.MoveNextKLineData();
            }

            this.buyOrSell=function()       //买/卖股票
            {
                this.Chart.JSChartContainer.BuyOrSell();
            } 

            this.EnableAutoRun=function(bEnable)    //开始/停止 自动移动K线
            {
                if (bEnable) this.Chart.JSChartContainer.Run();
                else this.Chart.JSChartContainer.Stop();
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源
            var klineControl=new KLineTrainChart(document.getElementById('kline'));
            klineControl.Create();

            //setTimeout(function(){ klineControl.EnableAutoRun(true) },5000);    //启动自动前进
        })

    </script>  
</body>  
</html>

Option的配置项说明

Type： 图形类型，这里填K线训练或K线训练横屏代表创建一个K线训练图
Train.DataCount 训练几条K数据
在这里插入图片描述
其他设置和K线图设置一样

注册K线训练K线移动的监听

Chart.AddEventCallback(obj)

var JSCHART_EVENT_ID=
{
   RECV_KLINE_MATCH:1, //接收到形态匹配
   RECV_INDEX_DATA:2,  //接收指标数据
   RECV_HISTROY_DATA:3,//接收到历史数据
   RECV_TRAIN_MOVE_STEP:4, //接收K线训练,移动一次K线
}

这里监听事件ID我们使用RECV_TRAIN_MOVE_STEP
监听事件回调 function(event,data,obj)
event 注册的监听事件信息
data K线训练数据 {
TrainDataCount：剩余的训练K线个数(当==0时训练结束),
BuySellData：买卖数据 ,
Operator:当前可以卖还是买(0=买 1卖),
KLine:K线训练的起始数据和结束数据 }
obj K线控件
通过监听事件的回到你可以更新买／卖按钮，　买卖交易的情况。

K线训练操作接口

手动移动到下一个K线 chart.JSChartContainer.MoveNextKLineData();
买卖操作 Chart.JSChartContainer.BuyOrSell() K线训练买卖必须是成对的，也就是说买了以后必须卖，然后才能再买。
自动移动K线 Chart.JSChartContainer.Run()
停止自动移动K线 Chart.JSChartContainer.Stop()

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址

地址：https://github.com/jones2000/HQChart

HQChart

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
HQChart使用教程9- 如何快速创建K线训练页面

如何快速创建一个横屏分时图页面demo页面部分代码Option的配置项说明注册K线训练K线移动的监听K线训练操作接口HQChart代码地址效果图https://opensource.zealink.com/hqweb/demo/phone13.htmldemo页面部分代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...
复制链接

扫一扫