HQChart使用教程78-分时图集合竞价

集合竞价

集合竞价是指对一段时间内接收的买卖申报一次性集中撮合的竞价方式.
2006年7月1日，深沪证券交易所实施开放式集合竞价。即：在集合竞价期间，即时行情实时揭示集合竞价参考价格。沪深开放式集合竞价时间为9点15分至9点25分，14点57分至15点00分 [2] ，即时行情显示内容包括证券代码、证券简称、前收盘价格、虚拟开盘参考价格、虚拟匹配量和虚拟未匹配量；9点15分至9点20分可以接收申报，也可以撤销申报，9点20分至9点25分可以接收申报，但不可以撤销申报。
(资料来自百度百科)

集合竞价显示样式

1. 通达信模式
   股票模式: 盘前+盘后
   对应HQChart 集合竞价3.0数据格式
   
   指数模式: 只有盘后
   对应HQChart 集合竞价2.0数据格式
   

2. 东方财富模式 (只有盘前, 没有盘后)
   对应HQChart 集合竞价1.0数据模式
   

HQChart集合竞价

目前HQChart支持以上3中模式, 通过集合竞价数据格式版本号来区分. 具体数据接口参见
HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据 中的集合竞价部分.
集合竞价样例地址：
https://opensource2.zealink.com/hqweb/demo/demo_minute_shsz_beforeopen.html

集合竞价显示控制

初始化控制

如果要在setoption里面设置 开始集合竞价

BeforeOpen

BeforeOpen:{ IsShow:true, Width:120 }
启动集合竞价 IsShow:是否显示， Width：宽度(缺省为120)

AfterClose

AfterClose:{ IsShow:true , Width:100, IsShareVol:false },
收盘集合竞价 IsShow:是否显示， Width：宽度(缺省为120), IsShareVol:盘后成交量图和主图成交量图公用Y轴

接口控制

hqchart实例化以后,可以通过接口函数来控制集合竞价显示

ShowCallAuctionData

ShowCallAuctionData(obj, option)

this.Chart.ShowCallAuctionData( { Left:true, Right:true } , { BeforeOpen:{ Left:300 }, AfterClose:{ Right:200 } });

参数说明

1. obj:控制显示/隐藏集合竞价
   Left 左边盘前集合竞价 , Right: 右边收盘集合竞价
   MultiDay: { Left:true, Right:true } 多日分时图集合竞价 Left：左边盘前集合竞价 ，Right: 右边收盘集合竞价
2. option 可选设置,用于控制集合竞价宽度
   BeforeOpen.Left 盘前集合竞价宽度
   AfterClose.Right 收盘集合竞价宽度
   { MultiDay:{Left:50，Right：20} } 多日分时图集合竞价宽度 Left：左边盘前集合竞价宽度, Right: 右边收盘集合宽度 缺省20

UI说明

１.　集合竞价主图（第１个图），　Y轴是跟主图是公用的，　Ｘ轴是独立的坐标
２.　集合竞价成交量图（第２个图），　（数据版本２.０和３.０）Y轴是独立坐标，　Ｘ轴是独立的坐标

3. 十字光标， 在集合竞价区域 或显示集合竞价对应的Y轴数据和X轴时间

收盘集合竞价也一样，这里就不截图了。

配色说明

function JSChartResource()
{
........
	this.Minute.Before=
	{
	    BGColor:'rgba(240,240,240,0.7)',    //分钟 集合竞价背景
	    LineColor:"rgb(50,171,205)",        //集合竞价线段颜色
	    VolColor:["rgb(192,192,0)"],        //成交量其他的颜色 colorID=3 开始
	    AvPriceColor:'rgb(190,190,190)',    //均线
	    Point:{ Color:"rgb(65,105,225)", Radius:2*GetDevicePixelRatio() }, //点 Color=颜色, Radius=圆半径
	    CloseIcon:
	    { 
	        Family:'iconfont', 
	        Text:"\ue60c", 
	        Color:"rgb(112,128,144)",
	        Size:12
	    }                        //关闭按钮
	};

双击放大/缩小集合竞价

双击放大/缩小集合竞价这个需要外部自己做， 可以通过监听hqchart双击事件来实现。
注册监听hqchart事件见教程 HQChart使用教程5- K线图控件操作函数说明 中的‘注册K线图事件监听事件’部分。
ClientPos=2 点击盘前集合竞价区域
ClientPos=3 点击收盘集合竞价区域

this.Chart.SetOption(this.Option);  //设置K线配置
......
this.Chart.AddEventCallback(
{
     event:JSCHART_EVENT_ID.ON_DBCLICK, 
     callback:(event, data, obj)=>{ this.OnDBClick(event, data, obj); }
 });

this.OnDBClick=function(event, data ,obj)
{
    console.log('[MinuteChart::OnDBClick]', event, data);
    if (data.ClientPos==2 || data.ClientPos==3)  //点击集合竞价区域
    {
        var width=this.Chart.JSChartContainer.ExtendWidth.Left;
        if (width<300)
        {
            this.Chart.ShowCallAuctionData( { Left:true, Right:true } , { BeforeOpen:{ Left:300 }, AfterClose:{ Right:200 } });
        }
        else 
        {
            this.Chart.ShowCallAuctionData({ Left:true, Right:true }, { BeforeOpen:{ Left:120 }, AfterClose:{ Right:100 }} );
        }
    }
}

说明

由于我这里没有采集过类似通达信这种集合竞价数据， 所以这些设计都是直接根据它的软件UI来设计的，如果有不对的， 欢迎指正。

交流QQ群: 950092318

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

HQChart代码地址

地址：github.com/jones2000/HQChart

个人爱好摄影/模型