由于 trendforge.devlive.top 访问受限，请切换到 trendforge.devlive.org 域名
Vela 金融图表库 5分钟快速开始
通过最简单的例子，在 5 分钟内创建一个包含 Vela 图表的网页并看到交互效果。
环境要求
支持的操作系统
运行环境
所需工具
查看和交互图表
编写代码
操作步骤
创建项目目录
在终端中创建一个新的目录，并进入该目录。
mkdir vela-democd vela-demo预期结果：：终端提示符显示新目录路径。
在 Windows 上可以使用 PowerShell 或 CMD 执行相同的命令。
初始化项目并安装依赖
使用 npm 初始化项目并安装 Vela 核心库。
npm init -ynpm install @luxalgo/vela预期结果：：npm 将开始下载并安装包，最后在 `node_modules` 目录下生成 `@luxalgo/vela`。
请确保网络连接正常，下载可能需要一些时间。
创建 HTML 文件
创建一个 `index.html` 文件，并粘贴以下基础代码。
创建 `index.html` 文件（使用编辑器或 `echo` 命令）预期结果：：生成一个名为 `index.html` 的文件。
确保文件内容如下（为简洁，此处为完整代码结构）： html <!DOCTYPE html> <html> <head> <title>Vela Chart Demo</title> <style>body, html { margin: 0; height: 100%; } #chart { width: 100%; height: 100vh; }</style> </head> <body> <div id="chart"></div> <script type="module"> import { createChart } from '/node_modules/@luxalgo/vela/dist/vela.global.js'; const chart = createChart(document.getElementById('chart'), { width: window.innerWidth, height: window.innerHeight }); // 使用内置数据提供者加载示例数据 chart.data.load({ symbol: 'BINANCE:BTCUSDT', resolution: '1D' }); </script> </body> </html>
启动本地服务器
使用一个简单的本地服务器（如 `serve`）来提供文件，因为浏览器需要模块加载。
npx serve预期结果：：服务器启动，并在终端显示本地访问地址，通常是 `http://localhost:3000`。
如果 `npx` 命令不可用，请先全局安装 `serve`：`npm install -g serve`，然后运行 `serve`。
查看图表
在浏览器中打开本地服务器地址。
在浏览器中打开 `http://localhost:3000`预期结果：：您将看到一个完整的、交互式的金融图表，显示 BTC/USDT 的每日 K 线数据。图表应支持鼠标滚动、缩放和移动。
如果图表是空白的，请检查浏览器开发者工具控制台（F12）是否有错误。最常见的错误是资源路径问题。
验证成功
当您在浏览器中看到一个功能完整的交互式 K 线图表时，说明项目已成功运行。
快速提示
Vela 使用本地渲染器，默认尝试 WebGL2，如果失败则回退到 Canvas2D。
快速按下 `?` 键可以打开快捷键面板。
默认情况下，图表会加载 `BINANCE:BTCUSDT` 的日线数据。您可以通过 `data.load()` 方法更改数据源。
如果您想完全离线使用，可以在配置中提供自己的 `data` 数组。
常见问题
图表区域为空白。
1. 按 F12 打开浏览器开发者工具，查看控制台（Console）中的错误信息。 2. 确认 `index.html` 文件中 `script` 标签的 `src` 路径指向 `/node_modules/@luxalgo/vela/dist/vela.global.js`。 3. 确保本地服务器（`serve`）正在运行。
npm install 速度很慢或失败。
1. 检查网络连接。 2. 尝试更换 npm 镜像源，例如使用淘宝镜像：`npm install -g @luxalgo/vela --registry=https://registry.npmmirror.com`。
图表显示，但数据加载失败。
1. 检查网络请求，Vela 的内置提供者（如 Binance）可能需要访问外部 API。 2. 如果您在受限制的网络环境，请考虑使用离线数据。
下一步
查看完整文档
访问项目主页的文档部分，了解所有配置选项和 API。
探索插件 SDK
如果您想创建自定义图表类型或渲染层，可以研究插件 SDK。
尝试不同的数据提供者
在 `chart.data.load()` 中替换 `symbol` 和 `resolution`，或者尝试其他内置提供者如 Coinbase。
集成到现有项目
将 `createChart` 函数集成到您的前端框架（如 React, Vue）项目中。
相关项目推荐
freeCodeCamp/freeCodeCamp
freeCodeCamp.org开源代码库与课程体系，免费学习数学、编程与计算机科学
openclaw/openclaw
属于你个人的AI助手。全操作系统支持。全平台兼容。龙虾之道。🦞
nilbuild/developer-roadmap
交互式路线图、指南及其他教育内容，助力开发者职业成长。
morluto/rea
使用代理对任何内容进行逆向工程，从应用程序行为到本机二进制文件。
anomalyco/opencode
开源编程智能体
vuejs/vue
此仓库为Vue 2版本。Vue 3版本请访问https://github.com/vuejs/core