当前位置: 首页 > 工具软件 > HQChart > 使用案例 >

HQChart实战教程6-自定义分时图

祁英哲
2023-12-01

分时图

hqchart分时图是根据不品种,内置定义不同的交易时间段。 对于hqchart不包含的品种需要自己定义它的交易时间段和X轴刻度显示

要求

假设 XXYY品种交易时间段如下
8:00 -10:00 , 13:00- 15:00, 23:00 - 2:00

具体步骤

步骤1(自定义品种后缀)

使用自定义品种后缀(.ET) 在这个例子中品种代码就是XXYY.ET

步骤2(定义交易区间段)

[
{ Start:起始时间, End:结束时间 }, //一个交易时间段对应一个这样的格式

]

//交易时间段
const TIME_SPLIT =
[
    { Start: 800, End: 1000 },
    { Start: 1300, End: 1500 },
    { Start: 2300, End: 2359 }, //跨天要分开写
    { Start:0, End:200}
];

步骤3(定义X轴分割线)

在这里我们给出3个模式的刻度, 根据页面宽度调整X轴刻度坐标
页面宽度<200 使用 Min 模式
页面宽度 [200, 450) 使用 Simple 模式
页面宽度>=450 使用 Full 模式

部分示例代码:

//X轴刻度显示配置
 const XXYY_MINUTE_X_COORDINATE=
 {
     Full:   //完整模式
     [
         [0, 1, "RGB(200,200,200)", "08:00"],    //0=数据索引 1=暂时没用到 2=线段和字颜色 3=刻度显示的文字
         [120, 1, "RGB(200,200,200)", "13:00"],
         [241, 1, "RGB(200,200,200)", "15:00"],
         [302, 1, "RGB(200,200,200)", "0:00"],
         [422, 1, "RGB(200,200,200)", "2:00"],
         
     ],
     Simple: //简洁模式
     [
         [0, 1, "RGB(200,200,200)", "08:00"],
         [120, 1, "RGB(200,200,200)", "13:00"],
         [241, 1, "RGB(200,200,200)", "15:00"],
         [302, 1, "RGB(200,200,200)", "0:00"],
         [422, 1, "RGB(200,200,200)", "2:00"],
     ],
     Min:   //最小模式     
     [
         [0, 1, "RGB(200,200,200)", "08:00"],
         [241, 1, "RGB(200,200,200)", "15:00"],
         [422, 1, "RGB(200,200,200)", "2:00"],
     ],

     Count: 423,		  //一共的分钟个数
     MiddleCount: 200,   //中心的位置 Count/2 取整

     GetData: function (width)   //根据页面的宽度 返回不同的显示刻度
     {
         if (width < 200) return this.Min;
         else if (width < 450) return this.Simple;

         return this.Full;
     }
 }

步骤4 (替换自定义品种接口函数)

替换下面的接口函数就可以

GeET(): 获取交易时间段
GetETData()获取X轴刻度设置
GetETDecimal() 设置品种小数位数
IsETShowAvPrice() 提示信息是否显示均线数值
GetETMarketStatus() 判断当前时间点是否是交易状态

部分示例代码:

JSChart.GetMinuteTimeStringData().GetET=(upperSymbol)=>{ return this.GetETTimeData(upperSymbol); }              //当天所有的交易时间点
JSChart.GetMinuteCoordinateData().GetETData=(upperSymbol)=> { return this.GetETCoordinateData(upperSymbol); }   //X轴刻度设置
MARKET_SUFFIX_NAME.GetETDecimal = (symbol)=> { return this.FloatPrecision; } // 不同品种,使用不同小数位数
MARKET_SUFFIX_NAME.IsETShowAvPrice=(symbol)=> {return true; }   //提示信息是否显示均线数值
MARKET_SUFFIX_NAME.GetETMarketStatus=(symbol)=> { return 2; }   //获取市场状态 0=闭市 1=盘前 2=盘中 3=盘后

步骤5 (接口数据)

通过NetworkFilter 对接上自己的数据就可以了。数据对接可以看以下教程
HQChart使用教程29-走势图如何对接第3方数据1

其他品种后缀对应函数列表

品种后缀GetMinuteCoordinateData对应函数名GetMinuteTimeStringData对应函数名
A股(.SZ, .SH)GetSHSZDataGetSHSZ
美股(.USA)GetUSADataGetUSA
国内期权.SHOGetSHODataGetSHO
数字货币(.BIT)GetBITDataGetBIT
外汇(.FOREX)GetForeignExchangeDataGetForeignExchange
港股(.HK)不支持GetHK
港股期货(.FHK)GetFHKDataIsFHK
富时中国(.FTSE)GetFTSEDataIsFTSE
自定义品种(.ET)GetETDataIsET

完整代码

测试页面地址
数据是假的测试数据。

<!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="divminute" 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 src='./et_testdata.js'></script>
    
    <script>
        //
        // 假设 XXYY品种交易时间段如下
        // 8:00 -10:00 , 13:00- 15:00,  23:00 - 2:00
        //
        //

        //X轴刻度显示配置
        const XXYY_MINUTE_X_COORDINATE=
        {
            Full:   //完整模式
            [
                [0, 1, "RGB(200,200,200)", "08:00"],    //0=数据索引 1=暂时为用到 2=线段和字颜色 3=刻度显示的文字
                [120, 1, "RGB(200,200,200)", "13:00"],
                [241, 1, "RGB(200,200,200)", "15:00"],
                [302, 1, "RGB(200,200,200)", "0:00"],
                [422, 1, "RGB(200,200,200)", "2:00"],
                
            ],
            Simple: //简洁模式
            [
                [0, 1, "RGB(200,200,200)", "08:00"],
                [120, 1, "RGB(200,200,200)", "13:00"],
                [241, 1, "RGB(200,200,200)", "15:00"],
                [302, 1, "RGB(200,200,200)", "0:00"],
                [422, 1, "RGB(200,200,200)", "2:00"],
            ],
            Min:   //最小模式     
            [
                [0, 1, "RGB(200,200,200)", "08:00"],
                [241, 1, "RGB(200,200,200)", "15:00"],
                [422, 1, "RGB(200,200,200)", "2:00"],
            ],

            Count: 423,
            MiddleCount: 200,   //中心的位置

            GetData: function (width)   //根据页面的宽度 返回不同的显示刻度
            {
                if (width < 200) return this.Min;
                else if (width < 450) return this.Simple;

                return this.Full;
            }
        }

        //简单的把分时控件封装下
        function MinuteChart(divMinute)
        {
            this.OriginalSymbol='XXYY'; //原始代码
            this.TradeTimeData=new Map();   //所有的交易时间
            this.FloatPrecision=5;  //小数位数

            this.DivMinute=divMinute;
            this.Chart=JSChart.Init(divMinute);   //把分时图绑定到一个Div上

            //分时图配置信息
            this.Option= {
                Type:'分钟走势图',   //创建图形类型

                Windows: //窗口指标
                [
                    //{Index:"MACD", Modify:false,Change:false},
                ], 
                
                IsAutoUpdate:false,             //是自动更新数据
                DayCount:1,                     //1 最新交易日数据 >1 多日走势图
                CorssCursorTouchEnd:true,       //手势放开以后,十字光标小时
                IsShowRightMenu:false,           //是否显示右键菜单
    
                MinuteLine:
                {
                    IsDrawAreaPrice:false,      //是否画价格面积图
                },

                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true //不显示周期/复权
                },
    
                Border: //边框
                {
                    Left:1,    //左边间距
                    Right:1,     //右边间距
                    Top:25,
                    Bottom:25
                },
                
                Frame:  //子框架设置
                [
                    {SplitCount:5,Height:30},
                    {SplitCount:3,Height:10},
                ],

                ExtendChart:
                [
                    {Name:'MinuteTooltip' } //Tooltip
                ]
            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                $(window).resize(function() { self.OnSize(); });    //绑定窗口大小变化事件

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

                this.OnSize();  //让分时图全屏

                JSChart.GetMinuteTimeStringData().GetET=(upperSymbol)=>{ return this.GetETTimeData(upperSymbol); }              //当天所有的交易时间点
                JSChart.GetMinuteCoordinateData().GetETData=(upperSymbol)=> { return this.GetETCoordinateData(upperSymbol); }   //X轴刻度设置
                MARKET_SUFFIX_NAME.GetETDecimal = (symbol)=> { return this.FloatPrecision; } // 不同品种,使用不同小数位数

                this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback) } ;   //绑定网络协议回调
                this.Option.Symbol=this.OriginalSymbol+'.ET';           //扩展品种代码后缀
                this.Chart.SetOption(this.Option);  //设置K线配置
            }

            this.CreateTradeTimeData=function(symbol)
            {
                //交易时间段
                const TIME_SPLIT =
                [
                    { Start: 800, End: 1000 },
                    { Start: 1300, End: 1500 },
                    { Start: 2300, End: 2359 }, //跨天要分开写
                    { Start:0, End:200}
                ];

                return JSChart.GetMinuteTimeStringData().CreateTimeData(TIME_SPLIT);
            }

            this.GetETTimeData=function(upperSymbol)    //获取X轴所有的时间
            {
                //根据不同的品种 返回不同的交易时间段分钟
                if (this.TradeTimeData.has(upperSymbol)) return this.TradeTimeData.get(upperSymbol);

                var data=this.CreateTradeTimeData(upperSymbol);
                this.TradeTimeData.set(upperSymbol,data);   //缓存下
                return data;
            }

            this.GetETCoordinateData=function(upperSymbol)  //获取X轴分割信息
            {
                //根据不同的品种 返回不同的X轴刻度
                return XXYY_MINUTE_X_COORDINATE;
            }

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

            this.NetworkFilter=function(data, callback)
            {
                console.log('[MinuteChart::NetworkFilter] data', data);
                switch(data.Name)
                {
                    case 'MinuteChartContainer::RequestMinuteData':     //当天数据下载
                        this.RequestMinuteData(data, callback);
                        break;
                }
            }

            this.RequestMinuteData=function(data, callback)   //请求分钟数据
            {
                data.PreventDefault=true;   //禁止使用HQChart内部请求
                var stock={OriginalSymbol:this.OriginalSymbol, Symbol:data.Request.Data.symbol[0]};    //原始代码, 内部代码
                data.Self.ChartPaint[1].IsShow=false;   //是否显示均线
                if (data.Self.ChartSplashPaint.IsEnableSplash)
                {
                    console.log('[MinuteChart::RequestMinuteData] first reqeust');
                    this.RequestDayMinuteData(data, callback,stock);    //全量数据
                }
                else 
                {
                    console.log('[MinuteChart::RequestMinuteData] update reqeust');
                    this.RequestUpdateMinuteData(data, callback,stock); //增量数据
                }
            }

            this.RequestDayMinuteData=function(data,callback, stock) //请求当天的所有分钟数据
            {
                console.log(`[MinuteChart::RequestDayMinuteData] request all minute data . OriginalSymbol=${stock.OriginalSymbol}, Symbol=${stock.Symbol}`);

                //模拟异步请求数据
                setTimeout(() => {
                    this.RecvMinuteData(TEST_DATA, callback,stock);
                }, 200);
            }

            this.RecvMinuteData=function(recvData,callback,stock)
            {
                var yClose=parseFloat(recvData.yclose);    //昨收盘 
                var minuteData=[];   //HQChart 分时数据格式

                //symbol:填hqchart统一的内部代码, name:名称,这个使用原始代码 你也可以用中文名字
                var stockData={name:stock.OriginalSymbol, symbol:stock.Symbol, yclose:yClose, minute:minuteData };

                for(var i= recvData.obj.length-1; i>=0; --i)
                {
                    var item=recvData.obj[i];
                    var dateTime=new Date(item.D);
                    //数据都是数值类型!!!
                    var date=dateTime.getFullYear()*10000+(dateTime.getMonth()+1)*100+dateTime.getDate();
                    var time=dateTime.getHours()*100+dateTime.getMinutes();
                    var stockItem=
                    { 
                        date:date,
                        time:time,
                        price:parseFloat(item.C), 
                        open:parseFloat(item.O),
                        high:parseFloat(item.H),
                        low:parseFloat(item.L),
                        amount:parseFloat(item.A),
                        vol:parseFloat(item.V),
                        avprice:null,
                    }

                    minuteData.push(stockItem);
                }

                this.Cache=stockData;   //把当天全量数据保存起来

                var hqchartData={stock:[stockData]};
                callback(hqchartData);
            }
        }

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

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

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

HQChart代码地址
地址:https://github.com/jones2000/HQChart

 类似资料: