HQChart使用教程29-走势图如何对接第3方数据6-websocket分钟数据
介绍
hqchart内部没有websocket数据源,所有只能通过外部数据源挂接的方式,挂接第3方websocket数据。
流程图
需要实现的就是接收第3方数据 并转换成hqchart分时图格式
部分代码
设置网络协议回调
this.Option=
{
Type:'分钟走势图', //创建图形类型
.......
//绑定网络协议回调
NetworkFilter:function(data, callback) { self.NetworkFilter(data, callback); } ,
........
获取分时图实例和更新回调
在第1次回调的时候设置实例和回调更新
调用的时间点,
- 第1次初始化,
- 动态切换股票,这边你判断股票代码是否变了, 变了就是切换股票了 对应websocket也要换股票
- 自动更新(如果你关闭了自动更新就不回调用这个)
this.NetworkFilter=function(data, callback)
{
console.log('[NetworkFilter] data', data);
switch(data.Name)
{
case 'MinuteChartContainer::RequestMinuteData':
data.PreventDefault=true; //禁止HQChart内部请求数据
//把实例和更新回调保存起来 这样就可以给外部websocket用了
if (this.UpdateMinuteData) this.UpdateMinuteData=callback; //获取更新回调接口
if (this.MinuteChart) this.MinuteChart=data.Self;
break;
}
}
websocket接收到数据
创建websocket我就不说了,查下MDN就知道了。 这给就说下websocket数据收到以后, 需要转成hqchart格式,然后再调用更新回调, 把数据更新到hqchart里面。
this.OnRecvMinuteData=function(data) //websocket收到数据以后
{
if (!this.UpdateMinuteData || !this.MinuteChart) return; //没有启动好
//把收到的数据转成hqchart数据结构
//data = > this.MinuteData
this.MinuteChart.ChartSplashPaint.IsEnableSplash=false; //不显示数据下载中的动画
this.UpdateMinuteData(this.MinuteData);
}
注意点
- 更新回调传入的数据是当天所有的分钟数据,
- 如果是跨天的分时图 (如港股指数期货等,需要再每个分钟数据里面增加date字段)
- 分时图数据结构查看教程 HQChart使用教程29-走势图如何对接第3方数据2-最新分时数据
demo地址
https://github.com/jones2000/HQChart/blob/master/webhqchart.demo/demo/ws_minute_demo.html
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址:github.com/jones2000/HQChart