# @363045841yyt/klinechart 中文文档 规范地址：https://npmcn.com/package/%40363045841yyt/klinechart/ 版本：0\.11\.0 npm 元数据更新时间：2026-11-02T17:12:25.363Z 中文译文更新时间：2026-11-07T07:22:21.430Z 软件包许可：AGPL-3\.0-or-later 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40363045841yyt/klinechart 原文对照：https://npmcn.com/package/%40363045841yyt/klinechart/?lang=original 项目主页：https://363045841.github.io/KLineChartQuant/ 源码仓库：https://github.com/363045841/KLineChartQuant ## 关键信息（来自 npm 元数据） - 包体积（解压后）：29.2 MB，465 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=26\.0\.0 - 运行依赖：6 个 - peer 依赖：vue ^3\.4\.0 - 首次发布：2026-01-01T15:36:25.371Z - 最新版本发布：2026-11-02T17:12:24.946Z - 近 30 天下载量：2011（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：130（近 12 个月 130 个） ## 中文简介 完成Vue 3财务图表工作台,配有集成代理,脚本引擎和编辑器. ## 安装 ```sh npm install @363045841yyt/klinechart ``` 也可以使用：`pnpm add @363045841yyt/klinechart`、`yarn add @363045841yyt/klinechart`、`bun add @363045841yyt/klinechart` ## README 高性能财务图绘制基础设施,单帧生成时间只有2 ms,稳定地滚动在200 Hz环境中的190-200 fps,本土AI-Native图架构,全链接调整了观察员驱动的快速渲染,QuickJS指标运行时间,支持运行脚本与内部的KCQ财务分析API来提供指标. 页:1 [简体中文](https://npmcn.com/package/%40363045841yyt/klinechart/README_CN.md) # QQ KLineChartQuant 数据 **· 最佳互动 · 有利于移动** [![npm version](https://img.shields.io/npm/v/@363045841yyt/klinechart.svg?style=flat&color=blue)](https://www.npmjs.com/package/@363045841yyt/klinechart) [![npm downloads](https://img.shields.io/npm/dm/@363045841yyt/klinechart.svg?style=flat&color=green)](https://www.npmjs.com/package/@363045841yyt/klinechart) [![license](https://img.shields.io/npm/l/@363045841yyt/klinechart.svg?style=flat&color=orange)](https://github.com/363045841/klinechart/blob/main/LICENSE) [![demo](https://img.shields.io/badge/Demo-Online-purple?style=flat)](https://363045841.github.io/KLineChartQuant/) [![qq](https://img.shields.io/badge/QQ-672011965-blue?style=flat)](https://qm.qq.com/q/672011965) [![tg](https://img.shields.io/badge/Telegram-Join-26A5E4?style=flat&logo=telegram)](https://t.me/+1o-6B-wVRTU2MjQ9) * * * 一个轻量级的金融K行图库专注于定量交易情景. **探员是一等公民** ——支持AI Agent直接控制图表操作,提供TradingView级互动体验. ![](https://files.seeusercontent.com/2026/10/19/yfD1/2026-10-19-19_36_21-601360.png) ## 代理内在结构 KLineChartQuant将"代理"作为"图"的一等公民,在地位上与人类用户是平等的. 这不是一个锁定在上层的聊天层:代理通过与UI相同的原始操作来运行图表,其作用的端点被图表核心本身所暴露出. - **代理是用户,而用户是代理**:代理不是图表的来宾;是和屏幕前的人地位相同的操作员. 用户通过UI可以做的每件事,Agent都可以通过相同的出入口,反之亦然. 平等使用是设计前提,而不是一取. - **代理为图表服务,不是文本流**:一个嵌入式代理存在来驱动用户正在查看的图表,而不是将它们掩埋在道具中. 其输出在用户所看到的表面是真正的互动——指标、图画、取景点变化——仅以对话为手段。 图表及其互动仍然是主题. - **AI-内生结构,不是寄生层**: 工具被编织入图表 API 原始部分作为方面,而不是被分层包裹,所以有一个执行,自然一致的状态,零桥顶. Zed是参考:它的代理人被建入编辑器自己的基础(GPUI). 维基百科 代码是反例:Copilot和Claude代码通过扩展层进入,其中Claude扩展部分本质上是一个围绕外部CLI的GUI包装. 前者使"特工"本土化;后者使其寄生. - **特工将建筑推向稳定和效率**:添加Agent不会增加建筑负担;它迫使建筑变得更好. 因为每一种能力都必须通过单一的API和统一的原始人来暴露,所以状态被整合为一个真理的来源,并保持绝对一致的——散去状态,衍生出副本,多写路径,平行管线,种族无法生存. Agent和用户走同一路径,而这种制约则会形成更稳定,可测试的图表核心. - **不盲目使用 MCP**:项目经过三个阶段发展而来——一种早期的JSON-配置方法,然后是MCP,最后是AI-Native架构. MCP需要中间层或DSL来花出符号,丢失信息,并保留第二个侵入前端逻辑的状态副本. 目前的设计将桥完全放下:工具直接在图表核心上注册,一个单调到达内核. - **反应内核是特工的基础**: StateKernel是真理的单一来源——只有动作可以写出,计算值会自动得到,外部消费者会收到只读的信号,辅以分批原子快照和被冻结状态. 内核为零依赖性,极轻,具有可控的渲染时间. 这让Agent以接近零的成本分享用户的确切状态,并将工具保留为一组动作而非并行系统. ## \* 核心特征 - **代理土著** - 图表核心显示其能力 `@Tool`\-被装饰的域名原始人, 代理称相同的原始人与UI。 工具是动作的子集: 一个共享状态, 一个执行路径, 没有桥层 - **脚本指标** - 用平版文字写出指标。 带有时间和内存预算的 Sandboxed QuickJS 执行, 内置编辑器, 并带有完成和徘徊签名, 以及流入正常渲染链的地块 - **计算机渲染** - 全链调整观察员驱动、物理像素对接、K行、wicks和线条在所有DPR屏幕上都清晰明了 - **插件结构** - 以发货人插件为基础的设计,支持动态登记、配置和生命周期管理 - **高性能** - 平稳地处理上万个数据点,在缩放或平板过程中没有滞后;支持 **200赫兹显示器上的190-200fps** 单帧生成时间为 **2分钟** - **多后端渲染** - 提交一次绘画原始作品,通过 **网络GPU**, (中文(简体) ), **网络GL**,或 **帆布2D**. WebGPU 提供混合 DOM 画布(无) `compositeTo` 复制件),单指令-缓冲器-每帧提交,并附有4x MSAA,并经由资源表进行每英寸几何缓冲. 自动后退链:WebGPU → WebGL → Canvas2D. 达到 **200Hz显示的190fps** 每帧 GPU 时间 **1分钟** - **优化互动** - 稳定地缩放锚地,精确地横穿光标,平滑地拖动 - **移动-优化互动** - 用于数据探索的长压十字架, 调试以删除, 滑行以浏览数据而不触发图表滚动, 手势滚动模式 - **多符号比较** - 支持无限数量的工具进行趋势比较 - **多源聚合** - 支持汇总和统一多个数据来源 - **批量数据导出** - 选择一个日期范围,并将多库存的K行数据导出为单一的CSV文件,并注明进度 - **自定义工具提示** - 完全自定义工具提示 `#kline-tooltip` 插槽,由引擎提供悬浮数据、位置和样式 ## 绩效 KLineChartQuant 直接向 Canvas2D, WebGL2 或 WebGPU 提交绘图原始文件 。 设计目标是 **200个FPS(每帧5米)**;图表显示测得的框架生成时间及其在该预算中的份额. 基准:1180×640取景所,DPR 2,4×MSAA,300-10000可见K行,每场3发集合. NVIDIA GeForce RTX 4060 笔记本电脑GPU,无头Chrome 155. 重写一下 [`bench/`](https://npmcn.com/package/bench/README.md)。 。 。 . ![Frame generation time and frame budget share for 12 indicator lines across Canvas2D, WebGL2 and WebGPU, from 300 to 10,000 visible K-lines](https://npmcn.com/package/docs/Pics/render-bench-local-promo.png) ## • 脚本指标 指标可以被写成平版Script,而不是被提前编译. 脚本是一个文件,它通过 `defineIndicator`;引擎会编译一次,然后用栏来运行并收集出出点. 脚本是数据源并渲染出不可知性——主机提供栏,图表适配器产生结果. ```js defineIndicator({ name: 'Volume Tide', position: Position.Sub, onBar() { const RED = '#F08080' const RED_LIGHT = 'rgba(240, 128, 128, 0.5)' const RED_LIGHTER = 'rgba(240, 128, 128, 0.15)' const GREEN = '#008000' const GREEN_LIGHT = 'rgba(0, 128, 0, 0.5)' const GREEN_LIGHTER = 'rgba(0, 128, 0, 0.1)' const GRAY_LIGHTER = 'rgba(128, 128, 128, 0.15)' const barUp = ta.rising(close, 1) const barDn = ta.falling(close, 1) const volumeChange = ta.change(volume) const volumeColor = barUp ? RED_LIGHTER : barDn ? GREEN_LIGHTER : GRAY_LIGHTER plot.Columns(volume, 'Volume columns', { color: volumeColor, }) const volumeChangeColor = barUp ? (volumeChange > 0 ? RED : RED_LIGHT) : barDn ? (volumeChange > 0 ? GREEN : GREEN_LIGHT) : Color.Gray plot.Histogram(volumeChange, 'Volume change columns', { color: volumeChangeColor, size: 12, }) plot.Line(0, 'Zero line', { color: Color.Gray, }) }, }) ``` 脚本需要的每分每分每分 每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分每分 | 全球 | 含义 | | --- | --- | | `open` `high` `low` `close` `volume` `time` | 价格系列; `close` 读取当前栏, `close[1]` 退后一条 | | `input.int` `input.float` `input.bool` `input.string` | 在顶层声明参数 `onBar`; 变量读取用户值 | | `plot.Line` `plot.LineBR` `plot.StepLine` `plot.StepLineBR` `plot.Columns` `plot.Histogram` `plot.Point` `plot.Shape` `plot.Char` `plot.Arrow` | 发出绘图点; 方法名选择形状; 每个返回一个控点 | | `plot.Candle` `plot.Bar` | 从四个价格中放出蜡烛或OHLC条;蜡烛支持不同的身体、树克和边界颜色;返回 `void` | | `fill(from, to, color, title, options?)` | 填平两块地之间的区域; `from` 编号 : `to` 是返回的控点 `plot.*` | | `ta` | 内置技术分析图书馆 | | `Position` | `Position.Main` 或者说 `Position.Sub` | | `Color` | 常见材料 400 个颜色, 或通过任何 CSS 颜色字符串 | | `defineIndicator` 编号 : `defineLibrary` 编号 : `importLibrary` | 声明指示器、 声明图书馆、 使用图书馆 | `defineIndicator` 也接受可选 `title` 长名和可选名 `info` 指标取取器中的描述; `name` 仍然是稳定的身份和短标签. `plot.Line` 连接有效的交叉点 `null` 或者说 `NaN` 差距,像松树 `plot.style_line`启用 `plot.LineBR` 在空隙中打破线条,比如 `plot.style_linebr`。两者接受相同的颜色、大小、破折号,并抵消选项和返回控件 `fill`。现有脚本需要空格来突破行应使用 `plot.LineBR`。 。 。 . `plot.StepLine` 绘制步骤,在有效点中间垂直过渡,并跨出空白连接. `plot.StepLineBR` 空隙间断. 和松树一样 `plot.style_stepline` 财务报告和审定财务报表 `plot.style_steplinebr`,接受与行相同的选项,返回控件 `fill`。 。 。 . 趋势计算在 `ta`数字 : `ta.atr(length)` 返回 Wilder ATR,并 `ta.supertrend(multiplier, atrPeriod)` 返回时 `[trend, direction]` 丛书。 方向为 `-1` 为上和 `1` 用于下;两个系列都是 `NaN` 在热身期间。 Supertrend保留了之前核心指标的起步方向. 内置 `SuperTrend` 脚本使用两个结果 `plot.LineBR` 打电话. `ta.macd(source, fastLength, slowLength, signalLength)` 返回时 `[DIF, DEA, DIF-DEA]` 丛书。 其EMA使用第一个有效值作为其种子,与之前的核心MACD相匹配; 常规 `ta.ema` 保留它的满窗种子。 内置 `MACD` 脚本使用默认的12/26/9,将直方图增加一倍,并用符号和动力来表示颜色列. 数值从第一个有效输入开始;迁移后的脚本支持K行图表. 参数很简单 `const` 声明,因此变量名称是参数身份——否 `inputs` 块和无 `params` 对象 : ```js onBar() { const period = input.int(20, { title: 'Period', min: 1 }) const type = input.string('SMA', { options: ['SMA', 'EMA'] }) plot.Line(type === 'SMA' ? ta.sma(close, period) : ta.ema(close, period), 'ma') } ``` 内置 `ta` 库封面 `sma`, (中文(简体) ), `ema`, (中文(简体) ), `rma`, (中文(简体) ), `swma`, (中文(简体) ), `alma`, (中文(简体) ), `wma`, (中文(简体) ), `vwma`, (中文(简体) ), `rsi`, (中文(简体) ), `highest`, (中文(简体) ), `lowest`, (中文(简体) ), `highestbars`, (中文(简体) ), `lowestbars`, (中文(简体) ), `stoch`, (中文(简体) ), `cmo`, (中文(简体) ), `linreg`, (中文(简体) ), `crossover`, (中文(简体) ), `crossunder`, (中文(简体) ), `rising`, (中文(简体) ), `falling` 财务报告和审定财务报表 `change`。 。 。 . `highestbars` 编号 : `lowestbars` 返回负条偏移( 0 是当前条) 并解决与最早期条的链接, 匹配 Pine 。 用户库使用相同的 `defineLibrary` 调用并加入相同的全局命名空间. - **沙盒处决** - 脚本运行在一个嵌入式QuickJS运行时,每个运行时间和内存预算,因此运行的脚本失败而不是挂起主机 - **无未来数据** - 尚未公布的历史为: `NaN`; 脚本永远无法向前看 - **真实编辑器** - 图表载有一个基于CodeMiror的脚本编辑器,并附有完成、徘徊签名和从编译器使用的同样声明产生的签名帮助 - **相同的渲染路径** - 插图流经引擎的正常插图、轴和传奇链,所以脚本指示器的行为与内置指示器完全一样 单位 `KlineWorkbench`,打开代码编辑器创建,运行并添加到图表中的脚本. 产品拥有脚本服务并自动注册内置脚本;不需要单独安装脚本包. 设定 `scripts` 改为 `false` 在安装之前,可禁用脚本并隐藏其编辑器条目. 见 [脚本文件](https://npmcn.com/package/packages/script/docs/indicator.md) 全文参考, [图书馆](https://npmcn.com/package/packages/script/docs/library.md),以及 [绘图 API](https://npmcn.com/package/packages/script/docs/indicator.md#plot)。 。 。 . ## 数据来源 KLineChart 需要一个市场数据后端. 支持的数据来源: | 数据来源 | 说明 | 文档 | | --- | --- | --- | | `gotdx` | Tongdaxin (GOTDX) 引文使用过时参数coauthors (帮助) A-share / 期货 / MAC,服务于 `GoTDX-Connector` | [GoTDX 连接器](https://npmcn.com/package/docs/data-sources/klinechartquantgo.zh-CN.md) | | `binance` | Binance Spot K- lines and real chick- by- tick 交易(脚印/订单流),服务于 `Binance-Connector` | [双向连接器](https://github.com/363045841/Binance-Connector) | | `baostock` | BaoStock A- 分享每日/ 每周/ 每月和分钟 K- 线路,服务于 `Baostock-Tradingview-Connector` | [鲍斯托克](https://npmcn.com/package/docs/data-sources/baostock.zh-CN.md) | | `tradingview` | 贸易维尤全球文书 `Baostock-Tradingview-Connector` | [鲍斯托克](https://npmcn.com/package/docs/data-sources/baostock.zh-CN.md) | | `mt5` | MT5 (Exness) 本地终端: Forex / 金属/加密 CFDs,服务于 `KCQ-MT5-connector` | [MT5级](https://npmcn.com/package/docs/data-sources/mt5.zh-CN.md) | | `mock` | 只调试: 本地 MOCK- 100 / MOCK-1000 K- 线, 不需要后端, 总是在线 | —— 说 | 后端重置器与此相邻( 在单重置器外) . ### 单调启动 先克隆数据源后端( 密码: 跳过已经存在的目录) : ```bash pnpm setup:backends ``` 然后运行 `pnpm dev` 带有 `-c` 参数以一起启动前端和选定的连接符 : ```bash pnpm dev # frontend only (Vite dev server) pnpm dev -c all # frontend + all backends (gotdx + binance + baostock; mt5 excluded) pnpm dev -c gotdx baostock # frontend + selected backends pnpm dev -c mt5 # frontend + MT5 local terminal (Windows + logged-in MT5 terminal) pnpm dev -c tdx # aliases supported (tdx / g / b / bnb / m / all) pnpm dev -c all --lan # same, dev server bound to 0.0.0.0 (LAN accessible) ``` 常用的简称 : ```bash pnpm dev:all # frontend + all backends pnpm dev:g # frontend + gotdx (Tongdaxin) pnpm dev:b # frontend + BaoStock / TradingView pnpm dev:bnb # frontend + Binance spot market data pnpm dev:mt5 # frontend + MT5 local terminal pnpm dev:lan:all # frontend (0.0.0.0) + all backends ``` 平行进程日志停留在一个终端中,并以有色源前缀分隔: `[vite]`, (中文(简体) ), `[gotdx]`, (中文(简体) ), `[binance]`, (中文(简体) ), `[baostock]`,以及 `[mt5]`。 。 。 . 在Windows PowerShell中,运行 `node scripts/dev.mjs -c gotdx` (或使用另一个) `-c` 在 Ctrl+C 之后的下一个提示前完成关闭日志. `pnpm dev` 添加同样接收 Ctrl+C 的 pnpm 进程; pnpm 打印时孩子脚本无法控制 `[ELIFECYCLE]`。 。 。 . 只有后端( 没有前端) : ```bash pnpm connector # all backends (mt5 excluded) pnpm connector gotdx # gotdx (Tongdaxin) :8080 pnpm connector binance # binance (Binance spot K-line & trades) :8091 pnpm connector baostock # BaoStock / TradingView :8000 pnpm connector mt5 # MT5 local terminal :8090 (Windows + logged-in MT5 terminal) ``` 对后端只使用相同的关闭命令, 运行 `node scripts/start-connector.mjs gotdx`。 。 。 . 之后 `pnpm setup:backends`,不需要额外的设置。 dev 服务器代理 `/api/stock` → `:8000` (Baostock-Tradingview-Connector) 和 (英语) `/api/public` → `:8080` (GOTDX-连通器). ## QQ 快速启动 ### 1\. 安装 产品为一包. `vue` 是唯一的对等依赖;图表引擎, Agent 运行时间, 脚本引擎, 编辑器页面, Web Workers, 公共类型, 样式表, 和许可证通知都位于 tarball 内部 . ```bash pnpm add @363045841yyt/klinechart vue # npm install @363045841yyt/klinechart vue # yarn add @363045841yyt/klinechart vue ``` 没有 `@363045841yyt/klinechart-*` 内部软件包发布或需要安装. v0.11 在α中时,安装 `alpha` ditt-tag( 秒数) (`pnpm add @363045841yyt/klinechart@alpha vue`)或刻出准确的版本. 在您的应用程序条目中导入产品样式表一次 : ```ts import '@363045841yyt/klinechart/style.css' ``` ### 2\. 安装工作台 ```vue ``` 工作箱装入容器(`width/height: 100%`),所以主机元素必须具有明确的大小. - `agent` 财务报告和审定财务报表 `scripts` 默认为 `true`。两者在挂起时间决定:设置为 `false` (并重载)以禁用该子系统。 禁用脚本是指没有脚本执行员,没有编辑器条目,也没有语言服务. - `chart` 转发图表配置(轴、工具栏、, `settings.theme`, (中文(简体) ), `settings.rendererBackend`(中文(简体) ). - `initialAgentPanelOpen` 控制代理抽屉是否打开. - 已建的脚本指标是在图表挂载前编写的;编辑器页面及其语言服务负载仅在编辑器被打开时才会被编写. - 高级代理 APIs 在同一软件包中存在 `@363045841yyt/klinechart/agent`。 。 。 . ### 3\. 提供市场数据 图表从不接受条阵列 。 执行 `MarketDataSource`在自己的主机上注册 然后把主机传给工作台. ```ts import { createMarketDataHost, type BarsObserver, type DataSourceInstrument, type HistoryRequest, type MarketDataSource, } from '@363045841yyt/klinechart' // `api` and `toInstrument` are your backend adapter and payload mapping (HTTP, WebSocket, file reader, database, …). const instrument: DataSourceInstrument = { id: 'BTCUSDT', symbol: 'BTCUSDT', name: 'Bitcoin / USDT', exchange: 'BINANCE', assetClass: 'crypto', timezone: 'UTC', capabilities: { bars: { periods: ['1min', 'daily'], adjustments: ['none'] }, liveBars: true, }, } const source: MarketDataSource = { id: 'binance', name: 'Binance Spot', capabilities: { assetClasses: ['crypto'], bars: { periods: ['1min', 'daily'], adjustments: ['none'] }, liveBars: true, }, instruments: { // Powers the symbol picker and instrument switching. async search(query) { const matches = await api.searchSymbols(query.keyword, query.limit, query.signal) return matches.map(toInstrument) }, // Resolves the stable id back to identity and capabilities. async resolve(id, signal) { return toInstrument(await api.getSymbol(id, signal)) }, }, bars: { // History pages: `beforeTimestamp` is an exclusive upper bound, omitted means the newest page. async fetch(request: HistoryRequest) { const page = await api.getKlines({ symbol: request.instrument.id, period: request.period, before: request.beforeTimestamp, limit: request.limit, signal: request.signal, }) return { bars: page.bars, olderData: page.olderData } }, // Optional live stream. Return an unsubscribe function. subscribe(request, observer: BarsObserver) { observer.status('connecting') const socket = api.subscribeBars(request.instrument.id, request.period, { onBar: (bar) => observer.update(bar), onCorrection: (bar) => observer.update(bar, { historical: true }), onReset: () => observer.invalidate(), onStatus: (status) => observer.status(status), onError: (error) => observer.error(error), }) return () => socket.close() }, }, } const host = createMarketDataHost() const unregister = host.registerDataSource(source) ``` 将主机和所选乐器传递到工作台: ```vue ``` 数据合同: - `bars.fetch` 返回时 `{ bars, olderData }`. 酒吧按上升顺序为UTC-millisesecond OHLCV条目; `beforeTimestamp` 具有排他性的约束和 `limit` 是请求的页面大小. - `olderData` 实值 `available`, (中文(简体) ), `exhausted`,或 `unknown`. 明确宣布——空阵不能取而代之的是“不再有历史”. - `observer.update(bar)` 需要完整的单行快照。 相同的上个时间戳替换,更新附件,旧报告是一个协议错误; `observer.update(bar, { historical: true })` 更正现有栏; `observer.invalidate()` 请求在删除或调整后重新加载. - `observer.status('connecting' | 'connected' | 'disconnected')` 财务报告和审定财务报表 `observer.error(error)` 报告运输状态;重新连接将保留数据源的责任. - 源级别 `liveBars` 旗帜来源于 `subscribe`;个人文书可以声明 `liveBars: false`。 。 。 . - `instrument` 财务报告和审定财务报表 `period` 是可控道具: 更改它们以切换系列. - 主机属于你的应用程序. `unregister()` 删除一个来源 `host.dispose()` 释放一切; 卸载工作台不会处理主机. - 对于没有后端的本地开发,请登录内置模拟: `host.registerDataSource(createMockDataSource())` (MOCK-100 / MOCK-1000) (韩语). 默认上下文已经包含它, 所以不要两次注册 . 完整的合同,包括交易、深度、时间分担和交易-日历接口,载于 [数据源 API](https://npmcn.com/package/docs/market-data/data-source-api.md)。 。 。 . ### 许可证 完整的产品包括AGPL-3.0-或后期脚本模块,并在AGPL-3.0-或后期下发售. 个人Apache-2.0模块保留其原始许可证;模块和第三方通知船随包. ## 自定义工具提示 `KlineChart` 揭露 `#kline-tooltip` 用于自定义工具提示渲染的槽 。 当提供槽时,默认的工具提示内容被完全替换,使您能够完全控制显示内容和样式. 定位和拖动图所拥有停留 : `tooltipPosition === 'adaptive'`,习惯 `#kline-tooltip` 也可以拖动;双击重击。 与 `tooltipPosition === 'none'` (默认),数据工具提示完全被隐藏. ### `#kline-tooltip` | 槽道具 | 类型 | 说明 | | --- | --- | --- | | `hoverData` | `KLineData` | 受管的K行数据(保证无核) | | `hoveredIndex` | `number | null` | 数据索引 | | `data` | `ReadonlyArray` | 完整数据阵列 | | `upColor` 编号 : `downColor` | `string` | 当前主题的上下颜色 | ```vue ``` ## 更多文档 - [渲染管道](https://npmcn.com/package/docs/rendering/rendering-pipeline.md) - 当前油漆路径:框架交易、场景/激光、渲染器后端 - [脚本指标](https://npmcn.com/package/packages/script/docs/indicator.md) - 在 TypeScript 中宣布一个指标:输入、绘图 API、库 ## 组件道具 | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | 主题 | `'light' | 'dark'` | —— 说 | 图表主题. 使用 `v-model:theme` 双向绑定 | | 是全屏显示 | `boolean` | —— 说 | 控制全屏状态. 内部( 非控制) 模式未绑定 | | 时区 | `string` | `'Asia/Shanghai'` | 日期/时间显示时区 | | yPaddingPx 软件 | `number` | 20国 | Y 轴按像素固定 | | 分钟宽度 | `number` | 1个 | 最小 K 线宽( 逻辑像素) | | 最大宽度 | `number` | 200个 | 最大 K- 线宽( 逻辑像素) | | 右侧轴向 | `number` | 0 个 | 右价轴宽度 | | 左侧轴线 | `number` | 0 个 | 左价轴宽 (0 = 隐藏) | | 底轴高 | `number` | 24个 | 下时轴高度 | | 价格标签宽度 | `number` | 页:1 | 显示变化百分比的价格标签额外宽度 | | 缩放级别 | `number` | 80个 | 缩放水平总数 | | 初始 Zoom 级别 | `number` | 3个 | 初始缩放级(1~缩放级) | | 远程端口容器 | `string | HTMLElement` | —— 说 | 投放/模式的远程传送目标(CSS选择器或元素). 内部默认 `.chart-wrapper` | ## \* 路线图 - [x] v0.10: AI-内生图支持 - [x] K- 线 缩放锚地稳定性, 增强缩放感觉 - [x] 从滚动容器中分离出右轴,完全解决剪接问题 - [x] 空白区域绘图支持 - [x] 限制垂直 pan 范围以防止视图端口离开数据 - [x] 绘图系统 - [x] 右轴缩放 - [x] 最新价格线和右轴标签样式优化 - [x] 区域原始工具和渲染 - [x] 较先进的绘图工具 - [x] 支持分钟、多天、每月和每年的K行显示 - [ ] 支持将绘图转换为四等码 ## 曰如何是新来 - **页:1** - **代理运行时间** - 说吧 `agent-runtime` 和具有 OpenAI 协议支持的 AI 运行时间, 驱动图表通过相同的程序 `@tool` 原始的UI,加 `@tool` 注册、绘图代理工具以及共享网络/电子代理工作空间 - **脚本指示器引擎** - 每个指标一个普通类型Script文件,在时间和内存预算下在沙盒快JS运行时执行;内置代码Miror编辑器, a `ta` 技术分析库和用户库; 地块流出到正常的渲染链中, 因此脚本指示器的行为与内置指示器完全一样 - **绘图** - 使用工作空间隔离、多选择和批量编辑、空白区域主播、内置文本编辑、marquee组拖放和可配置标签的分板和分时共享绘图 - **时间分配和工作空间** - 5天时间共享、本土时间共享指标和持续视图工作空间 - **渲染** - 在可见画布上直接渲染WebGL - **v0.10 (中文(简体) )** 围绕一个统一的"市场数据提供"(MarketData Provider)重新构建了数据层,增加了多日时间共享,一个由图表和代理,Fibonacci/rectangle/arrow注释工具共享的统一指标查询管道,并推广了与一等图表模式的比较. 将 Vue/React/Angular 绑定与统一的供应商合同相匹配,并运出多个渲染和状态一致性修正. - **页:1** 自行开发 核心层被动状态模式迁移,消除时间问题 - **页:1** 单路径 Scene 渲染器 + WebGPU 后端(hybrid DOM 画布,无复合图),Frame Transaction reactive,设备丢失后恢复,自发倒置 WebGPU → WebGL → Canvas2D - **v. 0.8 (中文(简体) )** 符号比较,多来源数据汇总 - **页:1** 渲染器注册链 AOP 重构有装饰器语法,单重分拆,Vue/React 绑定(实验),独立的核心包,有符号化色彩系统 - **(单位:千美元)** 统一 WebGL 渲染上下文共享所有平面, 加上子平面寿命周期重构 – 通过 SubPaneManager 进行集中的平面实例管理, 具有一等平面 - **(单位:千美元)** 全面渲染优化:分批进行价对Y计算,缓存勾选位置和几何,优化月键操作;实现平稳 **200赫兹显示器上的190-200fps** 帧生成时间降至 **2分钟** - **v. 6.3 (单位:千美元)** WebGL 为 K- 线条、 卷条和 MACD 条作渲染; 全面显著的性能提升 - **第0.6.1号** 双层画布架构:主+以更新级过滤进行重叠分离,实现平稳 **在200赫兹显示器上显示有低焦躁的180fps** - **v. 6.0 (单位:千美元)** 无国籍指标管道:MA/BOLL/EXPMA/ENE/RSI/CCI/STOCH/MOM/WMSR/KST/FASTK 现在使用统一的计算器 → 调度器 → StateStore → 渲染器架构,以提高性能和可维护性 - **v0.5.6 (中文(简体) )** 对数价格轴, 以像素水平均匀分布的网格线 - **页:1** 高级绘图工具:并行通道、回归通道、平滑上下层和非互通通道 - **页:1** 完整的绘图工具系统、支持行、矩形、文本绘图和样式编辑 - **页:1** 现代 UI, 左侧工具栏, 右轴优化, TradingView 风格缩放的感觉 ## 产品许可证 完整的Vue工作台分布于以下 [AGPL-3.0- 或- 后期](https://npmcn.com/package/packages/vue/LICENSE)个人Apache-2.0模块保留原许可证。 该产品包括模块和第三方许可通知. ## 常见问题 ### @363045841yyt/klinechart 是什么？ 完成Vue 3财务图表工作台,配有集成代理,脚本引擎和编辑器\. ### 如何安装 @363045841yyt/klinechart？ 在项目目录运行 npm install @363045841yyt/klinechart，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.4\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @363045841yyt/klinechart 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @363045841yyt/klinechart 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @363045841yyt/klinechart 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=26\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @363045841yyt/klinechart 可以商用吗？ @363045841yyt/klinechart 使用 AGPL-3\.0-or-later 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。 ### @363045841yyt/klinechart 的下载量有多少？ 根据 npm 官方下载统计，@363045841yyt/klinechart 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,011 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @363045841yyt/klinechart 还在维护吗？ 最新版本 0\.11\.0 发布于 2026/11/03（5 天前）；至今共发布 130 个版本，其中过去 12 个月发布了 130 个；首次发布于 2026/01/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。