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。

相关文章

MySQL 删除数据详解(最新整理)

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》：本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法： 示例：2.TRUNCATE语句✅ 基本语
阅读更多...
从原理到实战深入理解Java 断言assert

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言（assert）：从原理到实战引言：为什么需要断言？一、断言基础1.1 语
阅读更多...
Java MQTT实战应用

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级（QoS0/1/2）,以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端（Clien
阅读更多...
MyBatisPlus如何优化千万级数据的CRUD

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查
阅读更多...
python实现对数据公钥加密与私钥解密

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分，使用python生成公钥与私钥，然后保存在两个文
阅读更多...
mysql中的数据目录用法及说明

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》：本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后，在安装目录下会有一个data目录，我们创建的数据库、创建的表、插入的
阅读更多...
在Spring Boot中集成RabbitMQ的实战记录

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者（Producer）配置1. 创建 Spr
阅读更多...
深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现
阅读更多...
springboot如何通过http动态操作xxl-job任务

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》：本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-
阅读更多...
Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》：本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面，查看左下角从左
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2