要求
- http下载历史分钟K线数据
- ws更新最新的分钟K数据
流程图
数据格式
分钟K线使用 下面2个格式的数据
HQChart使用教程30-K线图如何对接第3方数据3-1分钟K数据
HQChart使用教程30-K线图如何对接第3方数据15-轮询增量更新1分钟K线数据
样例
<!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>币K线图(秒)</title>
<!-- 加载资源 -->
<link rel="stylesheet" href="content/css/tools.css" />
<link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>
<body>
<div id="kline" 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>
//简单的把K线控件封装下
function KLineChart(divKLine)
{
this.DivKLine=divKLine;
this.Chart=JSChart.Init(divKLine); //把K线图绑定到一个Div上
this.WS=null; //数据更新ws
this.Symbol='600000.sz',
this.Cache=[];
//K线配置信息
this.Option= {
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{Index:"MA", Modify:false,Change:false},
{Index:"VOL", Modify:false,Change:false},
],
IsAutoUpdate:false, //是自动更新数据 （使用ws去掉定时器更新)
AutoUpdateFrequency:5000, //数据更新频率
IsShowRightMenu:false, //右键菜单
CorssCursorTouchEnd:true,
IsApiPeriod:true,
KLine: //K线设置
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
Right:0, //复权 0 不复权 1 前复权 2 后复权
Period:4, // [30001-32000) 秒周期
// 0=日线 1=周线 2=月线 3=年线 9=季线 [40001-50000) 自定义日线
// 4=1分钟 5=5分钟 6=15分钟 7=30分钟 8=60分钟 11=120分钟 12=240分钟 [20001-30000) 自定义分钟
MaxReqeustDataCount:1000, //数据个数
MaxRequestMinuteDayCount:10, //分钟数据取5天
PageSize:15, //一屏显示多少数据
IsShowTooltip:true, //是否显示K线提示信息
DrawType:0 , //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:1, //左边间距
Right:70, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{SplitCount:3,StringFormat:0, IsShowLeftText:false,Custom: [ { Type:0,Position:'right'} ]},
{SplitCount:2,StringFormat:0, IsShowLeftText:false},
{SplitCount:2,StringFormat:0, IsShowLeftText:false}
],
ExtendChart: //扩展图形
[
{Name:'KLineTooltip' } //手机端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.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
this.OnSize(); //让K线全屏
this.Option.Symbol=this.Symbol;
this.Option.NetworkFilter=(data, callback)=> { this.NetworkFilter(data, callback); } , //绑定网络协议回调
this.Chart.SetOption(this.Option); //设置K线配置
}
this.OnRecvWSRealtimeData=function(data)
{
console.log("[KLineChart::OnRecvWSRealtimeData", data);
var hqChartData={code:0, data:[], ver:2.0 };
hqChartData.symbol='600000.sh';
hqChartData.name='浦发银行';
for(var i in data)
{
var item=data[i];
var newItem=[item[0],item[1], item[2], item[3], item[4], item[5], item[6], item[7], item[8]];
if(this.Cache.length>0)
{
var lastItem=this.Cache[this.Cache.length-1];
if (lastItem[0]==newItem[0] && lastItem[8]==newItem[8])
{
this.Cache[this.Cache.length-1]=newItem;
}
else
{
this.Cache.push(newItem);
}
}
else
{
this.Cache.push(newItem);
}
}
for(var i in this.Cache)
{
hqChartData.data.push(this.Cache[i]);
}
this.Chart.JSChartContainer.RecvMinuteRealtimeData(hqChartData);
}
this.TestCount=0;
this.StartWSUpdate=function(symbol) //开始ws更新数据
{
var testdata=
[
[20200107,12.5,12.49,12.5,12.49,12.49,23767,271661,1105],
[20200107,12.5,12.49,12.5,12.49,12.49,43767,471661,1105],
[20200107,12.5,12.49,12.5,12.49,12.49,53767,671661,1105],
[20200107,12.49,12.49,12.5,12.49,12.49,26413,329960,1106],
[20200107,12.49,12.5,12.5,12.49,12.5,18140,276586,1107],
[20200107,12.49,12.5,12.5,12.49,12.49,38140,476586,1107],
[20200107,12.49,12.49,12.51,12.49,12.51,87064,1088310,1108],
[20200107,12.51,12.51,12.51,12.5,12.5,10607,132637,1109],
[20200107,12.5,12.5,12.51,12.5,12.5,25995,325119,1110]
];
setInterval(()=>
{
if (this.TestCount<testdata.length)
{
var data=testdata[this.TestCount];
this.OnRecvWSRealtimeData([data]);
++this.TestCount;
}
}, 1500);
}
this.StopWSUpdate=function() //停止ws更新数据
{
}
this.OnSize=function() //自适应大小调整
{
var height= $(window).height();
var width = $(window).width();
this.DivKLine.style.top='px';
this.DivKLine.style.left='px';
this.DivKLine.style.width=width+'px';
this.DivKLine.style.height=height+'px';
this.Chart.OnSize();
}
this.NetworkFilter=function(data, callback)
{
console.log('[NetworkFilter] data', data);
switch(data.Name)
{
case 'KLineChartContainer::ReqeustHistoryMinuteData': //1分钟全量数据下载
this.RequestHistoryMinuteData(data, callback);
break;
}
}
this.RequestHistoryMinuteData=function(data, callback)
{
data.PreventDefault=true;
var symbol=data.Request.Data.symbol;
this.StopWSUpdate();
setTimeout(() => {
this.RecvHistoryMinuteData(null,callback, data.Self);
this.StartWSUpdate(symbol); //开始启动ws 自动更新
}, 200);
}
this.RecvHistoryMinuteData=function(data, callback, chart)
{
var hqChartData={code:0, data:[]};
hqChartData.symbol='600000.sh';
hqChartData.name='浦发银行';
var data=
[
[20200107,12.52,12.52,12.53,12.52,12.52,40346,505192,1037],
[20200107,12.52,12.53,12.53,12.52,12.53,54950,688067,1038],
[20200107,12.53,12.52,12.53,12.51,12.51,287622,3601021,1039],
[20200107,12.51,12.52,12.52,12.51,12.52,38637,483420,1040],
[20200107,12.52,12.51,12.52,12.5,12.5,272011,3402070,1041],
[20200107,12.5,12.5,12.51,12.5,12.5,47988,599922,1042],
[20200107,12.5,12.5,12.51,12.5,12.5,64054,800955,1043 ],
[20200107,12.5, 12.5,12.51,12.5, 12.5,57470,718441, 1044],
[20200107,12.5,12.5,12.51,12.5,12.5,34293,428690, 1045],
[20200107,12.5,12.5,12.51,12.49,12.49, 297641,3719841, 1046],
[20200107,12.49,12.49,12.5,12.49,12.49,87318,1090720,1047],
[20200107,12.49,12.48,12.5,12.48,12.48,150200,1875383,1048 ],
[20200107,12.48,12.48,12.5,12.48,12.5,35500,443365,1049],
[20200107,12.5,12.49,12.5,12.48,12.49,70300,878047,1050],
[20200107,12.49,12.49,12.5,12.49,12.49,50599,632116,1051],
[20200107,12.49,12.49,12.5,12.49,12.49,65461,817677,1052],
[20200107,12.49,12.49,12.5,12.49, 12.49,69400, 866868,1053],
[20200107, 12.49,12.49, 12.5, 12.49, 12.49,55889,698190,1054 ],
[20200107,12.49,12.5,12.5,12.48,12.49,100547,1255782,1055],
[20200107,12.49,12.49,12.5,12.49,12.49,25954,324226,1056],
[20200107,12.49,12.49,12.51,12.49,12.5,129159,1614471,1057],
[20200107,12.5,12.5,12.51,12.5,12.51,20171,252272,1058],
[20200107, 12.51, 12.51, 12.51,12.49,12.49,62344,779225,1059],
[20200107,12.49,12.49,12.5,12.49,12.49,52877,660580,1100],
[20200107,12.49,12.49,12.5,12.49,12.49,17906,223714,1101],
[20200107,12.49,12.5,12.51,12.5,12.51,69931,874197,1102],
[20200107,12.51,12.5,12.51,12.49,12.49,29142,364254,1103],
[20200107,12.49,12.49,12.5,12.49,12.5,33352,416766,1104],
];
hqChartData.data=data;
callback(hqChartData);
}
}
$(function ()
{
WebFont.load({ custom: { families: ['iconfont'] } }); //预加载下iconfont资源
var klineControl=new KLineChart(document.getElementById('kline'));
klineControl.Create();
})
</script>
</body>
</html>
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址：github.com/jones2000/HQChart