作 者：老余捞鱼
原创不易，转载请标明出处及原作者。
文中示例仅用于技术讨论，不构成任何操作建议。
量化策略开发应以学习和技术交流为目的。
本号不荐股、不卖课、不承诺收益。
市场有风险，请合法合规投资。
本文约 2800 字 | 预计阅读 9分钟，后有开源仓库使用路径，建议先收藏。
自己搭过行情前端的人应该清楚，金融图表不是画 K 线那么简单。
一根 K 线要画对，实体和影线得画对。均线要跟随最后一根实时跳动的 K 线缩放。十字光标从鼠标位置反查时间和价格。四图布局时四个窗口的十字线要联动，缩放平移时指标线不能跟着抖。
再往上，成交量分布要按可见区间算，枢轴点要按周期算。画线工具要吸附到 K 线上，撤销重做要覆盖所有图层，状态得存下来。
这些都还只是最基础的部分。
自己造轮子有多难？先说劝退人的是这活儿的商业属性。做 TradingView 授权贵，数据还有限制。自己造轮子则是无底洞。图表性能调不好，K 线一多就掉帧。交互细节能磨半年，最后发现用户根本不在意你在哪根线上加了 2 像素的抗锯齿。
我前面写过一期《四步把TradingView图表搬回电脑，接上自己的数据源》，有兴趣的朋友可以去看看，还是有一点技术门槛的。
所以过去几年，能用的开源金融图表基本都是 TradingView 的包装，或者某个量化平台里顺带抽出来的副产物。真正把商用图表引擎整个开源出来的，屈指可数。
一、Vela 是什么 ？
LuxAlgo 是做 TradingView 付费指标的 vendor，给别人写指标赚钱的那种公司。他们自己产品里的图表早就自己写了一套，最近把这套拿出来了，叫 Vela。
我查了仓库当前数据。823 Star，161 个 fork，31 个 open issue。Apache-2.0，TypeScript 写的。官网在velacharts.dev，npm 上最新版本0.8.1，10月1号发的。
有个数字值得单独说。这个仓库 7 月 13 号才创建，到今天才几十天。也就是这三周内涨到 823 Star，最近两天还在涨，一天加了 328。仓库刚经历过一次品牌升级，README 的头图都换成了新的品牌稿。
它自己的描述是「Fast, extensible financial charts for the web」，四个关键词。headless 核心、原生 WebGL2 渲染器、开箱即用的 workspace、插件 SDK。
headless 这个词是理解 Vela 的关键。
二、它自己写了一套 WebGL2 渲染器
很多所谓开源图表库，其实是把 TradingView 的图钉在 iframe 里，或者用它的嵌入代码。Vela 不是。
它自带渲染器，WebGL2 实现，Canvas2D 做兜底。这件事的难度在于，金融图表的绘制不是普通的 2D 图形。蜡烛图每根都是带圆角规则的矩形，影线是细长矩形，指标线是折线，成交量是柱状图。
还得处理缩放级别的细节层级，缩得很小时要简化影线甚至只画实体。这些全交给 GPU，才能扛住几千根 K 线加多个指标同时刷新。
看 README 里给的接口，图表实例可以完全由代码驱动。
代码 1
import { Vela } from '@luxalgo/vela';
import { BinanceProvider } from '@luxalgo/vela/providers/binance';
const chart = new Vela('#chart', { symbol: 'binance:BTCUSDT', timeframe: '60', live: true });
chart.data.registerProvider('binance', new BinanceProvider());
await chart.ready();不想从底层摸，也可以用 workspace 那一层，一行调用直接得到一个完整图表应用。
代码 2
import { VelaWorkspace } from '@luxalgo/vela/workspace';
const chart = new VelaWorkspace('#chart', {
layout: '4',
symbol: 'BTCUSDT',
timeframe: '60',
live: true,
providers: { binance: () => new BinanceProvider() },
persist: true,
});layout: '4' 是四图网格，'2h' 是两图半屏。workspace 里还带对象树、命名 cell、同步组和一份持久化状态文档。快捷键是键盘优先的设计。
按字母或 0 唤出品种搜索，按 1 到 9 切周期，按问号出快捷键面板。
数据源给了 Binance、Coinbase、Hyperliquid 三个开箱即用的 provider。
也可以自己塞 K 线数据，离线跑。
插件 SDK 的路子是这样的。
代码 3
import { registerChartType, registerRendererLayer } from '@luxalgo/vela/plugin';
registerChartType({
id: 'renko-like',
label: 'Renko-like',
barTransform: { full: (bars) => transformAll(bars), next: (bar) => transformOne(bar) },
});
registerRendererLayer({
id: 'renko-like',
placement: 'above-data',
create: () => ({ mount(canvas) {}, render({ bars, data, coords, scale, bounds }) {} }),
});注册完 chart type，它会自动出现在 workspace 的样式下拉框里。不需要 fork 项目源码。
三、自带70 个指标
70+ 个内置指标直接从图表自己的 K 线算，不需要脚本引擎。每项都带图例行、设置弹窗、刷新后持久化。移动平均、布林带、动量振荡、趋势与波动度量、成交量研究，还有 VWAP、SuperTrend、枢轴点这类价格锚定类。成交量和可见区间的成交量分布也一起给了。
自定义脚本走插件位。Vela 自己一个脚本引擎都不带，要什么语言就装对应插件，或者自己对着 ScriptingEngine 这个公开接口写一个。
这一条 README 里写得很清楚，但很容易被忽略。
四、3 条 Vela 没说的坑
这是我读完 README 和 NOTICE 之后觉得有必要单独拎出来的三点。
第一条，Pine Script 的许可证会传染。
Pine 支持是有的，但不在主包里。Pine Script 跑在 @luxalgo/vela-pinets 这个独立插件里。那个插件是 AGPL-3.0，因为它底下的 PineTS 运行时是 AGPL-3.0 的。
Vela 本体是 Apache-2.0，不含任何 Pine 代码。但如果你要闭源产品里跑 Pine 指标，AGPL 的传染性你得先想明白。商业上能不能接受，取决于你的产品形态和法务判断，不是技术问题。
第二条，强制署名水印。
NOTICE 文件在 Apache-2.0 §4(d) 的基础上加了署名要求。每个图表都会渲染一个小的 Vela 署名水印，默认是开着的。
可以调样式和位置，也可以关掉，但有条件。必须在同一个页面或屏幕的别处给出等效的可见署名，也就是「Vela™」这个名字加上项目页链接。偷偷藏掉是不允许的。
这个做法和 TradingView 以及其他主流图表库是一个路子，商业图表库基本都这么干，不算意外，但接入前得知道。
第三条，项目不满100天。
7 月 13 日创建的仓库，到现在不到100天。npm 版本 0.8.1，还在 0.x。
具体的看提交记录。八月初把 PineEngine 从主包拆成了独立插件，九月底换了官网域名并加上 CI，十月初在做 README 品牌化。
活跃度是好的，但 API 还在动。0.x 阶段接口变更多少会打招呼，这一条得自己承担。
顺带说一句，前面几天的更新记录里，提交信息带 Co-Authored-By 的是 Claude Opus 5.5 和 Cursor。这套东西有一半是 AI 写出来的。看代码的时候心里有个数就行。
五、我帮大家跑了一遍
文档写得再好，不如自己装一次。
代码 4
npm install @luxalgo/vela仓库还带了一套自包含的浏览器构建。开发用 dist/vela.global.js，生产用 dist/vela.global.min.js。挂上 script 标签就能用，公开 API 和内置 provider 都会挂到 window.Vela。本地开发的话直接 npm run playground，是个 vite playground，默认在 5190 端口。
装完之后按三步验。先开 playground 用示例数据看渲染通不通，再接 Binance 实时源点几个内置指标看十字光标联动，最后自己画条线刷新页面看状态存没存住。
这三步都过了，再接自己的数据源。
我的判断是这样的。如果你要做的是 TradingView 风格的量化终端、Crypto Dashboard，或者把 AI Agent 接进行情工作台，这个骨架值得留着。它给你的东西比一组能画图的组件多得多。是一套分层方式清楚、每层都能替换的结构。
数据层、脚本引擎、渲染层是三个独立的接口。换掉哪一层，都不需要动别的代码。
我个人觉得反过来更值得说。如果你只是想画个 K 线看看行情，TradingView 免费版就够了。为这个引入一套 0.x 阶段的框架，不划算。
仓库在github.com/LuxAlgo/Vela，npm包名 @luxalgo/vela，官网velacharts.dev。
本文仅用于技术讨论，不构成任何操作建议。市场有风险，不推荐任何加密资产或交易策略。
数据取自 2026 年 10 月 5 日的 GitHub 仓库与 npm registry 页面。star 数、版本号、协议条款都会变，引用时请以仓库当前状态为准。
#Vela #LuxAlgo #WebGL2 #金融图表 #量化工具 #PineScript #交易终端 #前端开发 #Crypto #Dashboard
你要是也在自建行情前端或交易工作台，仓库在 github.com/LuxAlgo/Vela，留个书签。评论区说说你要接哪一层。
Be First to Comment