拓冰网站定制 
前端图表库金融科技【免费下载链接】HQChartHQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据替换接口项目地址https://gitcode.com/gh_mirrors/hq/HQChart点击查看免费下载HQChart 是一款支持 H5、微信小程序的行情图表插件覆盖沪深、港股、数字货币、期货、美股等市场。本篇文章以 K线图数据格式详解 为核心系统讲解 HQChart 的 K 线数据对接机制从 NetworkFilter 数据拦截回调的触发原理、7 类数据请求名称到日线全量/实时、流通股本、分钟全量/增量五大数据结构的字段定义与 callback 回传格式并结合仓库源码揭示底层调用链。读完本文你将能够为 HQChart 接入任意第三方行情数据源写出规范、可运行的 K 线数据对接代码。一、K 线数据对接流程与 NetworkFilter 回调1.1 数据对接核心机制HQChart 的所有数据都通过NetworkFilter数据拦截回调获取。其核心原则是按需触发图形显示了什么数据就会触发对应的 NetworkFilter 请求图形没有使用的数据不会触发。统一入口NetworkFilter回调函数通过SetOption设置挂在 option 顶层属性上随chart.SetOption(option)一次性传入。从源码看这一机制在 webhqchart/umychart.js 中实现得非常直观——图表实例化时从 option 读取回调并赋值if (option.NetworkFilter) chart.NetworkFilter option.NetworkFilter;而在各数据请求函数内部如RequestHistoryData见 webhqchart/umychart.jsHQChart 会构造一个包含请求信息的obj对象调用this.NetworkFilter(obj, callback)如果上层在回调里设置了obj.PreventDefault true插件就跳过内置的默认JSNetwork.HttpRequest网络请求完全采用外部数据this.NetworkFilter(obj, function(data) { ... }); if (obj.PreventDefault true) return; //已被上层替换,不调用默认的网络请求回调函数签名// data 请求的品种信息如品种代码、复权、周期等信息 // callback 把数据给 HQChart 插件的回调函数 function(data, callback) { //1. 从data获取需要请求的品种代码 复权周期等信息 //2. 请求数据 并把数据转成HQChart数据格式 //3. 通过callback回调把数据在传给HQChart插件。 }回调入参 data 的结构以日线全量请求为例从 webhqchart/umychart.js 的构造代码可以看到插件传入 NetworkFilter 的data对象包含以下字段字段说明Name数据请求名称形如KLineChartContainer::RequestHistoryData类名::函数名Explain请求数据的中文说明如日K数据、1分钟K线数据Request.Url插件默认的请求地址外部对接时可忽略Request.Data请求参数含symbol品种代码、period周期、right复权、count请求数量、dateRange本地数据范围等Self图表容器实例引用PreventDefault布尔值初始为 false外部处理完数据后置为true阻止插件走默认网络请求需要特别说明data.Request.Data在全量数据下载类请求中symbol是字符串如000001.sh而在实时数据更新类请求中symbol是数组可能包含叠加股票这一点在对接时务必区分详见下文各示例。1.2 最简示例原生 JS 方式// 1. 创建图表实例 var divKLine document.getElementById(KLineCtrl); var chart JSChart.Init(divKLine, false, true); //注意: 原生方式不要加HQChart.Chart.前缀这个是npm方式引入才需要 // 2. 配置图表基础参数 var option { Type: 历史K线图, //历史K线图, 历史K线图横屏 Windows: //窗口指标 [ { Index: MA }, { Index: VOL }, { Index: MACD }, ], Symbol: 000001.sh, KLine: //K线设置 { Right: 0, //复权 0 不复权 1 前复权 2 后复权 Period: 0, //周期 0 日线 1 周线 2 月线 3 年线 }, //数据对接函数 NetworkFilter: (data, callback) { console.log([NetworkFilter] ${data.Name} - ${data.Explain}); //根据不同的data.Name(数据名称) 请求不同的接口数据 switch (data.Name) { //K线图 case KLineChartContainer::RequestHistoryData: //日线全量数据下载 //调用 K线日线全量数据处理函数 break; case KLineChartContainer::RequestRealtimeData: //日线实时数据更新 break; //.......................... } } } chart.SetOption(option);1.3 最简示例Vue2 / NPM 方式NPM 工程中引入hqchart包与内置资源后通过HQChart.Chart.JSChart.Init创建实例其余参数结构与原生方式完全一致template div idKLine refKLine stylewidth:100%;height:100% div idKLineChart refKLineChart/div /div /template script typetext/javascript import HQChart from hqchart; import hqchart/src/jscommon/umychart.resource/font/drawtool/iconfont.css; import hqchart/src/jscommon/umychart.resource/css/tools.css // 1. 创建图表实例 var chart HQChart.Chart.JSChart.Init(this.$refs.KLineChart); // 2. 配置图表基础参数 var option { Type: 历史K线图, //历史K线图, 历史K线图横屏 Windows: //窗口指标 [ { Index: MA }, { Index: VOL }, { Index: MACD }, ], Symbol: 000001.sh, KLine: //K线设置 { Right: 0, //复权 0 不复权 1 前复权 2 后复权 Period: 0, //周期 0 日线 1 周线 2 月线 3 年线 }, NetworkFilter: (data, callback) { console.log([NetworkFilter] ${data.Name} - ${data.Explain}); //根据不同的data.Name(数据名称) 请求不同的接口数据 switch (data.Name) { //K线图 case KLineChartContainer::RequestHistoryData: //日线全量数据下载 //调用 K线日线全量数据处理函数 break; case KLineChartContainer::RequestRealtimeData: //日线实时数据更新 break; //.......................... } } } chart.SetOption(this.Option); /script style #KLineChart { left:0px; top:0px; position: relative; width:100%; height:100%; } /style1.4 数据名称详解NetworkFilter 分发表NetworkFilter 回调中通过data.Name区分不同的数据请求一张表完整覆盖 K 线图涉及的全部数据名称数据名称说明数据格式KLineChartContainer::RequestHistoryData日线全量数据下载详见 2.1 日线全量数据下载KLineChartContainer::RequestRealtimeData日线实时数据更新详见 2.2 日线实时数据更新KLineChartContainer::RequestFlowCapitalData流通股本详见 2.3 流通股本KLineChartContainer::ReqeustHistoryMinuteData分钟全量数据下载详见 2.4 分钟全量数据下载KLineChartContainer::RequestMinuteRealtimeData分钟增量数据更新详见 2.5 分钟增量数据更新KLineChartContainer::RequestOverlayHistoryData叠加股票日线—KLineChartContainer::RequestOverlayHistoryMinuteData分钟K叠加股票—注意ReqeustHistoryMinuteData中Reqeust是源码沿用的拼写见 webhqchart/umychart.js对接时必须以该字符串为准。源码中同时保留了this.ReqeustHistoryMinuteData this.RequestHistoryMinuteData的别名兼容webhqchart/umychart.js。除上表外日线分页场景还会触发KLineChartContainer::RequestHistoryPageData日K数据分页见 webhqchart/umychart.js如需支持向前翻页下载历史数据也应在 NetworkFilter 中处理。仓库中 webhqchart/umychart.NetworkFilterTest.js 提供了一套完整的 NetworkFilter 分发与各数据处理器实现如HQData.RequestHistoryData见 webhqchart/umychart.NetworkFilterTest.js是学习数据对接的最佳参考样板。1.5 周期对应数值表data.Request.Data.period字段使用以下数值表示周期数值周期说明日周期0日线1周线2月线3年线9季线21双周22半年40001-49999自定义日线如 40055 表示 55 日周期分钟周期41分钟55分钟615分钟730分钟860分钟11120分钟12240分钟20001-29999自定义分钟如 20251 表示 251 分钟周期秒级周期30001-32000秒周期如 30200 表示 200 秒周期从源码可以印证周期体系的实现RequestHistoryData会把period: this.Period直接透传给 NetworkFilterwebhqchart/umychart.js而接收端用ChartData.IsDayPeriod、ChartData.IsMinutePeriod等函数判断周期归属webhqchart/umychart.js决定数据走日线还是分钟线处理管线。1.6 复权对应数值表data.Request.Data.right字段使用以下数值表示复权方式数值复权说明0不复权1前复权2后复权复权处理由插件内部完成日线数据接收后若bindData.Right 0 bindData.Period 3会调用bindData.GetRightData(bindData.Right, { AlgorithmType: this.RightFormula })计算复权价格webhqchart/umychart.js。也就是说外部对接时只需回传不复权的原始 OHLC 数据即可复权计算交给图表但日 K 数组第 11、12 位也可以可选地提供前/后复权因子用于精确复权。二、K 线数据格式详解2.1 日线全量数据下载KLineChartContainer::RequestHistoryData当 K 线图需要展示日线或由日线聚合的周/月/年线历史数据时触发对应源码 webhqchart/umychart.js。2.1.1 单条日线数据格式日线 K 线数据为定长数组按下标定位字段下标字段说明类型格式0日期整型yyyymmdd 例202607021前收盘价浮点2开盘价浮点3最高浮点4最低浮点5收盘价浮点6成交量浮点7成交金额浮点8持仓量 (期货才有)浮点9结算价 (期货才有)浮点10前结算价 (期货才有)浮点11前复权因子 (可选)浮点12后复权因子 (可选)浮点13是否是虚拟K线 (可选)bool14是否是非交易日 (可选)bool15流通股本 (可选)浮点66指定K线颜色 (可选)object{ Type:0空心 1实心, Line:{ Color:上下线颜色}, Border:{Color:柱子边框颜色}, BarColor:柱子颜色 }字段数量约定数组最少 8 位日期OHLC量额期货品种补足到 11 位含持仓量、结算价、前结算价其余字段按需追加到对应下标。仓库中的实测数据文件如 webhqchart.demo/jscommon/umychart.testdata/DayKLine 目录下的日 K 测试数据、教程/数据样例/日K.json 与 教程/数据样例/日K叠加K线.json都是这一格式的直接范例可作为对接自检基准。2.1.2 callback 数据格式{ symbol: 品种代码, name: 品种名称, data: [] //K线数据 }2.1.3 示例日线全量数据下载//定义一个K线处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestHistoryData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 //获取图形需要请求 股票代码复权周期 信息 var symbol data.Request.Data.symbol; //股票代码 var right data.Request.Data.right; //复权 0 不复权 1 前复权 2 后复权 var period data.Request.Data.period; //周期 0 日线 1 周线 2 月线 3 年线 9 季线 //请求k线信息 //把网络数据转成HQChart插件格式 var hqchartData { name: 浦发银行, symbol: 600000.sh, data: //K线日线数据 [ [ 20231109, 6.9, 6.9, 6.96, 6.88, 6.93, 21910400, 40011 ], [ 20231110, 6.93, 6.91, 6.96, 6.86, 6.88, 20459000, 60003 ] ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }对接要点日线全量请求中data.Request.Data.symbol为字符串必须设置data.PreventDefault true否则插件会继续发起内置的默认 HTTP 请求数据按日期升序排列。2.2 日线实时数据更新KLineChartContainer::RequestRealtimeDataK 线图在交易时间内自动刷新当日最新 K 线时触发。前置条件必须在 SetOption 中开启IsAutoUpdate: true并且当前时间处于该品种的交易时间段内才会触发该请求见 webhqchart/umychart.js。2.2.1 日线实时数据格式与 2.1.1 日线全量数据格式完全一致。2.2.2 callback 数据格式与全量下载不同实时更新必须返回3.0 版数据格式且stock为数组因为可能同时更新叠加股票{ stock: [ { name: 品种代码, symbol: 品种名称, data: [] //K线数据 } ], Ver: 3 //必须是3.0的数据格式 }2.2.3 示例日线实时数据更新//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestRealtimeData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 //获取图形需要请求 股票代码复权周期 信息 var symbol data.Request.Data.symbol[0]; //请求的股票代码(数组) var right data.Request.Data.right; //复权 var period data.Request.Data.period; //周期 var dateRange data.Request.Data.dateRange; //本地K线的数据范围 //请求k线信息 //把网络数据转成HQChart插件格式 var hqchartData { Ver: 3, stock: [ { symbol: 600000.sh, name: 浦发银行, data: [ [20260701, 8.61, 8.58, 8.75, 8.54, 8.65, 53417700, 45678], [20260702, 8.65, 8.71, 8.84, 8.56, 8.7, 71137600, 56734] ] } ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }关键差异提醒实时请求中data.Request.Data.symbol是数组symbol[0]为主股票后续元素为已叠加的股票对应源码中var arySymbol[self.Symbol]; ... arySymbol.push(item.Symbol);的构造逻辑webhqchart/umychart.js。dateRange携带本地已有 K 线的日期范围可用于判断只需增量更新还是全量重拉。callback 必须带Ver: 3。2.3 流通股本KLineChartContainer::RequestFlowCapitalData用于在 K 线图上叠加流通股本曲线如 VOL 指标关联流通股本触发时机为主数据下载完成后源码注释明确主数据下载完再下载见 webhqchart/umychart.js。2.3.1 单条流通股结构{ capital: { a: 3010001, //流通股 某一日的流通股数据 }, date: 19991110, //日期 格式:yyyymmdd 19991110 表示 1999-11-10 }2.3.2 callback 数据格式如果没有流通股数据直接返回{ stock: [], code: 0 }{ stock: [ { symbol: 品种代码, stockday: [], //所有的流通股数据 } ], code: 0, }2.3.3 示例流通股本//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestFlowCapitalData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 var symbol data.Request.Data.symbol[0]; //股票代码 //请求数据 //把网络数据转成HQChart插件格式 var hqchartData { stock: [ { symbol: 600000.sh, stockday: [ { date: 19991110, capital: { a: 320000000 } }, { date: 20011231, capital: { a: 400000000 } } //.......... ], //所有的流通股数据 } ], code: 0 } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }源码补充说明数字货币、期货品种默认不需要下载流通股本源码中RequestFlowCapitalData会先判断MARKET_SUFFIX_NAME.IsBIT(...) || MARKET_SUFFIX_NAME.IsFutures(...)后直接跳过请求webhqchart/umychart.js如需强制下载可通过EnableFlowCapital配置项开启。2.4 分钟全量数据下载KLineChartContainer::ReqeustHistoryMinuteData切换至分钟周期1/5/15/30/60 分钟等或秒级周期时K 线图请求分钟历史数据对应源码 webhqchart/umychart.js请求量由MaxRequestMinuteDayCount控制。2.4.1 单条分钟K线数据格式分钟数据同样为定长数组下标 8 起为时间戳信息与日线结构不同下标字段说明类型格式0日期整型yyyymmdd 例202607021前收盘价浮点2开盘价浮点3最高浮点4最低浮点5收盘价浮点6成交量浮点7成交金额浮点8时间整型分钟周期格式: hhmm 例如 1003 表示 10:03秒级周期格式: hhmmss 如 123106 表示 12:31:069持仓量 (期货才有)浮点10结算价 (期货才有)浮点11前结算价 (期货才有)浮点12前复权因子 (可选)浮点13后复权因子 (可选)浮点66指定K线颜色 (可选)object{ Type:0空心 1实心, Line:{ Color:上下线颜色}, Border:{Color:柱子边框颜色}, BarColor:柱子颜色 }分钟数据样例可参考 教程/数据样例/1分钟K线.json、教程/数据样例/1分钟叠加K线.json。2.4.2 callback 数据格式{ ver: 2.0, //必须填2.0 !!!! name: 品种名称, symbol: 品种代码, data: [], //分钟K线数据 };2.4.3 示例分钟全量数据//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_ReqeustHistoryMinuteData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 var symbol data.Request.Data.symbol; //请求的股票代码 var right data.Request.Data.right; //复权 var period data.Request.Data.period; //周期 //请求数据 //把网络数据转成HQChart插件格式 var hqchartData { ver: 2.0, name: 浦发银行, symbol: 600000.sh, data: [ [20260520, 8.95, 8.93, 8.94, 8.85, 8.86, 12932100, 114922012, 935], [20260520, 8.86, 8.86, 8.96, 8.85, 8.95, 8834100, 78496457, 936] ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }注意示例数据中下标 8 的935、936即分钟时间戳09:35、09:36。分钟全量请求的 callback 必须带ver: 2.0与日线实时数据的Ver: 3不同勿混淆。2.5 分钟增量数据更新KLineChartContainer::RequestMinuteRealtimeData分钟 K 线在交易时间内进行增量更新时触发例如每 5 秒追加一根新的 1 分钟 K 线。2.5.1 单条分钟增量K线数据格式与 2.4.1 单条分钟 K 线数据格式完全一致。2.5.2 callback 数据格式{ Ver: 2, //必须是2的数据格式 name: 品种代码, symbol: 品种名称, data: [], //增量分钟K线数据 overlay: [], //叠加股票的分钟增量数据 可选) }2.5.3 示例分钟增量数据//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestMinuteRealtimeData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 var symbol data.Request.Data.symbol[0]; //请求的股票代码(数组) var right data.Request.Data.right; //复权 var period data.Request.Data.period; //周期 var dateRange data.Request.Data.dateRange; //当前k线数据范围 //请求数据 //把网络数据转成HQChart插件格式 var hqchartData { ver: 2.0, name: 浦发银行, symbol: 600000.sh, data: [ [20260520, 8.95, 8.93, 8.94, 8.85, 8.86, 12932100, 114922012, 935], [20260520, 8.86, 8.86, 8.96, 8.85, 8.95, 8834100, 78496457, 936] ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }分钟增量的实际应用可参考 教程/数据样例/分钟K线增量更新.json对应分钟图与 教程/数据样例/日K增量更新.json对应日线两份样例展示了增量数据在真实行情更新中的回传形态。增量更新需要结合dateRange本地已有 K 线范围判断返回哪些最新数据。三、数据对接速查与常见陷阱将上文要点浓缩为一张速查表便于落地对接请求名称触发时机data.Request.Data.symbol 类型callback 数据版本回传数据结构RequestHistoryData日线全量下载字符串无版本字段{symbol, name, data[]}RequestRealtimeData日线实时更新数组Ver: 3{stock:[{symbol, name, data[]}], Ver:3}RequestFlowCapitalData流通股本数组code: 0{stock:[{symbol, stockday[]}], code:0}ReqeustHistoryMinuteData分钟全量下载字符串ver: 2.0{ver, symbol, name, data[]}RequestMinuteRealtimeData分钟增量更新数组ver: 2.0{ver, symbol, name, data[], overlay[]}对接中最容易踩坑的 5 个点忘记data.PreventDefault true导致插件继续执行内置默认 HTTP 请求产生重复请求或请求失败。版本字段写错日线实时必须是Ver: 3整数分钟数据必须是ver: 2.0浮点写反或缺失会导致数据解析失败。symbol 类型混淆全量下载是字符串实时更新是数组取值方式不同。日期格式错误必须为yyyymmdd的整数如20260702字符串日期会导致排序与索引错乱。数组字段位错K 线是定长数组按下标取字段新增可选字段必须对齐到文档指定的下标如期货持仓量在第 8 位、分钟时间在第 8 位错位会造成数据串位。四、结语HQChart 的数据对接设计极具工程巧思以NetworkFilter单一回调作为数据出入口以data.Name区分请求类型以data.PreventDefault控制内外数据源切换底层则保留默认 HTTP 请求作为兜底见 webhqchart/umychart.js 的JSNetwork.HttpRequest分支。外部接入方只需遵循本文的 7 类数据名称与 5 套数据结构日线全量/实时、流通股本、分钟全量/增量即可无缝接入沪深、港股、期货、数字货币乃至美股行情源。建议在接入时对照仓库中的 webhqchart/umychart.NetworkFilterTest.js 参考实现与 教程/数据样例 目录下的 JSON 样例逐项校验确保数据结构与字段下标完全符合 HQChart 规范。赞分享前端图表库金融科技【免费下载链接】HQChartHQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据替换接口项目地址https://gitcode.com/gh_mirrors/hq/HQChart点击查看免费下载相关推荐FreeCAD 5 个实战用法从第一张草图到应力分析的快速上手指南FreeCAD 5 个实战用法从第一张草图到应力分析的快速上手指南 FreeCAD 是一款免费、开源、跨平台的 3D 参数化建模软件零件建模、装配、应力分析前端图表库金融科技Swift 演进提案 SE-0012 深度解析为公共库 API 引入 noescape非逃逸闭包标注Swift 演进提案 SE 0012 深度解析为公共库 API 引入 noescape 非逃逸闭包标注 导读 本文以 Swift 语言演进提案 SE 0前端图表库金融科技easyquotation港股日K线数据获取历史行情数据分析完整指南easyquotation港股日K线数据获取历史行情数据分析完整指南 想要深入了解港股市场历史走势吗easyquotation作为一款强大的Pytho金融科技网页爬虫上一篇Asuswrt-Merlin-AdGuardHome-Installer 安装与配置指南下一篇pgloader实战技巧指南从入门到精通的PostgreSQL数据迁移创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HQChart K线图数据格式详解：NetworkFilter 数据对接协议与日/分钟K线数据结构完全指南
前端图表库金融科技【免费下载链接】HQChartHQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据替换接口项目地址https://gitcode.com/gh_mirrors/hq/HQChart点击查看免费下载HQChart 是一款支持 H5、微信小程序的行情图表插件覆盖沪深、港股、数字货币、期货、美股等市场。本篇文章以 K线图数据格式详解 为核心系统讲解 HQChart 的 K 线数据对接机制从 NetworkFilter 数据拦截回调的触发原理、7 类数据请求名称到日线全量/实时、流通股本、分钟全量/增量五大数据结构的字段定义与 callback 回传格式并结合仓库源码揭示底层调用链。读完本文你将能够为 HQChart 接入任意第三方行情数据源写出规范、可运行的 K 线数据对接代码。一、K 线数据对接流程与 NetworkFilter 回调1.1 数据对接核心机制HQChart 的所有数据都通过NetworkFilter数据拦截回调获取。其核心原则是按需触发图形显示了什么数据就会触发对应的 NetworkFilter 请求图形没有使用的数据不会触发。统一入口NetworkFilter回调函数通过SetOption设置挂在 option 顶层属性上随chart.SetOption(option)一次性传入。从源码看这一机制在 webhqchart/umychart.js 中实现得非常直观——图表实例化时从 option 读取回调并赋值if (option.NetworkFilter) chart.NetworkFilter option.NetworkFilter;而在各数据请求函数内部如RequestHistoryData见 webhqchart/umychart.jsHQChart 会构造一个包含请求信息的obj对象调用this.NetworkFilter(obj, callback)如果上层在回调里设置了obj.PreventDefault true插件就跳过内置的默认JSNetwork.HttpRequest网络请求完全采用外部数据this.NetworkFilter(obj, function(data) { ... }); if (obj.PreventDefault true) return; //已被上层替换,不调用默认的网络请求回调函数签名// data 请求的品种信息如品种代码、复权、周期等信息 // callback 把数据给 HQChart 插件的回调函数 function(data, callback) { //1. 从data获取需要请求的品种代码 复权周期等信息 //2. 请求数据 并把数据转成HQChart数据格式 //3. 通过callback回调把数据在传给HQChart插件。 }回调入参 data 的结构以日线全量请求为例从 webhqchart/umychart.js 的构造代码可以看到插件传入 NetworkFilter 的data对象包含以下字段字段说明Name数据请求名称形如KLineChartContainer::RequestHistoryData类名::函数名Explain请求数据的中文说明如日K数据、1分钟K线数据Request.Url插件默认的请求地址外部对接时可忽略Request.Data请求参数含symbol品种代码、period周期、right复权、count请求数量、dateRange本地数据范围等Self图表容器实例引用PreventDefault布尔值初始为 false外部处理完数据后置为true阻止插件走默认网络请求需要特别说明data.Request.Data在全量数据下载类请求中symbol是字符串如000001.sh而在实时数据更新类请求中symbol是数组可能包含叠加股票这一点在对接时务必区分详见下文各示例。1.2 最简示例原生 JS 方式// 1. 创建图表实例 var divKLine document.getElementById(KLineCtrl); var chart JSChart.Init(divKLine, false, true); //注意: 原生方式不要加HQChart.Chart.前缀这个是npm方式引入才需要 // 2. 配置图表基础参数 var option { Type: 历史K线图, //历史K线图, 历史K线图横屏 Windows: //窗口指标 [ { Index: MA }, { Index: VOL }, { Index: MACD }, ], Symbol: 000001.sh, KLine: //K线设置 { Right: 0, //复权 0 不复权 1 前复权 2 后复权 Period: 0, //周期 0 日线 1 周线 2 月线 3 年线 }, //数据对接函数 NetworkFilter: (data, callback) { console.log([NetworkFilter] ${data.Name} - ${data.Explain}); //根据不同的data.Name(数据名称) 请求不同的接口数据 switch (data.Name) { //K线图 case KLineChartContainer::RequestHistoryData: //日线全量数据下载 //调用 K线日线全量数据处理函数 break; case KLineChartContainer::RequestRealtimeData: //日线实时数据更新 break; //.......................... } } } chart.SetOption(option);1.3 最简示例Vue2 / NPM 方式NPM 工程中引入hqchart包与内置资源后通过HQChart.Chart.JSChart.Init创建实例其余参数结构与原生方式完全一致template div idKLine refKLine stylewidth:100%;height:100% div idKLineChart refKLineChart/div /div /template script typetext/javascript import HQChart from hqchart; import hqchart/src/jscommon/umychart.resource/font/drawtool/iconfont.css; import hqchart/src/jscommon/umychart.resource/css/tools.css // 1. 创建图表实例 var chart HQChart.Chart.JSChart.Init(this.$refs.KLineChart); // 2. 配置图表基础参数 var option { Type: 历史K线图, //历史K线图, 历史K线图横屏 Windows: //窗口指标 [ { Index: MA }, { Index: VOL }, { Index: MACD }, ], Symbol: 000001.sh, KLine: //K线设置 { Right: 0, //复权 0 不复权 1 前复权 2 后复权 Period: 0, //周期 0 日线 1 周线 2 月线 3 年线 }, NetworkFilter: (data, callback) { console.log([NetworkFilter] ${data.Name} - ${data.Explain}); //根据不同的data.Name(数据名称) 请求不同的接口数据 switch (data.Name) { //K线图 case KLineChartContainer::RequestHistoryData: //日线全量数据下载 //调用 K线日线全量数据处理函数 break; case KLineChartContainer::RequestRealtimeData: //日线实时数据更新 break; //.......................... } } } chart.SetOption(this.Option); /script style #KLineChart { left:0px; top:0px; position: relative; width:100%; height:100%; } /style1.4 数据名称详解NetworkFilter 分发表NetworkFilter 回调中通过data.Name区分不同的数据请求一张表完整覆盖 K 线图涉及的全部数据名称数据名称说明数据格式KLineChartContainer::RequestHistoryData日线全量数据下载详见 2.1 日线全量数据下载KLineChartContainer::RequestRealtimeData日线实时数据更新详见 2.2 日线实时数据更新KLineChartContainer::RequestFlowCapitalData流通股本详见 2.3 流通股本KLineChartContainer::ReqeustHistoryMinuteData分钟全量数据下载详见 2.4 分钟全量数据下载KLineChartContainer::RequestMinuteRealtimeData分钟增量数据更新详见 2.5 分钟增量数据更新KLineChartContainer::RequestOverlayHistoryData叠加股票日线—KLineChartContainer::RequestOverlayHistoryMinuteData分钟K叠加股票—注意ReqeustHistoryMinuteData中Reqeust是源码沿用的拼写见 webhqchart/umychart.js对接时必须以该字符串为准。源码中同时保留了this.ReqeustHistoryMinuteData this.RequestHistoryMinuteData的别名兼容webhqchart/umychart.js。除上表外日线分页场景还会触发KLineChartContainer::RequestHistoryPageData日K数据分页见 webhqchart/umychart.js如需支持向前翻页下载历史数据也应在 NetworkFilter 中处理。仓库中 webhqchart/umychart.NetworkFilterTest.js 提供了一套完整的 NetworkFilter 分发与各数据处理器实现如HQData.RequestHistoryData见 webhqchart/umychart.NetworkFilterTest.js是学习数据对接的最佳参考样板。1.5 周期对应数值表data.Request.Data.period字段使用以下数值表示周期数值周期说明日周期0日线1周线2月线3年线9季线21双周22半年40001-49999自定义日线如 40055 表示 55 日周期分钟周期41分钟55分钟615分钟730分钟860分钟11120分钟12240分钟20001-29999自定义分钟如 20251 表示 251 分钟周期秒级周期30001-32000秒周期如 30200 表示 200 秒周期从源码可以印证周期体系的实现RequestHistoryData会把period: this.Period直接透传给 NetworkFilterwebhqchart/umychart.js而接收端用ChartData.IsDayPeriod、ChartData.IsMinutePeriod等函数判断周期归属webhqchart/umychart.js决定数据走日线还是分钟线处理管线。1.6 复权对应数值表data.Request.Data.right字段使用以下数值表示复权方式数值复权说明0不复权1前复权2后复权复权处理由插件内部完成日线数据接收后若bindData.Right 0 bindData.Period 3会调用bindData.GetRightData(bindData.Right, { AlgorithmType: this.RightFormula })计算复权价格webhqchart/umychart.js。也就是说外部对接时只需回传不复权的原始 OHLC 数据即可复权计算交给图表但日 K 数组第 11、12 位也可以可选地提供前/后复权因子用于精确复权。二、K 线数据格式详解2.1 日线全量数据下载KLineChartContainer::RequestHistoryData当 K 线图需要展示日线或由日线聚合的周/月/年线历史数据时触发对应源码 webhqchart/umychart.js。2.1.1 单条日线数据格式日线 K 线数据为定长数组按下标定位字段下标字段说明类型格式0日期整型yyyymmdd 例202607021前收盘价浮点2开盘价浮点3最高浮点4最低浮点5收盘价浮点6成交量浮点7成交金额浮点8持仓量 (期货才有)浮点9结算价 (期货才有)浮点10前结算价 (期货才有)浮点11前复权因子 (可选)浮点12后复权因子 (可选)浮点13是否是虚拟K线 (可选)bool14是否是非交易日 (可选)bool15流通股本 (可选)浮点66指定K线颜色 (可选)object{ Type:0空心 1实心, Line:{ Color:上下线颜色}, Border:{Color:柱子边框颜色}, BarColor:柱子颜色 }字段数量约定数组最少 8 位日期OHLC量额期货品种补足到 11 位含持仓量、结算价、前结算价其余字段按需追加到对应下标。仓库中的实测数据文件如 webhqchart.demo/jscommon/umychart.testdata/DayKLine 目录下的日 K 测试数据、教程/数据样例/日K.json 与 教程/数据样例/日K叠加K线.json都是这一格式的直接范例可作为对接自检基准。2.1.2 callback 数据格式{ symbol: 品种代码, name: 品种名称, data: [] //K线数据 }2.1.3 示例日线全量数据下载//定义一个K线处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestHistoryData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 //获取图形需要请求 股票代码复权周期 信息 var symbol data.Request.Data.symbol; //股票代码 var right data.Request.Data.right; //复权 0 不复权 1 前复权 2 后复权 var period data.Request.Data.period; //周期 0 日线 1 周线 2 月线 3 年线 9 季线 //请求k线信息 //把网络数据转成HQChart插件格式 var hqchartData { name: 浦发银行, symbol: 600000.sh, data: //K线日线数据 [ [ 20231109, 6.9, 6.9, 6.96, 6.88, 6.93, 21910400, 40011 ], [ 20231110, 6.93, 6.91, 6.96, 6.86, 6.88, 20459000, 60003 ] ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }对接要点日线全量请求中data.Request.Data.symbol为字符串必须设置data.PreventDefault true否则插件会继续发起内置的默认 HTTP 请求数据按日期升序排列。2.2 日线实时数据更新KLineChartContainer::RequestRealtimeDataK 线图在交易时间内自动刷新当日最新 K 线时触发。前置条件必须在 SetOption 中开启IsAutoUpdate: true并且当前时间处于该品种的交易时间段内才会触发该请求见 webhqchart/umychart.js。2.2.1 日线实时数据格式与 2.1.1 日线全量数据格式完全一致。2.2.2 callback 数据格式与全量下载不同实时更新必须返回3.0 版数据格式且stock为数组因为可能同时更新叠加股票{ stock: [ { name: 品种代码, symbol: 品种名称, data: [] //K线数据 } ], Ver: 3 //必须是3.0的数据格式 }2.2.3 示例日线实时数据更新//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestRealtimeData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 //获取图形需要请求 股票代码复权周期 信息 var symbol data.Request.Data.symbol[0]; //请求的股票代码(数组) var right data.Request.Data.right; //复权 var period data.Request.Data.period; //周期 var dateRange data.Request.Data.dateRange; //本地K线的数据范围 //请求k线信息 //把网络数据转成HQChart插件格式 var hqchartData { Ver: 3, stock: [ { symbol: 600000.sh, name: 浦发银行, data: [ [20260701, 8.61, 8.58, 8.75, 8.54, 8.65, 53417700, 45678], [20260702, 8.65, 8.71, 8.84, 8.56, 8.7, 71137600, 56734] ] } ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }关键差异提醒实时请求中data.Request.Data.symbol是数组symbol[0]为主股票后续元素为已叠加的股票对应源码中var arySymbol[self.Symbol]; ... arySymbol.push(item.Symbol);的构造逻辑webhqchart/umychart.js。dateRange携带本地已有 K 线的日期范围可用于判断只需增量更新还是全量重拉。callback 必须带Ver: 3。2.3 流通股本KLineChartContainer::RequestFlowCapitalData用于在 K 线图上叠加流通股本曲线如 VOL 指标关联流通股本触发时机为主数据下载完成后源码注释明确主数据下载完再下载见 webhqchart/umychart.js。2.3.1 单条流通股结构{ capital: { a: 3010001, //流通股 某一日的流通股数据 }, date: 19991110, //日期 格式:yyyymmdd 19991110 表示 1999-11-10 }2.3.2 callback 数据格式如果没有流通股数据直接返回{ stock: [], code: 0 }{ stock: [ { symbol: 品种代码, stockday: [], //所有的流通股数据 } ], code: 0, }2.3.3 示例流通股本//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestFlowCapitalData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 var symbol data.Request.Data.symbol[0]; //股票代码 //请求数据 //把网络数据转成HQChart插件格式 var hqchartData { stock: [ { symbol: 600000.sh, stockday: [ { date: 19991110, capital: { a: 320000000 } }, { date: 20011231, capital: { a: 400000000 } } //.......... ], //所有的流通股数据 } ], code: 0 } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }源码补充说明数字货币、期货品种默认不需要下载流通股本源码中RequestFlowCapitalData会先判断MARKET_SUFFIX_NAME.IsBIT(...) || MARKET_SUFFIX_NAME.IsFutures(...)后直接跳过请求webhqchart/umychart.js如需强制下载可通过EnableFlowCapital配置项开启。2.4 分钟全量数据下载KLineChartContainer::ReqeustHistoryMinuteData切换至分钟周期1/5/15/30/60 分钟等或秒级周期时K 线图请求分钟历史数据对应源码 webhqchart/umychart.js请求量由MaxRequestMinuteDayCount控制。2.4.1 单条分钟K线数据格式分钟数据同样为定长数组下标 8 起为时间戳信息与日线结构不同下标字段说明类型格式0日期整型yyyymmdd 例202607021前收盘价浮点2开盘价浮点3最高浮点4最低浮点5收盘价浮点6成交量浮点7成交金额浮点8时间整型分钟周期格式: hhmm 例如 1003 表示 10:03秒级周期格式: hhmmss 如 123106 表示 12:31:069持仓量 (期货才有)浮点10结算价 (期货才有)浮点11前结算价 (期货才有)浮点12前复权因子 (可选)浮点13后复权因子 (可选)浮点66指定K线颜色 (可选)object{ Type:0空心 1实心, Line:{ Color:上下线颜色}, Border:{Color:柱子边框颜色}, BarColor:柱子颜色 }分钟数据样例可参考 教程/数据样例/1分钟K线.json、教程/数据样例/1分钟叠加K线.json。2.4.2 callback 数据格式{ ver: 2.0, //必须填2.0 !!!! name: 品种名称, symbol: 品种代码, data: [], //分钟K线数据 };2.4.3 示例分钟全量数据//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_ReqeustHistoryMinuteData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 var symbol data.Request.Data.symbol; //请求的股票代码 var right data.Request.Data.right; //复权 var period data.Request.Data.period; //周期 //请求数据 //把网络数据转成HQChart插件格式 var hqchartData { ver: 2.0, name: 浦发银行, symbol: 600000.sh, data: [ [20260520, 8.95, 8.93, 8.94, 8.85, 8.86, 12932100, 114922012, 935], [20260520, 8.86, 8.86, 8.96, 8.85, 8.95, 8834100, 78496457, 936] ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }注意示例数据中下标 8 的935、936即分钟时间戳09:35、09:36。分钟全量请求的 callback 必须带ver: 2.0与日线实时数据的Ver: 3不同勿混淆。2.5 分钟增量数据更新KLineChartContainer::RequestMinuteRealtimeData分钟 K 线在交易时间内进行增量更新时触发例如每 5 秒追加一根新的 1 分钟 K 线。2.5.1 单条分钟增量K线数据格式与 2.4.1 单条分钟 K 线数据格式完全一致。2.5.2 callback 数据格式{ Ver: 2, //必须是2的数据格式 name: 品种代码, symbol: 品种名称, data: [], //增量分钟K线数据 overlay: [], //叠加股票的分钟增量数据 可选) }2.5.3 示例分钟增量数据//定义一个处理函数 在NetworkFilter回调里面调用 function Process_KLine_RequestMinuteRealtimeData(data, callback, option) { data.PreventDefault true; //通知插件数据已经外部处理好了, 不需要在内部处理了 var symbol data.Request.Data.symbol[0]; //请求的股票代码(数组) var right data.Request.Data.right; //复权 var period data.Request.Data.period; //周期 var dateRange data.Request.Data.dateRange; //当前k线数据范围 //请求数据 //把网络数据转成HQChart插件格式 var hqchartData { ver: 2.0, name: 浦发银行, symbol: 600000.sh, data: [ [20260520, 8.95, 8.93, 8.94, 8.85, 8.86, 12932100, 114922012, 935], [20260520, 8.86, 8.86, 8.96, 8.85, 8.95, 8834100, 78496457, 936] ] } callback(hqchartData); //把数据通过回调函数回传给HQChart插件 }分钟增量的实际应用可参考 教程/数据样例/分钟K线增量更新.json对应分钟图与 教程/数据样例/日K增量更新.json对应日线两份样例展示了增量数据在真实行情更新中的回传形态。增量更新需要结合dateRange本地已有 K 线范围判断返回哪些最新数据。三、数据对接速查与常见陷阱将上文要点浓缩为一张速查表便于落地对接请求名称触发时机data.Request.Data.symbol 类型callback 数据版本回传数据结构RequestHistoryData日线全量下载字符串无版本字段{symbol, name, data[]}RequestRealtimeData日线实时更新数组Ver: 3{stock:[{symbol, name, data[]}], Ver:3}RequestFlowCapitalData流通股本数组code: 0{stock:[{symbol, stockday[]}], code:0}ReqeustHistoryMinuteData分钟全量下载字符串ver: 2.0{ver, symbol, name, data[]}RequestMinuteRealtimeData分钟增量更新数组ver: 2.0{ver, symbol, name, data[], overlay[]}对接中最容易踩坑的 5 个点忘记data.PreventDefault true导致插件继续执行内置默认 HTTP 请求产生重复请求或请求失败。版本字段写错日线实时必须是Ver: 3整数分钟数据必须是ver: 2.0浮点写反或缺失会导致数据解析失败。symbol 类型混淆全量下载是字符串实时更新是数组取值方式不同。日期格式错误必须为yyyymmdd的整数如20260702字符串日期会导致排序与索引错乱。数组字段位错K 线是定长数组按下标取字段新增可选字段必须对齐到文档指定的下标如期货持仓量在第 8 位、分钟时间在第 8 位错位会造成数据串位。四、结语HQChart 的数据对接设计极具工程巧思以NetworkFilter单一回调作为数据出入口以data.Name区分请求类型以data.PreventDefault控制内外数据源切换底层则保留默认 HTTP 请求作为兜底见 webhqchart/umychart.js 的JSNetwork.HttpRequest分支。外部接入方只需遵循本文的 7 类数据名称与 5 套数据结构日线全量/实时、流通股本、分钟全量/增量即可无缝接入沪深、港股、期货、数字货币乃至美股行情源。建议在接入时对照仓库中的 webhqchart/umychart.NetworkFilterTest.js 参考实现与 教程/数据样例 目录下的 JSON 样例逐项校验确保数据结构与字段下标完全符合 HQChart 规范。赞分享前端图表库金融科技【免费下载链接】HQChartHQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,通达信语法,(麦语法),第3方数据替换接口项目地址https://gitcode.com/gh_mirrors/hq/HQChart点击查看免费下载相关推荐FreeCAD 5 个实战用法从第一张草图到应力分析的快速上手指南FreeCAD 5 个实战用法从第一张草图到应力分析的快速上手指南 FreeCAD 是一款免费、开源、跨平台的 3D 参数化建模软件零件建模、装配、应力分析前端图表库金融科技Swift 演进提案 SE-0012 深度解析为公共库 API 引入 noescape非逃逸闭包标注Swift 演进提案 SE 0012 深度解析为公共库 API 引入 noescape 非逃逸闭包标注 导读 本文以 Swift 语言演进提案 SE 0前端图表库金融科技easyquotation港股日K线数据获取历史行情数据分析完整指南easyquotation港股日K线数据获取历史行情数据分析完整指南 想要深入了解港股市场历史走势吗easyquotation作为一款强大的Pytho金融科技网页爬虫上一篇Asuswrt-Merlin-AdGuardHome-Installer 安装与配置指南下一篇pgloader实战技巧指南从入门到精通的PostgreSQL数据迁移创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考