Sixtyfold Charts

Sixtyfold Charts 是一个 TypeScript 和 Canvas2D 图表库，适用于常规 DOM 或 SVG 呈现无法处理的大型数据集。浏览器图表在支持时使用 Web Worker 以将准备和渲染移出 UI 线程；在需要时相同的渲染器会回退到主线程。

对多系列折线、阶梯、区间、点、条形和堆叠面积使用 @sixtyfold/line。对 OHLCV 蜡烛图、成交量、指标、成交量分布、价格线和事件标记使用 @sixtyfold/stock。

浏览器图表运行时没有第三方依赖：Core、Line 和 Stock 仅依赖 Sixtyfold 包。框架适配器重用宿主应用中已有的框架，而可选的 MCP 开发工具独立运行，且绝不进入图表包中。

从这里开始

仅安装所需的包。
构建一个折线图或股票图。
选择原生 vanilla TypeScript 或框架适配器。
在加载生产数据前阅读已键入数组所有权契约。

每个浏览器集成都具有相同的生命周期：

const chart = new LineChart(canvas, options);
await chart.initialize();
chart.setMultiSeriesData(data);

// When the view is permanently removed:
chart.destroy();

细节层级（LOD）

LOD 意味着细节层级。它是图表针对更大数据集的自动屏幕尺寸表示：折线图保留重要的极值和间隙，而股票图将蜡烛合并为有效的 OHLCV 区间。缩放时会显示更细的细节。

相同的原理在 3D 游戏中也很常见：远处物体使用更简单的模型，因为屏幕无法显示每个多边形，随着相机靠近会增加细节。在图表中，可见范围取代了相机距离——概览绘制受限的摘要而不是数百万个无法区分的样本，缩放时恢复更细的数据。默认设置适用于大多数应用。

更进一步

在更改呈现设置前，请参阅性能指南和实时细节层级校准。
在 Worker 与主线程渲染之间进行选择，或使用服务端渲染生成静态输出。
当编码代理需要确切的已安装 API 时，连接本地 Model Context Protocol（MCP）服务器。
需要精确选项、方法或数据类型时，打开折线 API或股票 API。
当图表为空白、缓慢、尺寸不正确或未释放资源时，从故障排除开始。

项目谱系

Sixtyfold Charts 源自构建其前身 99ff00/react-charty 时获得的经验教训。Sixtyfold 是一种新的架构和产品，而非简单的重命名发布。

研究基础

Sixtyfold 的渲染器和 LOD 系统是原创的 TypeScript 实现。下列出版物为设计提供了信息；这些链接承认该传承，而非代码来源、关联或认可。

直接影响

M4: 面向可视化的时间序列数据聚合 — Uwe Jugel、Zbigniew Jerzak、Gregor Hackenbroich 和 Volker Markl，PVLDB（2014）。为显示尺度区间内使用的有序 first/minimum/maximum/last 摘要提供了信息。
OM3: 一种用于交互式渐进式时间序列可视化的有序多级最小-最大表示法 — Yunhai Wang 等，PACM（2023）。为使用层次结构回答任意可见范围查询而无需重新扫描每个可见源点提供了参考。Sixtyfold 未采纳 OM3 的数据库表示或渐进式协议。
折线图可视化的数据点选择：方法学评估与循证指南 — Jonas Van Der Donckt、Jeroen Van Der Donckt、Michael Rademaker 和 Sofie Van Hoecke（2023）。其对平移、缩放和流媒体期间视觉稳定性的评估为 Sixtyfold 的锚定量化展示网格提供了参考。

评估的替代方案

为可视化表示对时间序列进行下采样 — Sveinn Steinarsson，冰岛大学（2013）。介绍了在设计期间评估的最大三角三桶（LTTB）家族。Sixtyfold 不实现 LTTB；其生产线 LOD 使用保留极值的分层区间摘要。

这些引用仅描述研究影响。Sixtyfold 不再现论文文本、图表或参考实现。出版物和代码许可证与 Sixtyfold 许可证分开。