HQChart使用教程74-使用快速创建数字币深度图
深度图
反映了市场的交易深度。深度图是显示市场用户委托挂买单和委托挂卖单的情况。左侧绿色：市场委托挂买单价格及对应的挂单数量，右侧红色：市场委托挂卖单价格及对应的挂单数量。
效果图
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
}
//深度图十字光标和tooltip
this.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
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
