HQChart使用教程74-使用快速创建数字币深度图

深度图
效果图
demo例子
- demo地址
- 代码
Option项说明
- Type
- Symbol
- IsAutoUpdate
- AutoUpdateFrequency
- Border
- MaxVolRate
- CorssCursorInfo
- - HPenType
  - VPenType
  - IsShowTooltip
- Frame
- - SplitCount
  - XSplitCount
  - IsShowLeftText
  - IsShowRightText
  - XLineType
  - YLineType
数据对接
- 协议名称-深度图数据
- 协议日志截图
- Request 字段说明
- - symbol
- 返回数据截图
- 返回数据说明
- - code
  - asks
  - bids
  - datatype
- 配色
交流QQ群: 950092318
HQChart代码地址

深度图

反映了市场的交易深度。深度图是显示市场用户委托挂买单和委托挂卖单的情况。左侧绿色：市场委托挂买单价格及对应的挂单数量，右侧红色：市场委托挂卖单价格及对应的挂单数量。

效果图

demo例子

demo地址

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

代码

<!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_1'>BNB/BUSD</span><span id='button_2'>ADX/BTC</span><span id='button_3'>BUSD/USDT</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="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.min.js" integrity="sha512-ZqQWGugamKhlSUqM1d/HMtwNG+hITmd/ptoof91lt5ojFZ+2bKlkvlzkmnDIrnikDY+UDVZVupLf6MNbuhtFSw==" crossorigin="anonymous"></script>--><script>//简单的把K线控件封装下function KLineChart(divKLine){this.DivKLine=divKLine;this.Chart=JSChart.Init(divKLine);   //把K线图绑定到一个Div上this.WSUrl='wss://stream.binance.com/stream',this.Socket=null,this.ClearDivDOM=function()     {var childList = this.DivKLine.childNodes;for(var i in childList){this.DivKLine.removeChild(childList[i]);}}//K线配置信息this.Option= {Type:'深度图',   //创建图形类型Symbol:'BTCBUSD.bit',IsAutoUpdate:false,       //是自动更新数据AutoUpdateFrequency:10000,   //数据更新频率//CorssCursorTouchEnd:true,EnableScrollUpDown:true,MaxVolRate:1.2,CorssCursorInfo: { HPenType:0, VPenType:1, IsShowTooltip:true },Border: //边框{Left:1,         //左边间距Right:40,       //右边间距Bottom:25,      //底部间距Top:1           //顶部间距},//框架设置Frame: { SplitCount:6, IsShowLeftText:false , XLineType:3},};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); //读取黑色风格配置JSChart.SetStyle(blackStyle);this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景this.Option.NetworkFilter=(data, callback)=> { this.NetworkFilter(data, callback); };this.OnSize();  //全屏this.Chart.SetOption(this.Option);  //设置K线配置}this.OnSize=function(option)  //自适应大小调整{var height= $(window).height()-30;var width = $(window).width();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);}this.NetworkFilter=function(data, callback){console.log("[KLineChart::NetworkFilter", data );switch(data.Name){case "DepthChartContainer::RequestDepthData":this.RequestDepthData(data, callback);break;}}this.LastUpdateId;this.RequestDepthData=function(data, callback){data.PreventDefault=true;var symbol=data.Request.Data.symbol;var url="深度图数据地址";$.ajax({url: url,type:"get",dataType: "json",async:true,success: (recvData)=>{var hqChartData= { }; //TODO: 把接收到的数据装成hqchart格式给回调callback(hqChartData);},error:(request)=>{}});}}$(function () {WebFont.load({ custom: { families: ['iconfont'] } });   //预加载下iconfont资源var klineControl=new KLineChart(document.getElementById('kline'));klineControl.Create();$('#button_1').click(()=>{klineControl.ChangeSymbol("BNBBUSD.bit");});$('#button_2').click(()=>{klineControl.ChangeSymbol("ADXBTC.bit");});$('#button_3').click(()=>{klineControl.ChangeSymbol("BUSDUSDT.bit");});})</script>
</body>
</html><style></style>

Option项说明

Type

图形类型，这里填深度图代表创建一个深度图

Symbol

显示的股票代码股票代码需要带后缀. 上海.sh 深证.sz 数字币.bit
具体参见HQChart使用教程56-内置品种对应后缀列表说明

IsAutoUpdate

是否自动更新深度图数据，如果是true, 会定时(30s/次)获数据,更新图形

AutoUpdateFrequency

数据更新频率单位ms, 默认30s

Border

上下左右间距 Left， Right， Bottom，Top，如果左右间距太小了，坐标刻度会显示在图形内部

MaxVolRate

Y轴刻度最大值扩大倍数

CorssCursorInfo

十字光标配置

HPenType

水平线类型 0=虚线 1=实线

VPenType

垂直线类型 0=虚线 1=实线

IsShowTooltip

是否显示十字光标边上的tooltip提示信息

Frame

框架配置

SplitCount

Y轴刻度分割个数

XSplitCount

X轴刻度个数，是一半的个数（1.10541版本以后才支持）

IsShowLeftText

是否显示左边刻度

IsShowRightText

是否显示右边刻度

XLineType

X轴刻度线样式 1=实线 , 2=虚线 3=短线 , 0=不画线

YLineType

Y轴刻度线样式 1=实线 , 2=虚线 3=短线 , 0=不画线

数据对接

数据对接通过NetworkFilter回调来完成.

协议名称-深度图数据

对应代码的类名和函数名 DepthChartContainer::RequestDepthData

协议日志截图

Request 字段说明

Request是需要请求的数据,

symbol

品种代码

返回数据截图

返回数据说明

code

正常填0

asks

卖盘数组 [ [价格,量],[价格,量] …]

bids

买盘数组 [ [价格,量],[价格,量] …]

datatype

数据类型
snapshot: 快照数据, 不使用内部缓存, 直接覆盖
update: 增量更新数据, 在上次的数据基础上更新

配色

外部修改配色参见HQChart使用教程5- K线图控件操作函数说明

//深度图this.DepthChart={BidColor: { Line:"rgb(82,176,123)", Area:"rgba(82,176,123,0.8)"},  //卖AskColor: { Line:"rgb(207,76,89)", Area:"rgba(207,76,89, 0.8)"},   //买LineWidth:4}
//深度图十字光标和tooltipthis.DepthCorss={BidColor: { Line:"rgb(82,176,123)" },  //卖AskColor: { Line:"rgb(207,76,89)" },   //买LineWidth:2,    //线段宽度LineDash:[3,3],Tooltip:{ BGColor:'rgba(236,240,245, 0.8)', TextColor:"rgb(130,140,151)",Border:{ Top:5, Left:20, Bottom:5, Center: 5},Font:14*GetDevicePixelRatio() +"px 微软雅黑",LineHeight:16   //单行高度}}

交流QQ群: 950092318

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

HQChart代码地址

地址：github.com/jones2000/HQChart

HQChart使用教程74-使用快速创建数字币深度图相关推荐

【Edraw Max教程】如何快速创建精美的组织结构图
Edraw Max(亿图图示)是一款综合图形图表制作软件,它包含丰富的实例和模版,帮助您轻松创建流程图.网络拓扑图.组织结构图.商业图表.工程图,思维导图.软件设计图和平面布局图等. 亿图采用更智能和 ...
YII Framework学习教程-用YIIC快速创建YII应用之三-2011-11-11
4.yiic shell 此功能是最常用的功能.他可以帮助我们创建大部分的程序结构.具体实现的内容需要我们自己来实现. 如何使用yiic shell太和其他的命令有点不同.因为他是依赖与一个web应用 ...
YII Framework学习教程-用YIIC快速创建YII应用之二-2011-11-11
3.yii migrate 查看帮助 /*/www/yii_dev/yii/framework# php yiic migrate help Error: Unknown action: helpUS ...
HQChart使用教程1- 如何快速创建一个K线图页面
快速创建一个K线图页面 HQChart介绍 demo页面代码 Option的配置项说明 Type Symbol IsAutoUpdate IsShowRightMenu IsShowCorssCurs ...
HQChart使用教程7- 如何快速创建一个分时图页面
如何快速创建一个分时图页面 demo页面代码品种代码后缀 Option的配置项说明 Type Symbol IsAutoUpdate DayCount Border Minute DragMode ...
HQChart使用教程9- 如何快速创建K线训练页面
HQChart使用教程9- 如何快速创建K线训练页面 K线训练已重构新版本使用详见 demo页面部分代码 Option的配置项说明注册K线训练K线移动的监听 K线训练操作接口 HQChart代码地址 ...
OC 教程 UI快速创建模板
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
Kubernetes教程(十一)---使用 KubeClipper 通过一条命令快速创建 k8s 集群
来自:指月 https://www.lixueduan.com 原文:https://www.lixueduan.com/posts/kubernetes/11-install-by-kubeclip ...
HQChart使用教程94-如何创建报价列表
HQChart使用教程94-如何创建报价列表报价列表初始化报价列表 js vue Option的配置项说明 Type Symbol Name IsAutoUpdate AutoUpdateFreq ...

HQChart使用教程74-使用快速创建数字币深度图

HQChart使用教程74-使用快速创建数字币深度图

深度图

效果图

demo例子

demo地址

代码

Option项说明

Type

Symbol

IsAutoUpdate

AutoUpdateFrequency

Border

MaxVolRate

CorssCursorInfo

HPenType

VPenType

IsShowTooltip

Frame

SplitCount

XSplitCount

IsShowLeftText

IsShowRightText

XLineType

YLineType

数据对接

协议名称-深度图数据

协议日志截图

Request 字段说明

symbol

返回数据截图

返回数据说明

code

asks

bids

datatype

配色

交流QQ群: 950092318

HQChart代码地址

HQChart使用教程74-使用快速创建数字币深度图相关推荐

最新文章

热门文章