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

2023-10-24 23:21
文章标签 实战 数据 教程 http 对接 分钟 ws hqchart

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

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

  • 要求
  • 流程图
  • 数据格式
  • 样例

要求

  1. http下载历史分钟K线数据
  2. 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>

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址
地址：github.com/jones2000/HQChart

这篇关于HQChart实战教程3-http+ws对接分钟K线数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/278470。

相关文章

使用Python将JSON,XML和YAML数据写入Excel文件

使用Python将JSON,XML和YAML数据写入Excel文件

《使用Python将JSON,XML和YAML数据写入Excel文件》JSON、XML和YAML作为主流结构化数据格式,因其层次化表达能力和跨平台兼容性,已成为系统间数据交换的通用载体,本文将介绍如何... 目录如何使用python写入数据到Excel工作表用Python导入jsON数据到Excel工作表用
阅读更多...
Mysql如何将数据按照年月分组的统计

Mysql如何将数据按照年月分组的统计

《Mysql如何将数据按照年月分组的统计》：本文主要介绍Mysql如何将数据按照年月分组的统计方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql将数据按照年月分组的统计要的效果方案总结Mysql将数据按照年月分组的统计要的效果方案① 使用 DA
阅读更多...
鸿蒙中Axios数据请求的封装和配置方法

鸿蒙中Axios数据请求的封装和配置方法

《鸿蒙中Axios数据请求的封装和配置方法》：本文主要介绍鸿蒙中Axios数据请求的封装和配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1.配置权限 应用级权限和系统级权限2.配置网络请求的代码3.下载在Entry中 下载AxIOS4.封装Htt
阅读更多...
python连接本地SQL server详细图文教程

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面：本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.
阅读更多...
Nginx中配置HTTP/2协议的详细指南

Nginx中配置HTTP/2协议的详细指南

《Nginx中配置HTTP/2协议的详细指南》HTTP/2是HTTP协议的下一代版本,旨在提高性能、减少延迟并优化现代网络环境中的通信效率,本文将为大家介绍Nginx配置HTTP/2协议想详细步骤,需... 目录一、HTTP/2 协议概述1.HTTP/22. HTTP/2 的核心特性3. HTTP/2 的优
阅读更多...
Python 安装和配置flask, flask_cors的图文教程

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》：本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python自建轻量级的HTTP调试工具

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建
阅读更多...
Ubuntu中远程连接Mysql数据库的详细图文教程

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.
阅读更多...
Python获取中国节假日数据记录入JSON文件

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢？我尝试一种更为智能的方法：P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2