HQChart实战教程3-http+ws对接分钟K线数据

本文主要是介绍HQChart实战教程3-http+ws对接分钟K线数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HQChart实战教程3-http+ws对接分钟K线数据

要求
流程图
数据格式
样例

要求

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;                        //数据更新wsthis.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>