HQChart实战教程14

2023-08-10 02:09| 来源: 网络整理| 查看: 265

HQChart实战教程14-K线图对接第3方http/https数据教程整理序http/https对接步骤1. 确定数据品种2.确定K线周期数据3.hqchart数据对接接口4. 日线数据对接1. 全量日线数据对接部分代码2. 日线最新数据对接部分代码5. 分钟K线数据对接1.分钟全量数据对接部分代码分钟最新数据对接部分代码6. 自动更新7.小程序和uniapp注意点8. 释放hqchart实例9. 日志控制10.完整例子（VUE版本）Http+ws 对接教程ws对接教程HQChart代码地址如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~

序

数据对接的教程我在之前的教程中都写了，只是教程比较多。群里经常有朋友问如何对接。这里我整理了一下，并把对应步骤的详细教程的链接也贴上。方便大家查阅。

注意！！请大家仔细看教程，对接第3方数据功能肯定是没有问题的。群里有很多朋友都对接成功的，如果你不成功，可能是教程没看仔细。

http/https对接步骤 1. 确定数据品种

确定你的对接数据是什么品种的，使用对应的hqchart品种后缀。

详见HQChart使用教程56-内置品种对应后缀列表说明

2.确定K线周期数据

确定K线周期如日，月，年， 5分钟等周期数据是直接取第3放的数据，还是直接用例1分钟或日线数据拼接其他周期的数据。

hqchart 支持api周期数据对接，也支持1分钟或日线数据拼接，通过设置IsApiPeriod来设置是否是api周期数据

详见HQChart使用教程1- 如何快速创建一个K线图页面

3.hqchart数据对接接口

hqchart通过统一的NetwrokFilter接口回调。来对接所有的数据。

详见HQChart使用教程30-K线图如何对接第3方数据1

部分样例代码

this.Create=function() //创建图形{ ...... this.Option.NetworkFilter=function(data, callback) { self.NetworkFilter(data, callback); }; //绑定网络协议回调 this.Chart.SetOption(this.Option); //设置K线配置}//对接第3方数据，需要显示那些数据对就对接哪些数据，不需要的数据不需要对接this.NetworkFilter=function(data, callback){ console.log('[NetworkFilter] data', data); switch(data.Name) { case 'KLineChartContainer::ReqeustHistoryMinuteData': //分钟全量数据下载 this.RequestHistoryMinuteData(data, callback); break; case 'KLineChartContainer::RequestMinuteRealtimeData': //分钟增量数据更新 this.RequestMinuteRealtimeData(data,callback); break; case 'KLineChartContainer::RequestHistoryData': //日线全量数据下载 this.RequestHistoryData(data,callback); break; case 'KLineChartContainer::RequestRealtimeData': //日线实时数据更新 this.RequestRealtimeData(data,callback); break; case 'KLineChartContainer::RequestFlowCapitalData': //流通股本 this.RequestFlowCapitalData(data,callback); break; case "KLineChartContainer::RequestOverlayHistoryMinuteData": //叠加股票分钟K线 this.RequestOverlayHistoryMinuteData(data,callback); break; case "KLineChartContainer::RequestOverlayHistoryData": //叠加股票日K this.RequestOverlayHistoryData(data,callback); break; }} 4. 日线数据对接

需要对接2个数据格式

全量历史数据数据格式HQChart使用教程30-K线图如何对接第3方数据2-日K数据最新日线数据数据格式HQChart使用教程30-K线图如何对接第3方数据14-轮询增量更新日K数据 1. 全量日线数据对接部分代码//历史日线K线数据this.RequestHistoryData=function(data, callback){ data.PreventDefault=true; //禁止hqchart调用内置api数据 var self=this; var symbol=data.Request.Data.symbol; //股票代码 var period=data.Self.Period; //周期 $.ajax({ url: url, data: { ...... }, type:"post", dataType: "json", async:true, success: (recvData)=> { self.RecvHistoryMinuteData(recvData, data, callback); }, error:(request)=> { //self.RecvError(request,RECV_DATA_TYPE.DERIVATIVE_DATA); } });}this.RecvHistoryData=function(recvData, data, callback) //接收历史分钟数据{ var hqChartData={code:0, data:recvData.data}; hqChartData.symbol=recvData.symbol; hqChartData.name=recvData.name; console.log("[KLineChart::RecvHistoryData] hqChartData", hqChartData); callback(hqChartData);} 2. 日线最新数据对接部分代码//最新日线数据this.RequestRealtimeData=function(data,callback){ data.PreventDefault=true; //禁止hqchart调用内置api数据 var self=this; var symbol=data.Request.Data.symbol; //股票代码 var period=data.Self.Period; //周期 ....... $.ajax({ url: url, data: { ...... }, type:"post", dataType: "json", async:true, success: (recvData)=> { self.RecvRealtimeData(recvData, data, callback); }, error:(request)=> { //self.RecvError(request,RECV_DATA_TYPE.DERIVATIVE_DATA); } });}this.RecvRealtimeData=function(recvData, data, callback){ var lastItem=recvData.data[recvData.data.length-1]; //注意数据格式和历史的不一样，具体看教程 var stockItem={}; stockItem.symbol=recvData.symbol; stockItem.name=recvData.name; stockItem.date=lastItem[0]; stockItem.yclose=lastItem[1]; stockItem.open=lastItem[2]; stockItem.high=lastItem[3]; stockItem.low=lastItem[4]; stockItem.price=lastItem[5]; stockItem.vol=lastItem[6]; stockItem.amount=lastItem[7]; var hqChartData={code:0, stock:[stockItem] }; console.log("[KLineChart::RecvRealtimeData] hqChartData", hqChartData); callback(hqChartData);} 5. 分钟K线数据对接

需要对接2个数据格式

全量分钟历史数据数据格式HQChart使用教程30-K线图如何对接第3方数据3-1分钟K数据最新分钟数据数据格式HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据 1.分钟全量数据对接部分代码//历史分钟K线数据this.RequestHistoryMinuteData=function(data, callback) { data.PreventDefault=true; //禁止hqchart调用内置api数据 var self=this; var symbol=data.Request.Data.symbol; //请求的股票代码 var period=data.Self.Period; //周期id ...... $.ajax({ url: url, data: { ...... }, type:"post", dataType: "json", async:true, success: (recvData)=> { self.RecvHistoryMinuteData(recvData, data, callback); }, error:(request)=> { //self.RecvError(request,RECV_DATA_TYPE.DERIVATIVE_DATA); } });}this.RecvHistoryMinuteData=function(recvData, data, callback) //接收历史分钟数据{ //把数据转换成hqchart格式，格式具体看教程 var hqChartData={code:0, data:recvData.data}; hqChartData.symbol=recvData.symbol; hqChartData.name=recvData.name; console.log("[KLineChart::RecvHistoryMinuteData] hqChartData", hqChartData); callback(hqChartData); //数据设置到hqchart里面 } 分钟最新数据对接部分代码//最新分钟K线数据this.RequestMinuteRealtimeData=function(data,callback){ data.PreventDefault=true; //禁止hqchart调用内置api数据 var self=this; var symbol=data.Request.Data.symbol; //股票代码 var period=data.Self.Period; //周期 ....... $.ajax({ url: url, data: { ...... }, type:"post", dataType: "json", async:true, success: (recvData)=> { self.RecvMinuteRealtimeData(recvData, data, callback); }, error:(request)=> { //self.RecvError(request,RECV_DATA_TYPE.DERIVATIVE_DATA); } });}this.RecvMinuteRealtimeData=function(recvData, data, callback){ var hqChartData={ code:0, data:[], ver:2.0 }; hqChartData.symbol=recvData.symbol; hqChartData.name=recvData.name; var dataCount=recvData.data.length; for(var i=dataCount-3;igithub.com/jones2000/HQChart

如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~

【本文地址】

HQChart实战教程14

HQChart实战教程14

今日新闻

推荐新闻