HQChart使用教程29-走势图如何对接第3方数据6-websocket分钟数据

介绍

hqchart内部没有websocket数据源，所有只能通过外部数据源挂接的方式，挂接第3方websocket数据。

流程图

需要实现的就是接收第3方数据 并转换成hqchart分时图格式

部分代码

设置网络协议回调

 this.Option= 
 {
    Type:'分钟走势图',   //创建图形类型   
    ....... 
    //绑定网络协议回调     
    NetworkFilter:function(data, callback) { self.NetworkFilter(data, callback); } ,   
    ........
         

获取分时图实例和更新回调

在第1次回调的时候设置实例和回调更新
调用的时间点，

1. 第1次初始化，
2. 动态切换股票，这边你判断股票代码是否变了， 变了就是切换股票了 对应websocket也要换股票
3. 自动更新(如果你关闭了自动更新就不回调用这个）

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);
  }

注意点

1. 更新回调传入的数据是当天所有的分钟数据，
2. 如果是跨天的分时图 （如港股指数期货等，需要再每个分钟数据里面增加date字段）
3. 分时图数据结构查看教程 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