网站导航
> 文档中心 > HQChart使用教程30-K线图如何对接第3方数据32-订单流

HQChart使用教程30-K线图如何对接第3方数据32-订单流

网友: 文档中心 2022-03-16 13:55:54

HQChart使用教程30-K线图如何对接第3方数据32-订单流

  • 样例
  • HQChart订单流数据结构
    • Order
      • Price
      • Ask
      • Bid
      • HBar
    • PriceOffset
    • High
    • Low
  • 数据对接
    • 全量分钟K线数据
    • 全量日K数据
    • 更新分钟K线数据
    • 更新日K数据
  • 订单流切换
  • 配色
  • 交流QQ群: 950092318
  • HQChart代码地址
  • 完整例子

样例

在这里插入图片描述

https://opensource2.zealink.com/hqweb/demo/demo_orderflow.html

HQChart订单流数据结构

订单流是单独一个结构体， 1跟K线一个这样的结构体

{  PriceOffset: 每个单元的价格间距,   High: [ { Price:, Value:, Text: Color ,Font:{ Weight:}}, ..... ],  Low:[ { Price:, Value:, Text: Color , Font:{ Weight:}}, ..... ] ,  Order:  //订单信息 [      {   Price:,    Ask:{ Color:, Value: , Text:, BG:, Font:{ Weight:} }   Bid:{ Color:, Value:,  Text:, BG:, Font:{ Weight:} },   HBar:{ Color:, Width, }},      ........ ]     }

字段对应K线的位置如下
在这里插入图片描述

Order

订单信息， 数组， 里面存放每一个价位的买，卖的量

Price

价位

Ask

买量信息 左边
Color：文字颜色
Text： 显示的文字
Value： 买量
BG： 背景色 ， 如果为空就不使用背景色
Font: 字体设置， 目前只支持设置 Weight 字体粗细

Bid

卖量的信息 右边
Color：文字颜色
Text： 显示的文字
Value： 卖量
BG： 背景色 ， 如果为空就不使用背景色
Font: 字体设置， 目前只支持设置 Weight 字体粗细

HBar

横线往右画的线段
Color 线段颜色
Width 线段长度， 使用K线个数表示长度， 如果5=5个K线的长度

PriceOffset

每个订单价位的间隔

High

K线顶部位置输出信息，可以输出多组文字
Price： 输出的价位
Value 数值
Text： 显示的文字
Color：字体颜色
Font: 字体设置， 目前只支持设置 Weight 字体粗细

Low

K线底部位置输出信息，可以输出多组文字
Price： 输出的价位
Value 数值
Text： 显示的文字
Color：字体颜色
Font: 字体设置， 目前只支持设置 Weight 字体粗细

数据对接

订单流是通过K线数据协议过来的。 即下面4个协议
HQChart使用教程30-K线图如何对接第3方数据2-日K数据
HQChart使用教程30-K线图如何对接第3方数据3-1分钟K数据
HQChart使用教程30-K线图如何对接第3方数据14-轮询增量更新日K数据
HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据

全量分钟K线数据

回调的 data.Request.Data.klineDrawType 当前k线类型， （5=订单流 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子）

每个K线项第20的索引位置是保存订单流的
data:[ [… 20=订单流数据 ], …]
在这里插入图片描述

全量日K数据

回调的 data.Request.Data.klineDrawType 当前k线类型， （5=订单流 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子）

每个K线项第20的索引位置是保存订单流的
data:[ [… 20=订单流数据 ], …]
在这里插入图片描述

更新分钟K线数据

回调的 data.Request.Data.klineDrawType 当前k线类型， （5=订单流 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子）

ver:2 数据版本为2.0的才支持
每个K线项第20的索引位置是保存订单流的
data:[ [… 20=订单流数据 ], …]
在这里插入图片描述

更新日K数据

回调的 data.Request.Data.klineDrawType 当前k线类型， （5=订单流 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子）

stock [ { … OrderFlow:{} } ]
在这里插入图片描述

订单流切换

ChangeKLineDrawType(type)

切换K线类型 5=订单流 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子

从其他K线类型切换到订单流， 或订单流切换到其他K线类型，都会触发数据的重新请求。

配色

如何修改配色详见教程 HQChart使用教程4- 如何自定义K线图颜色风格
一下是订单流K线配色

///   全局配置颜色////function JSChartResource(){    ............//订单流配置    this.OrderFlow=    {  UpColor:{BG:'rgb(223,191,180)', Border:"rgb(196,84,86)" },   //阳线 DownColor:{ BG:"rgb(176,212,184)", Border:'rgb(66,94,74)' }, //阴线 UnchagneColor: {BG:"rgb(216,221,177)", Border:"rgb(209,172,129)"},  //平盘 Text:{ Color: "rgb(92,96,89)" , Family:'Arial', FontMaxSize:16, MaxValue:"8888" },  //文字 Line:{ UpDownColor: "rgb(0,0,0)", MiddleColor:"rgb(211,211,211)" },  //最大, 最低,中间 竖线 AlwaysShowOrderText:true,   //总是显示订单流文字    };    ..........

交流QQ群: 950092318

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

HQChart代码地址

地址：github.com/jones2000/HQChart

完整例子

<!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>K线图订单流</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" ></div>    <div> <span id='button_1' class="btn-style">K线图</span> <span id='button_2' class="btn-style">订单流</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 src="./localdata/orderflow_testdata.js"></script>  <script> MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { return 2; } //简单的把K线控件封装下 function KLineChart(divKLine) {     this.DivKLine=divKLine;     this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上     this.Barrage;  //弹幕输出控制器     //K线配置信息     this.Option= {  Type:'历史K线图',   //创建图形类型  //Type:'历史K线图横屏',  //EnableBorderDrag:false,    Windows: //窗口指标  [      {Index:"EMPTY"},      {Index:"MACD"}  ],   DragDownload: { Day:{ Enable:true } , Minute:{ Enable:true }},   EnableZoomUpDown:  {      //Wheel:false,      //Keyboard:false,      //Touch:false,  },  OverlayIndex:  [    {Index:'BOLL', Windows:0 , IsShareY:true,ShowRightText:true }, ],  //叠加指标    EnableYDrag:  {      Right:true,      Left:true,  },  Symbol:'CM_114.DCE',  IsAutoUpdate:true,//是自动更新数据  AutoUpdateFrequency:5000,   //数据更新频率  IsApiPeriod:true,  SplashTitle:'加载数据中......',      IsShowRightMenu:false,   //右键菜单  //CorssCursorTouchEnd:true,  //IsClickShowCorssCursor:true,  //IsCorssOnlyDrawKLine:true,  CorssCursorInfo: { DateFormatType:3, HPenType:1, VPenType:1 ,VLineType:0,RightButton:{ Enable:true } },  EnableZoomIndexWindow:true,      KLine:  //K线设置  {      DragMode:1,   //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择      Right:1,      //复权 0 不复权 1 前复权 2 后复权      Period:4,     //周期 0 日线 1 周线 2 月线 3 年线       MaxReqeustDataCount:3000,   //数据个数      MaxRequestMinuteDayCount:5, //分钟数据获取几天数据  默认取5天数据      PageSize:25, //一屏显示多少数据      //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],//信息地雷      //Info:["公告"],       IsShowTooltip:true,   //是否显示K线提示信息      DrawType:5,      //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图      //FirstShowDate:20161201,      KLineDoubleClick:false, //禁止双击弹框      RightSpaceCount:1,      ZoomType:1,      //DataWidth:5      ShowKLine:false,      IsShowTooltip:true,  },  StepPixel:10,  Listener:  {      //KeyDown:false,      //Wheel:false  },  EnableFlowCapital:  {      BIT:true  },      KLineTitle: //标题设置  {      IsShowName:true,//不显示股票名称      IsShowSettingInfo:true //不显示周期/复权  },      Border: //边框  {      Left:1,  //左边间距      Right:20,//右边间距      Bottom:20,      //底部间距      Top:25,  //顶部间距      AutoLeft:{ Blank:10, MinWidth:30 },      AutoRight:{ Blank:10, MinWidth:30 },  },    Frame:  //子框架设置  [      {   SplitCount:6,StringFormat:0, IsShowLeftText:false,   PercentageTextFormat:0,   //IsShowIndexTitle:false,   YCoordinateType:0,   //TopSpace:0,BottomSpace:0,   //IsYReverse:true,   IsShowYLine:true,YTextBaseline:1,   IsShowXLine:true,   //SplitType:1,   DefaultYMaxMin:   { //Min:2, //Max:50   },   //BorderLine:8|2,     },      { SplitCount:5 },      { SplitCount:4,StringFormat:0, IsShowLeftText:false, IsShowYLine:true}  ],  ExtendChart:    //扩展图形  [      //{Name:'KLineTooltip' },  //手机端tooltip      //{Name:"FrameSplitPaint", LineColor:"rgb(200,0,0)" }  ],  Overlay:  [      //{Symbol:'399300.sz', DrawType:0, Color:'rgb(0,0,255)'}  ],     }; this.Create=function()  //创建图形     {  var self=this;  //$(window).resize(function() { self.OnSize( {Type:1} ); });    //绑定窗口大小变化事件  $(window).resize(function() { self.OnSize( ); });    //绑定窗口大小变化事件  var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置  //blackStyle.DRAWICON={ MinSize:20 , MaxSize:60};  //JSChart.SetStyle(blackStyle);  //this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景    var zoom=JSChart.GetKLineZoom();  //zoom.length=0;  for(var i=58;i<=160;i+=10)  {      zoom.splice(0,0,[i,4]);  }    this.OnSize();  //让K线全屏  this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }  this.Chart.SetOption(this.Option);  //设置K线配置     }   this.NetworkFilter=function(data, callback)     {  console.log('[NetworkFilter] data', data);  switch(data.Name)   {      case 'KLineChartContainer::RequestHistoryData':   //日线全量数据下载   this.RequestHistoryData(data, callback);   break;      case 'KLineChartContainer::RequestRealtimeData':  //日线实时数据更新   this.RequestRealtimeData(data, callback);   break;      case 'KLineChartContainer::RequestFlowCapitalData':      //流通股本   EastMoney.HQData.NetworkFilter(data, callback);   break;      case 'KLineChartContainer::ReqeustHistoryMinuteData':    //分钟全量数据下载   this.ReqeustHistoryMinuteData(data, callback);   break;      case 'KLineChartContainer::RequestMinuteRealtimeData':   //分钟增量数据更新   this.RequestMinuteRealtimeData(data, callback);   break;  } }     this.CreateTestOrderFlowData=function(hqchartData)  //生成订单流测试数据     {  var itemAskBG=['rgb(0,255,255)', 'rgb(255,0,255)', "rgb(255,182,193)"];  var itemBidBG=['rgb(173,255,47)', 'rgb(255,127,80)', "rgb(32,178,170)"];  for(var i=0;i<hqchartData.data.length;++i)  {      var kItem=hqchartData.data[i];      var high=kItem[3];      var low=kItem[4];      if (high==low) continue;      var aryOrder=[];      var testBarWidth=this.GetRandomTestData(0,40) +this.GetRandomTestData(0,10)/10.0;      var testBar2Width=this.GetRandomTestData(0,30) +this.GetRandomTestData(0,10)/10.0;      for(var price=low, j=0; price<=high; ++price, ++j)      {   var order=   {Price:price, Ask:{ Value:this.GetRandomTestData(0,500) },Bid: { Value:this.GetRandomTestData(0,500) }   }   if (order.Ask.Value>450) order.Ask.Color='rgb(108,97,131)';   if (order.Bid.Value>400) order.Bid.Color="rgb(102,135,156)";   if (order.Ask.Value>460 && order.Bid.Value>460)    {order.Ask.BG=itemAskBG[price%itemAskBG.length];order.Ask.Text="1,112";order.Ask.Font={ Weight:"bold" };order.Bid.BG=itemAskBG[price%itemAskBG.length];   }   if (i>0 && i%33==0 && j==0)   {order.Ask.BG=order.Bid.BG=itemAskBG[price%itemAskBG.length];order.HBar={ Color:"rgb(240,128,128)", Width:testBarWidth, Height:-3, Type:1 };   }   else if (i>0 && i%44==0 && j==4)   {order.Ask.BG=order.Bid.BG=itemBidBG[price%itemAskBG.length];order.HBar={ Color:"rgb(127,255,170)", Width:testBar2Width, Type:2 };   }   if (i%10 && j==5) order.Ask.Font={ Weight:"bold" };   if (i%10 && j==4) order.Bid.Font={ Weight:"bold" };   aryOrder.push(order);      }      kItem[20]= {    Order:aryOrder, PriceOffset:1 , //PriceOffset 每个订单价格差   High:   [ { Price: high+1 , Text:this.GetRandomTestData(600,5000).toString() },{ Price: high+4, Text:this.GetRandomTestData(600,5000).toString(), Color:itemAskBG[price%itemAskBG.length] }   ],   Low:   [{ Price: low-1, Text:this.GetRandomTestData(600,5000).toString() },{ Price: low-2, Text:this.GetRandomTestData(600,5000).toString(), Color:itemBidBG[price%itemAskBG.length] }   ]      };      if (i%10==0) kItem[20].High[1].Font={ Weight:"bold" };      if (i%10==0) kItem[20].Low[0].Font={ Weight:"bold" };  }     }     this.RequestHistoryData=function(data, callback)    //全量日K线     {  data.PreventDefault=true;  var requestData=data.Request.Data;  var symbol=requestData.symbol; //请求的股票代码  var period=requestData.period;    //周期  var right=requestData.right;      //复权  var kLinedrawType=requestData.klineDrawType;    //K线类型    console.log(`[KLineChart::RequestHistoryData] 代码:${symbol}, 周期:${period}, K线类型:${kLinedrawType}`);  setTimeout(()=>  {      var hqchartData=CM_114_K_Day_Data;      if (kLinedrawType==5) this.CreateTestOrderFlowData(hqchartData);      console.log('[KLineChart::RequestHistoryData] hqchartData=', hqchartData);      callback(hqchartData);  }, 600);      }     this.ReqeustHistoryMinuteData=function(data, callback)  //全量分钟K线     {  data.PreventDefault=true;  var requestData=data.Request.Data;  var symbol=requestData.symbol; //请求的股票代码  var period=requestData.period;    //周期  var right=requestData.right;      //复权  var kLinedrawType=requestData.klineDrawType;    //K线类型  console.log(`[KLineChart::ReqeustHistoryMinuteData] 代码:${symbol}, 周期:${period}, K线类型:${kLinedrawType}`);  setTimeout(()=>  {      var hqchartData=CM_114_K_15Minute_Data;      if (kLinedrawType==5) this.CreateTestOrderFlowData(hqchartData);      console.log('[KLineChart::ReqeustHistoryMinuteData] hqchartData=', hqchartData);      callback(hqchartData);  },600);}     this.RequestMinuteRealtimeData=function(data, callback) //增量分钟K     {  data.PreventDefault=true;  var requestData=data.Request.Data;  var symbol=requestData.symbol[0];     //请求的股票代码  var period=requestData.period;      //周期  var right=requestData.right; //复权  var kLinedrawType=requestData.klineDrawType;    //K线类型  console.log(`[KLineChart::RequestMinuteRealtimeData] 代码:${symbol}, 周期:${period}, K线类型:${kLinedrawType}`);  var hqchartData=CM_114_K_15Minute_Update_Data;  if (kLinedrawType==5) this.CreateTestOrderFlowData(hqchartData);  console.log('[KLineChart::RequestMinuteRealtimeData] hqchartData=', hqchartData);  callback(hqchartData);     }     this.RequestRealtimeData=function(data, callback)     {  data.PreventDefault=true;  var requestData=data.Request.Data;  var symbol=requestData.symbol[0];   //请求的股票代码  var period=requestData.period;      //周期  var right=requestData.right; //复权  var kLinedrawType=requestData.klineDrawType;    //K线类型    console.log(`[KLineChart::RequestRealtimeData] 代码:${symbol}, 周期:${period}, K线类型:${kLinedrawType}`);  var hqchartData=CM_114_K_Day_Update_Data;  if (kLinedrawType==5)  {      var stock=hqchartData.stock[0];      var low=stock.low, high=stock.high;      var itemAskBG=['rgb(0,255,255)', 'rgb(255,0,255)', "rgb(255,182,193)"];      var itemBidBG=['rgb(173,255,47)', 'rgb(255,127,80)', "rgb(32,178,170)"];      var aryOrder=[];      for(var price=low, i=0 ; price<=high; ++price, ++i)      {   var order=   {Price:price, Ask:{ Value:this.GetRandomTestData(0,500) },Bid: { Value:this.GetRandomTestData(0,500) }   }   if (order.Ask.Value>450) order.Ask.Color='rgb(108,97,131)';   if (order.Bid.Value>400) order.Bid.Color="rgb(102,135,156)";   if (order.Ask.Value>460 && order.Bid.Value>460)    {order.Ask.BG=itemAskBG[price%itemAskBG.length];order.Ask.Text="4,112";order.Bid.BG=itemAskBG[price%itemAskBG.length];   }   aryOrder.push(order);      }      stock.OrderFlow= {    Order:aryOrder, PriceOffset:1 , //PriceOffset 每个订单价格差   High:   [ { Price: high+1 , Text:this.GetRandomTestData(600,5000).toString() },{ Price: high+4, Text:this.GetRandomTestData(600,5000).toString(), Color:itemAskBG[price%itemAskBG.length] }   ],   Low:   [{ Price: low-1, Text:this.GetRandomTestData(600,5000).toString() },{ Price: low-2, Text:this.GetRandomTestData(600,5000).toString(), Color:itemBidBG[price%itemAskBG.length] }   ]      };   };     console.log('[KLineChart::RequestRealtimeData] hqchartData=', hqchartData);  callback(hqchartData);     }     this.GetRandomTestData=function(min, max)   //测试数据     {  min = Math.ceil(min);  max = Math.floor(max);  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值      }     this.OnSize=function(option)  //自适应大小调整     {  var height= $(window).height()-50;  var width = $(window).width();  //width=50000;  this.DivKLine.style.top='0px';  this.DivKLine.style.left='0px';  this.DivKLine.style.width=width+'px';  this.DivKLine.style.height=height+'px';  this.Chart.OnSize(option);     }     this.ChangeSymbol=function(symbol)     {  this.Chart.ChangeSymbol(symbol,option);     }     this.ChangeKLineDrawType=function(type)     {  this.Chart.ChangeKLineDrawType(type);     } } $(function ()  {     WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源     //LoadCustomIndex();     var klineControl=new KLineChart(document.getElementById('kline'));     klineControl.Create();     $("#button_1").click(function() { klineControl.ChangeKLineDrawType(0); } );     $("#button_2").click(function() { klineControl.ChangeKLineDrawType(5); } );      })    </script>  </body>  </html><style>#kline{    width: 900px;    height:400px;    position: relative;    /*margin-top: 100px;*/}.btn-style{    padding: 3px 8px;    border: 1px solid #ececec;    border-radius: 5px;    background-color: #f5f5f5;    cursor: pointer;}    </style>
网络标签：

相关问题