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数据验证神器Pydantic库的使用和实践中的避坑指南

Python数据验证神器Pydantic库的使用和实践中的避坑指南

《Python数据验证神器Pydantic库的使用和实践中的避坑指南》Pydantic是一个用于数据验证和设置的库,可以显著简化API接口开发,文章通过一个实际案例,展示了Pydantic如何在生产环... 目录1️⃣ 崩溃时刻：当你的API接口又双叒崩了！2️⃣ 神兵天降：3行代码解决验证难题3️⃣ 深度
阅读更多...
MySQL快速复制一张表的四种核心方法(包括表结构和数据)

MySQL快速复制一张表的四种核心方法(包括表结构和数据)

《MySQL快速复制一张表的四种核心方法(包括表结构和数据)》本文详细介绍了四种复制MySQL表（结构+数据）的方法,并对每种方法进行了对比分析,适用于不同场景和数据量的复制需求,特别是针对超大表（1... 目录一、mysql 复制表（结构+数据）的 4 种核心方法（面试结构化回答）方法 1：CREATE
阅读更多...
JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》：本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介：一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加
阅读更多...
详解C++ 存储二进制数据容器的几种方法

详解C++ 存储二进制数据容器的几种方法

《详解C++存储二进制数据容器的几种方法》本文主要介绍了详解C++存储二进制数据容器,包括std::vector、std::array、std::string、std::bitset和std::ve... 目录1.std::vector<uint8_t>（最常用）特点：适用场景：示例：2.std::arra
阅读更多...
Python + Streamlit项目部署方案超详细教程(非Docker版)

Python + Streamlit项目部署方案超详细教程(非Docker版)

《Python+Streamlit项目部署方案超详细教程(非Docker版)》Streamlit是一款强大的Python框架,专为机器学习及数据可视化打造,：本文主要介绍Python+St... 目录一、针对 Alibaba Cloud linux/Centos 系统的完整部署方案1. 服务器基础配置（阿里
阅读更多...
Java 队列Queue从原理到实战指南

Java 队列Queue从原理到实战指南

《Java队列Queue从原理到实战指南》本文介绍了Java中队列（Queue）的底层实现、常见方法及其区别,通过LinkedList和ArrayDeque的实现,以及循环队列的概念,展示了如何高效... 目录一、队列的认识队列的底层与集合框架常见的队列方法插入元素方法对比（add和offer）移除元素方法
阅读更多...
Spring Boot基于 JWT 优化 Spring Security 无状态登录实战指南

Spring Boot基于 JWT 优化 Spring Security 无状态登录实战指南

《SpringBoot基于JWT优化SpringSecurity无状态登录实战指南》本文介绍如何使用JWT优化SpringSecurity实现无状态登录,提高接口安全性,并通过实际操作步骤... 目录Spring Boot 实战：基于 JWT 优化 Spring Security 无状态登录一、先搞懂：为什
阅读更多...
C++11中的包装器实战案例

C++11中的包装器实战案例

《C++11中的包装器实战案例》本文给大家介绍C++11中的包装器实战案例,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录引言1.std::function1.1.什么是std::function1.2.核心用法1.2.1.包装普通函数1.2.
阅读更多...
Nginx概念、架构、配置与虚拟主机实战操作指南

Nginx概念、架构、配置与虚拟主机实战操作指南

《Nginx概念、架构、配置与虚拟主机实战操作指南》Nginx是一个高性能的HTTP服务器、反向代理服务器、负载均衡器和IMAP/POP3/SMTP代理服务器,它支持高并发连接,资源占用低,功能全面且... 目录Nginx 深度解析：概念、架构、配置与虚拟主机实战一、Nginx 的概念二、Nginx 的特点
阅读更多...
Spring IOC核心原理详解与运用实战教程

Spring IOC核心原理详解与运用实战教程

《SpringIOC核心原理详解与运用实战教程》本文详细解析了SpringIOC容器的核心原理,包括BeanFactory体系、依赖注入机制、循环依赖解决和三级缓存机制,同时,介绍了SpringBo... 目录1. Spring IOC核心原理深度解析1.1 BeanFactory体系与内部结构1.1.1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2