HQChart使用教程64-前端自定义周期算法接口

最新推荐文章于 2024-05-30 01:52:00 发布

HQChart

最新推荐文章于 2024-05-30 01:52:00 发布

阅读量1.1k

点赞数

分类专栏： HQChart JavaScript 文章标签： hqchart kline 股票 K线图量化

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

版权

HQChart 同时被 2 个专栏收录

165 篇文章 100 订阅

订阅专栏

JavaScript

151 篇文章 33 订阅

订阅专栏

HQChart使用教程64-前端自定义周期算法接口

前端计算周期
外部注册周期方法接口
VUE调用
完成例子代码

前端计算周期

前端可以通过1分钟或日线数据来合并其他周期的数据，如周线，5分钟线等等。这样的好处就是后台只需要提供基础周期的，其他周期都全部由前端完成。周期计算的方法个不相同，hqchart提供外部注册周期计算函数来替换内部提供的周期计算函数

外部注册周期方法接口

注册周期计算回调

JSChart.AddPeriodCallback(obj)

obj={ Period:周期ID, Callback:回调 }

删除已注册的周期计算回调

JSChart.RemovePeriodCallback(obj)

obj={ Period:周期ID, }

周期计算回调函数格式

this.PeriodCalculate=function(period, data, dataObj)   //自定义计算周期 period周期ID, data 1分钟数据/日线数据
{
.........
}

JSChart.AddPeriodCallback({Period:2, Callback:klineControl.PeriodCalculate} );  //2=月线 注册自定义月线周期计算函数

VUE调用

增加命名空间就可以

import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'

......
mounted:function()
{
  HQChart.Chart.JSChart.AddPeriodCallback(.....)
}

完成例子代码

<!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 name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>自定义周期计算</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="../jscommon/umychart.resource/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>

    <div>
        <span id='button_5'>10分钟</span>
        <span id='button_4'>5分钟</span>
        <span id='button_3'>周线</span>
        <span id='button_1'>月线</span>
        <span id='button_2'>切换股票</span>
    </div>

    <script src="content/js/jquery.min.js"></script>
    <script src="content/js/webfont.js"></script>
    <script src='../jscommon/umychart.console.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>

        //JSConsole.Chart.Log=() =>{}
        //JSConsole.Complier.Log=()=>{}
        //MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol)  { return 2; }
        
        
        //简单的把K线控件封装下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上

            //K线配置信息
            this.Option= {
                Type:'历史K线图',   //创建图形类型
                //Type:'历史K线图横屏',
                
                Windows: //窗口指标
                [
                    //{Index:"EMPTY"},
                    {Index:"MA", Modify:true,Change:false},
                    //{Index:"两融余额2", Args:[ { Name:'N', Value:5} ], IsShowIndexName:false, Modify:true,Change:true},
                    //{Index:"JCL", Modify:false,Change:true},
                    {Index:"MACD2", Modify:true,Change:false},
                    {Index:"MACD", Modify:true,Change:false},
                    //{Index:"RSI", Modify:false,Change:false}, 
                ], 
                
                
                Symbol:'000001.sz',
                IsAutoUpdate:true,       //是自动更新数据
                AutoUpdateFrequency:10000,   //数据更新频率
                //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统
    
                IsShowRightMenu:true,          //右键菜单
                //CorssCursorTouchEnd:true,
                //IsCorssOnlyDrawKLine:true,
    
                KLine:  //K线设置
                {
                    DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                    Right:1,                    //复权 0 不复权 1 前复权 2 后复权
                    Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                    MaxReqeustDataCount:1000,   //数据个数
                    MaxRequestMinuteDayCount:10, //分钟数据取5天
                    PageSize:50,               //一屏显示多少数据
                    //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷
                    IsShowTooltip:false,                 //是否显示K线提示信息
                    DrawType:0,      //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
                    //FirstShowDate:20161201,
                    KLineDoubleClick:false, //禁止双击弹框
                    RightSpaceCount:5,
                    ZoomType:1,
                    StepPixel:10,
                    DataWidth:5
                },

                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:1,         //左边间距
                    Right:60,       //右边间距
                    Bottom:50,      //底部间距
                    Top:25          //顶部间距
                },
                
                Frame:  //子框架设置
                [
                    {
                        SplitCount:6,StringFormat:0, IsShowLeftText:false,YCoordinateType:0,IsYReverse:true
                    },

                    { 
                        SplitCount:3,StringFormat:0, IsShowLeftText:false
                    },

                    {SplitCount:2,StringFormat:0, IsShowLeftText:false}
                ],

                ExtendChart:    //扩展图形
                [
                    //{Name:'KLineTooltip' }  //手机端tooltip
                ]
            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                $(window).resize(function() { self.OnSize( {Type:1} ); });    //绑定窗口大小变化事件

                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.OnSize=function(option)  //自适应大小调整
            {
                var height= $(window).height()-50;
                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(option);
            }

            this.ChangeSymbol=function(symbol)
            {
                this.Chart.ChangeSymbol(symbol);
            }

            this.ChangePeriod=function(period)
            {
                this.Chart.ChangePeriod(period);
            }

            this.PeriodCalculate=function(period, data, dataObj)   //自定义计算周期 period周期ID, data 1分钟数据/日线数据
            {
                console.log("[KLineChart::PeriodCalculate] period, data", period, data);

                var result = [];
                var periodDataCount=5;
                if (period==2)  //月线
                {
                    periodDataCount=20;
                }
                else if (period==5) //5分钟
                {
                    periodDataCount=5;
                }

                var bFirstPeriodData = false;
                var newData = null;
                var preTime=null;   //上一次的计算时间
                for (var i = 0; i < data.length; )
                {
                    bFirstPeriodData = true;
                    for (var j = 0; j < periodDataCount && i < data.length; ++i)
                    {
                        if (bFirstPeriodData)
                        {
                            newData = new HistoryData();
                            result.push(newData);
                            bFirstPeriodData = false;
                        }
                        var minData = data[i];
                        if (minData == null)
                        {
                            ++j;
                            continue;    
                        } 
                        
                        ++j;
                        newData.Date = minData.Date;
                        newData.Time = minData.Time;
                        preTime=newData.Time;
                        if (minData.Open==null || minData.Close==null)
                            continue;
                        if (newData.Open==null || newData.Close==null)
                        {
                            newData.Open=minData.Open;
                            newData.High=minData.High;
                            newData.Low=minData.Low;
                            newData.YClose=minData.YClose;
                            newData.Close=minData.Close;
                            newData.Vol=minData.Vol;
                            newData.Amount=minData.Amount;    
                            newData.FlowCapital=minData.FlowCapital;  
                            newData.Position=minData.Position;
                        }
                        else
                        {
                            if (newData.High<minData.High) 
                                newData.High=minData.High;
                            if (newData.Low>minData.Low) 
                                newData.Low=minData.Low;
                            newData.Close=minData.Close;
                            newData.Vol+=minData.Vol;
                            if (minData.Amount!=null) newData.Amount+=minData.Amount;
                            newData.Position=minData.Position;
                            newData.FlowCapital=minData.FlowCapital;  
                        }
                    }
                }

                return result;
            }
        }

        $(function () 
        {
            WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源

            var klineControl=new KLineChart(document.getElementById('kline'));
            JSChart.AddPeriodCallback({Period:2, Callback:klineControl.PeriodCalculate} );  //2=月线
            JSChart.AddPeriodCallback({Period:5, Callback:klineControl.PeriodCalculate} );  //5=5分钟
            klineControl.Create();

            $("#button_1").click(function() { klineControl.ChangePeriod(2); } );
            $("#button_3").click(function() { klineControl.ChangePeriod(1); } );
            $("#button_4").click(function() { klineControl.ChangePeriod(5); } );
            $("#button_5").click(function() { klineControl.ChangePeriod(6); } );
            $("#button_2").click(function() { klineControl.ChangeSymbol("600000.sh"); } );
        })

        

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



<style>

/*
.klineframe-toolbar
{
    color:rgb(238,233,233);
}

.klineframe-toolbar span:hover
{
    color: #0182d4;
}
*/
    
</style>

HQChart

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HQChart使用教程64-前端自定义周期算法接口

HQChart使用教程63-前端自定义周期算法接口前端计算周期外部注册周期方法接口注册周期计算回调删除已注册的周期计算回调周期计算回调函数格式VUE调用完成例子代码前端计算周期前端可以通过1分钟或日线数据来合并其他周期的数据，如周线，5分钟线等等。这样的好处就是后台只需要提供基础周期的，其他周期都全部由前端完成。周期计算的方法个不相同，hqchart提供外部注册周期计算函数来替换内部提供的周期计算函数外部注册周期方法接口注册周期计算回调JSChart.AddPeriodCallback(obj)
复制链接

扫一扫