1. 十字光标右侧按钮点击增加刻度线这个交互到底解决什么问题HQChart 的十字光标右侧按钮默认只是一个视觉锚点鼠标移上去能看到一个小圆点但点下去没有任何业务反馈。很多做 K 线图二次开发的朋友会卡在同一个地方想让用户点一下按钮就在当前价格位置钉一条横线刻度方便做支撑压力位标记、成本线标注、或者多空分界参考但翻遍文档只找到RightButton.Enable这个开关点完之后怎么拿到价格、怎么把线画上去链路是断的。这个场景的真实需求很具体。做交易复盘工具时用户希望把十字光标停在某个价位点右侧按钮图表上立刻多一条带价格标签的水平线再点一次在另一个价位再加一条多条线叠加形成价格带。做行情教学演示时讲师需要快速在图上标出关键价位不能每次都去右键菜单里翻半天。做量化信号可视化时程序算出的触发价需要人工在图上确认点一下按钮就能把当前光标价格固化下来。HQChart 本身提供了完整的画图工具能力ChartDrawPriceLineV2就是专门画价格横线的类问题在于大多数人不知道怎么把「按钮点击事件」和「画图工具注入」这两件事接起来。中间缺的环节有三个事件回调里data对象的结构、Button.Data.YValue和FrameID的取值含义、以及AddChartDrawPicture的调用时机。这三个点打通整条链路就顺了。我试过在多个 K 线项目里落地这个交互实测下来最稳的路径就是开启按钮 → 注册ON_CLICK_CROSSCURSOR_RIGHT事件 → 回调里读data.Button.Data→ 构造画图对象 → 调AddChartDrawPicture。整个过程不需要改 HQChart 源码全部通过公开 API 完成。下面按这条链路拆开讲每一步都给可复制的代码。适合谁看已经用 HQChart 搭起基础 K 线图、能正常显示十字光标、现在想加自定义交互的前端开发或者正在做交易标注类产品、需要快速验证刻度线方案的技术负责人。如果你还没跑通 HQChart 的基础渲染建议先把官方 demo 跑起来再回来看这篇。核心检索词先明确HQChart 十字光标右侧按钮点击增加刻度线本质是「事件驱动 画图工具动态注入」的组合。理解了这个模式后面加箭头、加矩形、加文字标注都是同一套逻辑。2. TaoToken 前置准备把模型对话和编码能力接进来在写刻度线代码之前先把开发环境里的 AI 辅助能力配好。HQChart 的事件回调调试经常需要反复看data对象结构用模型对话快速问清楚字段含义能省不少时间。TaoToken 提供统一的 API 入口官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 端点是 https://taotoken.net/api 注意 API 地址不带 UTM 参数。先说清楚 TaoToken 在这里的角色它是一个模型调用聚合层你拿一个 Key 就能访问多种模型不用分别去各家注册。对于 HQChart 这种偏前端交互的调试场景主要用两个能力——模型对话用来问 API 字段和报错含义Coding Plan 用来在编辑器里做代码补全和片段生成。拿 Key 的路径很直接进控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 登录后在 API Keys 页面创建新 Key。创建时建议按项目命名比如hqchart-debug方便后面区分。Key 只显示一次复制后存到本地环境变量里别硬编码进前端代码。模型对话入口在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 打开就能直接对话。调试 HQChart 时我常用它来确认JSCHART_EVENT_ID下有哪些事件常量、ChartDrawPriceLineV2的Value数组支持哪些字段。这类问题文档里写得散直接问模型比翻源码快。如果你要在 VS Code 或 Cursor 里做 HQChart 二次开发建议开 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它提供的是编码场景的模型调用额度配合编辑器插件用写事件回调时补全比较顺。注意 Coding Plan 和普通模型对话是分开计费的按自己的使用频率选。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有各语言 SDK 的调用示例。前端项目里如果只是偶尔调一下模型做字段确认直接用 fetch 打 API 就行不用引 SDK。这里要强调一个配置原则Base URL、Key、Model ID 三件套必须配套。Base URL 用https://taotoken.net/apiKey 用你创建的那串Model ID 按文档里列出的填。三者缺一或者对不上请求就会报 401。后面第五节会专门讲这个报错怎么排查。配好之后你在调试 HQChart 回调时遇到data结构看不懂、AddChartDrawPicture不生效这类问题可以直接把代码片段贴进模型对话里问比在搜索引擎里翻半天效率高。但记住模型给的是参考最终要以 HQChart 实际运行结果为准尤其是画图工具的字段名不同版本可能有差异。3. 可复制配置按钮开启、事件注册与画图工具注入这一节是整篇的核心给出从配置到回调的完整代码。按四个环节拆按钮配置、事件绑定、状态读取、刻度线注入。3.1 开启十字光标右侧按钮在Option对象的CorssCursorInfo里加RightButton配置。注意 HQChart 里这个字段拼写是CorssCursorInfo不是CrossCursorInfo少一个 s 就不生效这是很多人踩的第一个坑。this.Option { Type: 历史K线图, // ... 其他配置 CorssCursorInfo: { DateFormatType: 3, HPenType: 1, VPenType: 1, VLineType: 0, RightButton: { Enable: true }, Right: 1 }, // ... 其他配置 };RightButton.Enable: true是按钮显示的总开关。Right: 1控制按钮相对十字光标的位置1 表示在右侧。这两个都配上鼠标移到 K 线上才能看到那个可点击的小按钮。3.2 注册按钮点击事件在Create函数里SetOption之后调AddEventCallback监听JSCHART_EVENT_ID.ON_CLICK_CROSSCURSOR_RIGHTthis.Create function() { this.Chart.SetOption(this.Option); this.Chart.AddEventCallback({ event: JSCHART_EVENT_ID.ON_CLICK_CROSSCURSOR_RIGHT, callback: (event, data, obj) { this.ClickCrossCursor(event, data, obj); } }); };这里obj是图表实例的引用后面调AddChartDrawPicture要用它。data是事件携带的数据对象结构在下一小节展开。3.3 读取十字光标状态回调函数里关键数据都在data.Button.Data下this.ClickCrossCursor function(event, data, obj) { console.log([KLineChart::ClickCrossCursor] event, data, event, data); var button data.Button; // button.Data.YValue —— 点击位置对应的 Y 轴数值价格 // button.Data.FrameID —— 指标窗口索引0 是主图1/2 是副图 };YValue是价格数值不是像素坐标。HQChart 内部已经帮你把鼠标位置换算成了对应窗口的 Y 轴值直接用就行。FrameID决定这条线画在哪个窗口上主图 K 线是 0MACD 副图是 1VOL 副图是 2以此类推。如果你不加判断直接画线会跑到当前按钮所在窗口这通常就是用户期望的行为。3.4 注入刻度线并触发重绘构造画图对象调AddChartDrawPicturethis.ClickCrossCursor function(event, data, obj) { var button data.Button; var drawPicture { ClassName: ChartDrawPriceLineV2, Value: [ { XValue: 0, YValue: button.Data.YValue } ], FrameID: button.Data.FrameID }; obj.AddChartDrawPicture(drawPicture); };ClassName指定用哪个画图工具类ChartDrawPriceLineV2是画价格横线的。Value是数组每个元素描述一个点横线只需要一个 Y 值XValue 填 0 即可。FrameID从button.Data里取保证线画在正确的窗口。AddChartDrawPicture调用后HQChart 会自动触发重绘不需要手动调Update或Redraw。这是它设计得比较顺手的地方——画图工具注入即渲染。3.5 完整可运行示例把上面几段拼起来一个最小可运行的 HTML 文件长这样!DOCTYPE html html head meta charsetutf-8 title十字光标按钮增加刻度线/title link relstylesheet href../jscommon/umychart.resource/css/tools.css / link relstylesheet href../jscommon/umychart.resource/font/iconfont.css / /head body div idkline/div script srccontent/js/jquery.min.js/script script src../jscommon/umychart.console.js/script script src../jscommon/umychart.network.js/script script src../jscommon/umychart.js/script script src../jscommon/umychart.complier.js/script script src../jscommon/umychart.index.data.js/script script src../jscommon/umychart.style.js/script script function KLineChart(divKLine) { this.DivKLine divKLine; this.Chart JSChart.Init(divKLine); this.Option { Type: 历史K线图, Windows: [ { Index: MA, Overlay: true }, { Index: MACD, Modify: true, Change: true, Close: true, Overlay: true }, { Index: VOL, Modify: true, Change: false, Overlay: true, Close: true } ], Symbol: 000001.sz, IsAutoUpdate: false, CorssCursorInfo: { DateFormatType: 3, HPenType: 1, VPenType: 1, VLineType: 0, RightButton: { Enable: true }, Right: 1 }, KLine: { DragMode: 1, Right: 1, Period: 0, MaxReqeustDataCount: 3000, PageSize: 25, IsShowTooltip: true, DrawType: 0 } }; this.Create function() { var self this; $(window).resize(function() { self.OnSize(); }); this.OnSize(); this.Chart.SetOption(this.Option); this.Chart.AddEventCallback({ event: JSCHART_EVENT_ID.ON_CLICK_CROSSCURSOR_RIGHT, callback: (event, data, obj) { this.ClickCrossCursor(event, data, obj); } }); }; this.ClickCrossCursor function(event, data, obj) { console.log([ClickCrossCursor] data, data); var button data.Button; var drawPicture { ClassName: ChartDrawPriceLineV2, Value: [ { XValue: 0, YValue: button.Data.YValue } ], FrameID: button.Data.FrameID }; obj.AddChartDrawPicture(drawPicture); }; this.OnSize function(option) { var height $(window).height() - 50; var width $(window).width(); this.DivKLine.style.width width px; this.DivKLine.style.height height px; this.Chart.OnSize(option); }; } $(function() { var klineControl new KLineChart(document.getElementById(kline)); klineControl.Create(); }); /script /body /html这段代码直接存成.html文件放到 HQChart demo 的目录结构下就能跑。注意资源路径../jscommon/要按你实际的项目结构调整。4. 验证请求与成功结果点击后刻度线数量与位置的手动核对代码写完怎么确认它真的生效了分三步验证。4.1 控制台日志验证打开浏览器开发者工具切到 Console 面板。鼠标移到 K 线上十字光标出现后把鼠标移到右侧按钮上点击。如果事件绑定成功你会看到类似这样的输出[ClickCrossCursor] data {Button: {Data: {YValue: 12.35, FrameID: 0}}, ...}YValue的值应该和你点击位置对应的价格一致。比如你点在 K 线实体中间当前股票价格区间是 12.00 到 12.50那YValue落在 12.2 左右就是对的。如果data是undefined或者Button字段不存在说明事件没绑上回去检查AddEventCallback的event常量拼写。4.2 视觉验证刻度线数量与位置点击一次图上应该出现一条水平横线线的右端带价格标签。再点另一个价位第二条线出现。连续点五次应该有五条线每条线对应一个价格。位置核对方法把十字光标移到某条已画的线上看光标提示框里的价格和线的标签价格对比两者应该一致。如果不一致说明YValue取值有问题可能是FrameID和YValue不匹配——比如你取了主图的 Y 值却画到了副图窗口。4.3 多窗口验证切换到 MACD 副图在副图上点右侧按钮。预期行为是线画在副图窗口内FrameID应该是 1。如果你发现线跑到主图上去了检查button.Data.FrameID是否被正确传递。HQChart 的FrameID从 0 开始编号主图 0第一个副图 1第二个副图 2。4.4 用模型对话辅助排查如果验证过程中遇到data结构和你预期不符可以把 console 里打印的完整对象贴到模型对话里问。入口在 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 。比如问「HQChart 的 ON_CLICK_CROSSCURSOR_RIGHT 回调 data.Button.Data 里有哪些字段」模型能给出字段列表和含义。但注意模型回答可能滞后于你用的 HQChart 版本最终以实际打印为准。验证通过的标准很简单点击 N 次出现 N 条线每条线的价格标签和点击位置一致副图点击画在副图。三条都满足链路就通了。5. 本篇常见错误排查401、local proxy failed、reading choices 与 OAuth这一节把调试过程中最容易撞上的几类报错集中处理。有些是 HQChart 本身的有些是接 TaoToken 时遇到的分开说。5.1 401 Unauthorized这个报错基本只出现在调 TaoToken API 时。原因就三类Key 没传、Key 传错、Base URL 不对。排查顺序先确认请求头里Authorization: Bearer 你的Key格式正确Bearer 后面有一个空格。再确认 Base URL 是https://taotoken.net/api不是官网首页地址。最后确认 Key 没有过期或被删除去控制台 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 看一眼 Key 列表。三件套对照表配置项正确值常见错误Base URLhttps://taotoken.net/api写成官网首页或带 UTM 的地址API Key控制台创建的 sk- 开头串复制时带了空格或换行Model ID文档里列出的模型标识自己编了一个不存在的名字5.2 local proxy failed这个报错通常出现在编辑器插件或本地开发工具里。含义是本地代理层没能把请求转发出去。检查两点一是你的开发工具网络配置里有没有设代理如果有确认代理地址可达二是如果用了 Coding Plan 配合编辑器确认插件里填的 Base URL 和 Key 与 TaoToken 控制台一致。注意这里说的代理是开发工具自身的网络转发配置不是让你去搞什么特殊网络手段。企业内网环境下有些公司会要求走内部网关这种情况找 IT 确认网关地址即可。5.3 reading choices 相关报错如果你在代码里调模型 API 并解析返回遇到Cannot read property choices of undefined这类错误说明返回体结构和你预期的不一样。常见原因是请求没成功返回的是错误对象而不是正常的 completion 结构。先打印完整 response看error字段里写了什么。401 会在这里体现为鉴权失败429 是频率超限。处理方式在解析choices之前先判断response.error是否存在存在就先把错误信息打出来别直接往下取choices[0]。5.4 OAuth 相关报错OAuth 报错一般出现在用 Claude Code 或类似工具做 Anthropic 接口接入时。如果你在配置里看到 OAuth token 相关的提示说明工具在尝试用 OAuth 流程鉴权而 TaoToken 用的是 API Key 模式。这时候需要把鉴权方式从 OAuth 切到 API Key在工具的 settings 里找到对应配置项改掉。Claude Code 接入场景下配置文件通常在~/.claude/settings.json或项目级.claude/settings.json。需要写全三件套{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: 你的Key, ANTHROPIC_MODEL: 文档里列出的模型ID } }Base URL、Key、Model ID 三个都要有缺一个就连不上。改完重启工具生效。5.5 HQChart 侧不生效排查如果 TaoToken 那边没问题但刻度线就是不出现按这个顺序查第一CorssCursorInfo.RightButton.Enable是不是true拼写有没有错。第二AddEventCallback是不是在SetOption之后调的顺序反了事件绑不上。第三JSCHART_EVENT_ID.ON_CLICK_CROSSCURSOR_RIGHT这个常量在你用的 HQChart 版本里是否存在老版本可能没有。第四AddChartDrawPicture的obj是不是图表实例如果你在箭头函数里丢了thisobj可能是 undefined。最直接的定位方式在回调第一行加console.log看点击时有没有输出。有输出说明事件通了问题在画图环节没输出说明事件没绑上回去查前三点。6. 继续深入把刻度线交互接到 Coding Plan 工作流刻度线画出来只是第一步。实际项目里你大概率还要做这些事给刻度线加删除功能、把刻度线数据持久化到后端、根据刻度线价格触发告警、多条线之间做区间计算。这些扩展都建立在今天这条链路之上。事件回调里拿到的YValue就是价格锚点你可以把它存进数组配合一个「清除所有刻度线」的按钮做管理。HQChart 的画图工具支持通过ChartDrawPicture的 ID 做增删具体 API 在官方文档的画图工具章节。如果你在做一个完整的交易标注产品建议把刻度线数据结构和后端接口一起设计。前端点击按钮时除了调AddChartDrawPicture同时发一个请求把{symbol, price, frameId, timestamp}存下来。页面刷新后从后端拉取历史刻度线批量注入。这样用户下次打开还能看到之前标的价位。长期做 HQChart 二次开发的话Coding Plan 值得开一个https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。它按编码场景计费配合编辑器插件用写这类事件回调和画图工具代码时补全比较顺手。接入方式在文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里有说明。最后给一个实用技巧调试画图工具时把drawPicture对象在 console 里完整打印出来对照 HQChart 源码里ChartDrawPriceLineV2的字段定义看。不同版本的字段名可能有细微差异以你实际引入的 js 文件为准。遇到对不上的字段把源码片段和你的代码一起贴到模型对话里问比盲猜快。