Night Vision Charts™（night-vision）：面向专业交易者的高可定制图表库
Night Vision（NightVision）是一个面向专业交易者的高可定制图表库，基于 Svelte 构建，是 TradingVueJS 项目的延续——沿用其核心理念，但采用更优的设计决策并提升性能。通过 npm 安装后，可用 NightVision 类初始化图表并通过 chart.data 传入 panes/overlays 数据渲染。
社区作者 · zZz
它解决什么问题
Night Vision Charts™（仓库 project-nv/night-vision，页面标题：Highly customizable charting library, created for professional traders）是一个面向专业交易者的高可定制图表库。来源说明它是 TradingVueJS 项目的延续（continuation），借用了其核心思路，但采用了更好的设计决策并改进了性能，使用 Svelte 构建。
项目定位与特性：
- 面向专业交易者的图表能力，强调“高可定制”。
- 技术栈：Svelte 构建。
- 项目沿革：TradingVueJS 的继任/延续项目，沿用核心思路并优化设计与性能。
- 文档：来源提供交互式 [DOCS] 入口，可“Start your charting journey”，但正文未给出该链接的完整绝对网址（待核验）。
配图说明（按输入顺序编号）：配图 1（PepeNV，docs 目录下的 nv-banner.jpeg）为项目横幅；配图 2（Screen，docs 目录下的 screen.png）为界面截图，可用于了解图表的实际外观；配图 3（wink.gif）为展示动图。封面为 GitHub Open Graph 自动生成图。
使用方式（来源给出的示例流程）：
function data ( ) { return Array ( 30 ) . fill ( 1 ) . map ( ( x , i ) => [ new Date ( ${ i + 1 } Nov 2022 GMT+0000 ) . getTime ( ) , i * Math . random ( ) ] ) }
chart . data = { panes : [ { overlays : [ { name : 'APE Stock' , type : 'Spline' , data : data ( ) , settings : { precision : 2 } } ] } ] } 从示例可见数据结构为 panes → overlays，每个 overlay 可设置 name、type（示例为 'Spline'）与 settings（示例设置了 precision: 2）。
- 安装：
npm i night-vision - 引入：
import { NightVision } from 'night-vision' - 初始化：
let chart = new NightVision('<root-element-id>')，即传入页面中根元素的 id。 - 数据生成示例：
- 设置数据集：
Roadmap（来源原样列出，部分条目带 ??? 表示尚未确定）：
- Add stocks support (Index-Based mode)
- Improve the layout: x/y axis calculation
- Expand the built-in overlay collection
- Add keyboard & mouse events
- Port the script system from TVJS
- Create a built-in indicator collection
- NavyJS tutorial
- Data API (the high-level API)
- Add tool overlays ???
- Toolbar ???
- Mobile support
结尾语为 “Happy charting!”。许可证、npm 版本要求、Node 版本要求、维护状态等信息来源未明确说明，需以仓库实际文件为准（待核验）。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
来源给出的安装与使用步骤（按原文顺序整理）：
一、准备环境
- 来源仅给出 npm 安装命令，未说明 Node.js / npm 的最低版本要求（待核验）。使用前需自行确认本地已具备可用的 npm 环境。
二、安装
- 执行安装命令：
npm i night-vision三、在项目中引入
import { NightVision } from 'night-vision'
- 从包中导入 NightVision 类：
四、初始化图表
let chart = new NightVision('<root-element-id>') 注意：'<root-element-id>' 需替换为实际存在的 DOM 元素 id。
- 在页面中准备一个根元素（容器），把它的 id 传给构造函数：
五、准备并设置数据
function data ( ) { return Array ( 30 ) . fill ( 1 ) . map ( ( x , i ) => [ new Date ( ${ i + 1 } Nov 2022 GMT+0000 ) . getTime ( ) , i * Math . random ( ) ] ) }
chart . data = { panes : [ { overlays : [ { name : 'APE Stock' , type : 'Spline' , data : data ( ) , settings : { precision : 2 } } ] } ] }
- 生成示例数据（来源原文）：
- 设置数据集（panes → overlays 结构，overlay 可含 name、type、data、settings）：
六、首次运行与常见问题
- 首次运行前确认根元素已在页面中渲染完成，否则 new NightVision('<root-element-id>') 找不到容器。
- 数据需按 [时间戳, 数值] 的成对数组形式提供（来源示例如此）。
- 数值显示精度可通过 overlay 的 settings.precision 控制（示例为 2）。
- 更多用法请从来源提到的交互式 [DOCS] 入手；正文未给出该文档的完整绝对网址（待核验）。
- 来源列出了 Roadmap（stocks support、布局与坐标轴计算、内置 overlay 扩充、键鼠事件、从 TVJS 移植脚本系统、内置指标集合、NavyJS 教程、Data API、工具 overlay、工具栏、移动端支持），部分能力尚未实现，使用时需注意当前版本可能不支持相应功能。
