要求
- http下载当天所有分时线数据
- ws更新最新的分时数据
流程图
数据格式
分时数据使用 下面1个格式的数据
HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据
样例
<!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>单日分时图</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="content/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>
<body>
<div id="minute" 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>
//简单的把分时控件封装下
function MinuteChart(divMinute)
{
this.DivMinute=divMinute;
this.Chart=JSChart.Init(divMinute); //把分时图绑定到一个Div上
this.Symbol='000001.sz';
this.Cache;
//分时图配置信息
this.Option= {
Type:'分钟走势图', //创建图形类型
Windows: //窗口指标
[
{Index:"MACD", Modify:false,Change:false},
],
IsAutoUpdate:false, //是自动更新数据 （使用ws去掉定时器更新)
DayCount:1, //1 最新交易日数据 >1 多日走势图
IsShowRightMenu:false, //是否显示右键菜单
CorssCursorTouchEnd:true,
MinuteLine:
{
IsDrawAreaPrice:false, //是否画价格面积图
},
MinuteTitle: //标题设置
{
IsShowName:false, //不显示股票名称
},
Border: //边框
{
Left:50, //左边间距
Right:50, //右边间距
Top:25,
Bottom:50
},
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(); //让分时图全屏
this.Option.Symbol=this.Symbol;
this.Option.NetworkFilter=(data, callback)=> { this.NetworkFilter(data, callback); } , //绑定网络协议回调
this.Chart.SetOption(this.Option); //设置K线配置
}
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.StopWSUpdate=function() //停止ws更新数据
{
}
this.TestCount=0;
this.StartWSUpdate=function(symbol) //开始ws更新数据
{
var testdata=
[
{"price": 16.74,"open": 16.73,"high": 16.75,"low": 16.73,"vol": 168150,"amount": 10189765,"time": 941,"avprice": 16.74,"increase": 0.35949670461354105,"risefall": 0.06},
{"price": 16.73,"open": 16.73,"high": 16.75,"low": 16.73,"vol": 368150,"amount": 10989765,"time": 941,"avprice": 16.74,"increase": 0.35949670461354105,"risefall": 0.06},
{"price": 16.75,"open": 16.73,"high": 16.75,"low": 16.73,"vol": 668150,"amount": 11189765,"time": 941,"avprice": 16.74,"increase": 0.35949670461354105,"risefall": 0.06},
{"price": 16.76,"open": 16.75,"high": 16.76,"low": 16.74,"vol": 263400,"amount": 4412057,"time": 942,"avprice": 16.74,"increase": 0.41941282204913122,"risefall": 0.07},
{"price": 16.74,"open": 16.75,"high": 16.76,"low": 16.74,"vol": 227150,"amount": 3803159,"time": 943,"avprice": 16.74,"increase": 0.29958058717795089,"risefall": 0.05},
{"price": 16.74,"open": 16.71,"high": 16.74,"low": 16.71,"vol": 519550,"amount": 8689654,"time": 944,"avprice": 16.74,"increase": 0.29958058717795089,"risefall": 0.05}
];
setInterval(()=>
{
if (this.TestCount<testdata.length)
{
var data=testdata[this.TestCount];
this.OnRecvWSRealtimeData(data);
++this.TestCount;
}
}, 1000);
}
this.RequestMinuteData=function(data,callback)
{
this.Cache=null;
data.PreventDefault=true;
var symbol=data.Request.Data.symbol[0];
this.StopWSUpdate();
setTimeout(() => {
this.RecvMinuteData(null,callback, data.Self);
this.StartWSUpdate(symbol); //开始启动ws 自动更新
}, 200);
}
this.RecvMinuteData=function(data, callback, chart)
{
var stockItem=
{
name:'name', symbol:'000001.sz',
time: 150003,date: 20200113,
price: 16.99,open: 16.75, yclose: 16.69,
high: 17.03,low: 16.61,
vol: 87213336,amount: 1468271683,
minute:
[
{"price": 16.75,"open": 16.75,"high": 16.75,"low": 16.75,"vol": 615100,"amount": 10302925,"time": 925,"avprice": 16.75,"increase": 0.35949670461354105,"risefall": 0.06},
{"price": 16.71,"open": 16.74,"high": 16.74,"low": 16.69,"vol": 486500,"amount": 8129763,"time": 930,"avprice": 16.73,"increase": 0.11983223487118035,"risefall": 0.02},
{"price": 16.71,"open": 16.71,"high": 16.72,"low": 16.7,"vol": 619089,"amount": 10346444,"time": 931,"avprice": 16.73,"increase": 0.11983223487118035,"risefall": 0.02},
{"price": 16.72,"open": 16.71,"high": 16.72,"low": 16.71,"vol": 710400,"amount": 11874104,"time": 932,"avprice": 16.72,"increase": 0.17974835230677053,"risefall": 0.03},
{"price": 16.75,"open": 16.71,"high": 16.76,"low": 16.71,"vol": 1003293,"amount": 16794361,"time": 933,"avprice": 16.73,"increase": 0.35949670461354105,"risefall": 0.06},
{"price": 16.75,"open": 16.75,"high": 16.76,"low": 16.72,"vol": 708380,"amount": 11862792,"time": 934,"avprice": 16.73,"increase": 0.35949670461354105,"risefall": 0.06},
{"price": 16.76,"open": 16.76,"high": 16.76,"low": 16.75,"vol": 321800,"amount": 5391259,"time": 935,"avprice": 16.73,"increase": 0.41941282204913122,"risefall": 0.07},
{"price": 16.74,"open": 16.76,"high": 16.77,"low": 16.74,"vol": 762100,"amount": 12766210,"time": 936,"avprice": 16.73,"increase": 0.29958058717795089,"risefall": 0.05},
{"price": 16.74,"open": 16.75,"high": 16.75,"low": 16.74,"vol": 460000,"amount": 7700950,"time": 937,"avprice": 16.74,"increase": 0.29958058717795089,"risefall": 0.05},
{"price": 16.74,"open": 16.74,"high": 16.75,"low": 16.74,"vol": 290150,"amount": 4858125,"time": 938,"avprice": 16.74,"increase": 0.29958058717795089,"risefall": 0.05 },
{"price": 16.74,"open": 16.75, "high": 16.75, "low": 16.73,"vol": 304450,"amount": 5094870,"time": 939,"avprice": 16.74,"increase": 0.29958058717795089,"risefall": 0.05},
{"price": 16.73,"open": 16.73,"high": 16.74,"low": 16.72,"vol": 212100,"amount": 3547031,"time": 940,"avprice": 16.74,"increase": 0.23966446974236069,"risefall": 0.04},
]
};
var hqChartData={code:0, stock:[stockItem]};
this.Cache=stockItem;
callback(hqChartData);
}
this.OnRecvWSRealtimeData=function(data)
{
console.log("[MinuteChart::OnRecvWSRealtimeData", data);
if (!this.Cache || !this.Cache.minute) return;
if (this.Cache.minute.length>0)
{
var lastItem=this.Cache.minute[this.Cache.minute.length-1];
if (lastItem.time==data.time) this.Cache.minute[this.Cache.minute.length-1]=data; //更新
else this.Cache.minute.push(data); //插入
}
else
{
this.Cache.minute.push(data);
}
var hqChartData={code:0, stock:[this.Cache] };
this.Chart.JSChartContainer.RecvMinuteData(hqChartData);
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var minuteControl=new MinuteChart(document.getElementById('minute'));
minuteControl.Create();
})
</script>
</body>
</html>