安装
为你的技术栈选择 KLineChartQuant 的包，完成安装，并了解浏览器会使用哪种渲染后端。
KLineChartQuant 由一个与框架无关的内核和若干轻量绑定组成。安装与你技术栈对应的绑定即可：它提供图表 UI，底层工作交给内核。
选择包
| 包 | 适用场景 | Peer 依赖 |
|---|---|---|
@363045841yyt/klinechart | 使用 Vue 3，或需要 <kline-chart> Web Component。包含完整图表 UI：工具栏、设置、画线工具和 Agent 面板。 | vue ^3.4.0、@363045841yyt/klinechart-core、@363045841yyt/klinechart-agent-runtime |
@363045841yyt/klinechart-react | 使用 React。KLineChartWC 渲染的是 Vue 包构建出的 Web Component。 | react ^18.0.0 || ^19.0.0、@363045841yyt/klinechart-core |
@363045841yyt/klinechart-angular | 使用 Angular，需要一个带 signals 和依赖注入的 headless 图表画布，不需要 Vue 那套 UI。 | @angular/core 与 @angular/common 17、18 或 19，rxjs ^7，@363045841yyt/klinechart-core |
@363045841yyt/klinechart-core | 需要直接使用引擎、ChartController、行情模型或 Agent 工具。零框架依赖。 | — |
@363045841yyt/klinechart-agent-runtime | 在浏览器或 Node 中让 AI Agent 操作图表。 | — |
包管理器不一定会自动安装 peer 依赖，所以下面的命令把它们都显式列了出来。
安装
Vue
pnpm add @363045841yyt/klinechart @363045841yyt/klinechart-core @363045841yyt/klinechart-agent-runtime vuenpm install @363045841yyt/klinechart @363045841yyt/klinechart-core @363045841yyt/klinechart-agent-runtime vueyarn add @363045841yyt/klinechart @363045841yyt/klinechart-core @363045841yyt/klinechart-agent-runtime vue在入口文件中引入一次样式：
import '@363045841yyt/klinechart/style.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')React
pnpm add @363045841yyt/klinechart-react @363045841yyt/klinechart-core reactnpm install @363045841yyt/klinechart-react @363045841yyt/klinechart-core reactyarn add @363045841yyt/klinechart-react @363045841yyt/klinechart-core reactReact 包依赖 @363045841yyt/klinechart，并在客户端加载它的 Web Component 构建。该构建把样式放在 shadow root 内部，因此无需另外引入样式表。
Web Component
按 Vue 的方式安装 @363045841yyt/klinechart，然后引入元素入口：
import '@363045841yyt/klinechart/web-component'这个入口会注册 <kline-chart>，并把 Vue、内核和内置行情数据源打包进同一个模块，页面本身不需要再引入 Vue。样式会注入到元素的 shadow root 中。
导出路径
| 引入路径 | 内容 |
|---|---|
@363045841yyt/klinechart | KlineChart 等 Vue 组件、组合式函数，以及 CustomDataSource 等类型 |
@363045841yyt/klinechart/web-component | 注册 <kline-chart>，导出 KLineChartElement |
@363045841yyt/klinechart/style.css | Vue 组件的样式 |
@363045841yyt/klinechart-core/market-data | MarketDataProvider 类型、Provider 注册表与 SourceRouter |
@363045841yyt/klinechart-core/controllers | ChartController 类型与 getRegisteredChartTools |
各包的完整导出见包参考。
Node 版本
这些包以 ES 模块形式发布，供打包工具使用。Vue 包声明的引擎要求是 node ^22.12.0 || >=24.0.0，Agent runtime 为 ^22.19.0 || >=24.0.0。如果你要参与 KLineChartQuant monorepo 本身的开发，需要 ^22.19.0 || >=24.11.0。
渲染后端
图表使用 WebGPU、WebGL2 或 Canvas2D 绘制。具体用哪一个由 rendererBackend 设置决定，按以下顺序取值：
settings属性中显式传入的rendererBackend。- 用户此前保存在浏览器中的选择。
- 对浏览器做一次能力探测：优先 WebGPU，其次 WebGL2，最后 Canvas2D。
运行时，如果首选后端启动失败，渲染宿主还会继续降级：webgpu 依次尝试 WebGPU、WebGL、Canvas；webgl 依次尝试 WebGL、Canvas。没有可用 DOM 时（例如服务端渲染），偏好默认为 webgl，直到图表在浏览器中挂载后才开始绘制。
需要固定后端时（例如截图测试），可以这样写：
<KlineChart :settings="{ rendererBackend: 'canvas' }" />帧是如何构建和提交的，见渲染管线。