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。

相关文章

SpringBoot集成redisson实现延时队列教程

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配
阅读更多...
SpringBoot分段处理List集合多线程批量插入数据方式

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案：通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建
阅读更多...
PHP轻松处理千万行数据的方法详解

PHP轻松处理千万行数据的方法详解

《PHP轻松处理千万行数据的方法详解》说到处理大数据集,PHP通常不是第一个想到的语言,但如果你曾经需要处理数百万行数据而不让服务器崩溃或内存耗尽,你就会知道PHP用对了工具有多强大,下面小编就... 目录问题的本质php 中的数据流处理：为什么必不可少生成器：内存高效的迭代方式流量控制：避免系统过载一次性
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
MyBatis分页查询实战案例完整流程

MyBatis分页查询实战案例完整流程

《MyBatis分页查询实战案例完整流程》MyBatis是一个强大的Java持久层框架,支持自定义SQL和高级映射,本案例以员工工资信息管理为例,详细讲解如何在IDEA中使用MyBatis结合Page... 目录1. MyBATis框架简介2. 分页查询原理与应用场景2.1 分页查询的基本原理2.1.1 分
阅读更多...
Nginx部署HTTP/3的实现步骤

Nginx部署HTTP/3的实现步骤

《Nginx部署HTTP/3的实现步骤》本文介绍了在Nginx中部署HTTP/3的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录前提条件第一步：安装必要的依赖库第二步：获取并构建 BoringSSL第三步：获取 Nginx
阅读更多...
使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结
阅读更多...
SpringBoot 多环境开发实战(从配置、管理与控制)

SpringBoot 多环境开发实战(从配置、管理与控制)

《SpringBoot多环境开发实战(从配置、管理与控制)》本文详解SpringBoot多环境配置,涵盖单文件YAML、多文件模式、MavenProfile分组及激活策略,通过优先级控制灵活切换环境... 目录一、多环境开发基础（单文件 YAML 版）（一）配置原理与优势（二）实操示例二、多环境开发多文件版
阅读更多...
MyBatis-plus处理存储json数据过程

MyBatis-plus处理存储json数据过程

《MyBatis-plus处理存储json数据过程》文章介绍MyBatis-Plus3.4.21处理对象与集合的差异：对象可用内置Handler配合autoResultMap,集合需自定义处理器继承F... 目录1、如果是对象2、如果需要转换的是List集合总结对象和集合分两种情况处理，目前我用的MP的版本
阅读更多...
Three.js构建一个 3D 商品展示空间完整实战项目

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,：本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2