HQChart实战教程14-K线图对接第3方http/https数据教程整理
序
数据对接的教程我在之前的教程中都写了， 只是教程比较多。 群里经常有朋友问如何对接。 这里我整理了一下，并把对应步骤的详细教程的链接也贴上。方便大家查阅。
注意！！ 请大家仔细看教程，对接第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;i<dataCount; ++i) //更新最新的3条数据
{
var item=recvData.data[i];
hqChartData.data.push(item);
}
console.log("[KLineChart::RecvMinuteRealtimeData] hqChartData", hqChartData);
callback(hqChartData);
}
6. 自动更新
设置自动更新标识和更新频率，hqchart内置的定时器就会启动，定时调用networkfilter回调通知外面更新最新数据
HQChart使用教程26- K线图及走势图数据自动更新设置
注意！！ 不同的品种有不同的交易时间， 只有在交易时间内才会启动内置定时器， 具体品种的对应交易时间详见
HQChart使用教程56-内置品种对应后缀列表说明
7.小程序和uniapp注意点
对接步骤同上， 最后数据格式的需要外面包一层data:{}。
var hqchartData; //最后转成hqchart数据格式
// #ifdef H5
callback(hqChartData); //h5页面直接设置就可以
// #endif
// #ifndef H5
callback({data: hqChartData}); //uniapp/小程序 在外面包一层data
// #endif
8. 释放hqchart实例
1.停止内部定时器 StopAutoUpdate() 详见教程HQChart使用教程26- K线图及走势图数据自动更新设置
2. 把实例变量设置null
9. 日志控制
h5支持日志输出控制， uniapp/小程序不支持日志输出控制，具体看教程
HQChart使用教程53- log日志输出控制
如果还有问题可以加交流QQ群: 950092318
Http+ws 对接教程
全量历史数据通过http/https下载， 最新数据通过ws推送
详见下面2个教程
ws对接教程
详见下面2个教程， 第2个教程包括了样例代码和样例的测试页面
HQChart代码地址
地址：github.com/jones2000/HQChart