如何用ChartGPU打造实时金融K线图：蜡烛图与OHLC完整指南（附流式更新示例）

【免费下载链接】ChartGPUBeautiful, open source, WebGPU-based charting library项目地址: https://gitcode.com/gh_mirrors/ch/ChartGPU

想用ChartGPU打造实时金融K线图？这篇指南带你从零开始，用这款基于WebGPU 的开源图表库完成蜡烛图（candlestick）与 OHLC 图的渲染，并通过appendData实现平滑的流式更新。ChartGPU 零运行时依赖、GPU 加速渲染，可轻松承载十万根 K 线的实时行情场景，让交易终端级别的流畅体验触手可及。

为什么选择 ChartGPU 画K线图？📈

传统 Canvas 2D 图表在数据量大时会明显掉帧，而 ChartGPU 完全运行在WebGPU之上：

• GPU 加速渲染：百万级数据点依然保持高帧率（支持 Chrome/Edge 113+、Safari 18+）
• 流式更新：appendData增量追加数据，可选maxPoints环形缓冲区自动淘汰旧数据
• 金融级细节：收盘价徽章（priceLabel）、K 线聚合采样（sampling: 'ohlc'）、自动滚动跟随最新价格
• 零依赖 + MIT 协议：npm install @chartgpu/chartgpu即可商用，无任何 npm 运行时依赖

浏览器支持详情见 docs/GETTING_STARTED.md。

第一步：创建你的第一张蜡烛图

数据格式与 ECharts 兼容，每根 K 线是一个五元组：[时间戳, 开盘, 收盘, 最低, 最高]。

import { ChartGPU } from '@chartgpu/chartgpu'; const chart = await ChartGPU.create(container, { xAxis: { type: 'time' }, yAxis: { type: 'value', header: 'USD' }, tooltip: { show: true, trigger: 'axis' }, series: [{ type: 'candlestick', name: 'Stock Price', data: ohlcData, // [[ts, open, close, low, high], ...] style: 'classic', // 'classic' 实心 | 'hollow' 空心 itemStyle: { upColor: '#26a69a', // 阳线颜色 downColor: '#ef5350', // 阴线颜色 }, barWidth: '80%', }], });

完整可运行示例在 examples/candlestick/main.ts，蜡烛图渲染逻辑见 src/renderers/createCandlestickRenderer.ts。

💡小贴士：K 线图表自动启用"金融主图"布局——价格轴默认靠右、自动显示最新价徽章，无需额外配置。

蜡烛图 vs OHLC 图：两种风格怎么选？

两者共用完全相同的数据格式与appendData流式能力，随时可切换。对比示例见 examples/ohlc-bars/main.ts。

流式更新：让K线"活"起来 🚀

实时行情是K线图的灵魂。核心思路分三步：接收 tick → 聚合为K线 → 增量推送给图表。

1️⃣ tick 聚合：每个 tick 更新当前未收盘K线的close/low/high，跨周期时生成新K线。参考实现：examples/candlestick-streaming/tickSimulator.ts。

2️⃣ 增量追加：新K线出现时调用chart.appendData(0, [newCandle])，只上传增量而非全量重写；数据过长时配合maxPoints环形缓冲自动丢弃最旧K线。

3️⃣ 关键配置（完整示例见 examples/candlestick-streaming/main.ts）：

series: [{ type: 'candlestick', data, sampling: 'ohlc', // 大量K线时按桶聚合，缩放不糊 samplingThreshold: 2000, priceLabel: { intervalMs: 60_000, // K线周期 → 显示收盘倒计时 nowMs: priceLabelNowMs, // 稳定函数引用，避免计时器反复重启 }, }], autoScroll: true, // 视图自动锚定最新K线 animation: false, // 流式场景关闭入场动画保帧率 dataZoom: [{ type: 'inside' }], // 启用缩放后 autoScroll 才生效

几个提升真实感的细节：

• 最新价徽章 + 倒计时：priceLabel自动显示最新收盘价，配合intervalMs还能显示当前K线收盘倒计时，交易终端感拉满
• 未收盘K线节流：对正在形成的K线，建议每 ~100ms 更新一次而非每个 tick 都刷，避免打满 GPU
• 切换周期：1s / 5m / 1h / 1d 等时间框架只需重新生成历史数据并替换data即可

性能优化清单 ✅

1. 优先列式数据：大规模数据用Float64Array的 x/y 列而非对象数组
2. 关闭动画：高频流式下animation: false
3. 多图表共享 GPU 设备：3 个以上图表时复用同一GPUDevice与 pipeline cache，并用connectCharts同步缩放
4. performance.lod: 'strict'：需要精确线宽/几何时用严格模式

更多细节见 docs/api/options.md。

总结

ChartGPU 让浏览器里的金融K线图拥有交易终端级别的性能：WebGPU 渲染、appendData流式追加、OHLC 采样聚合、最新价徽章一应俱全。打开 examples/candlestick/ 和 examples/candlestick-streaming/ 跑一跑，十分钟就能搭出一个实时行情页。接下来不妨试试把真实行情 WebSocket 数据接进handleTick，你的实时金融K线终端就成型了！

【免费下载链接】ChartGPUBeautiful, open source, WebGPU-based charting library项目地址: https://gitcode.com/gh_mirrors/ch/ChartGPU