安装 · Sixtyfold Components

Sixtyfold 包仅为 ESM，并发布在 @sixtyfold npm 作用域下。Core、Line 和 Stock 浏览器运行时没有第三方运行时依赖；Line 和 Stock 仅依赖 Core。框架适配器将宿主框架声明为 peer 依赖，SSR 使用由应用提供的 Canvas2D 实现，可选的 MCP 开发工具作为独立本地进程运行。

当前稳定版本为 1.0.2，发布于 2026 年 11 月 1 日。此版本修复了在 Firefox 159 中可见性或焦点变化后 Line 和 Stock Worker 图表变得不可用的问题。公共 API 无更改。升级时请查看 1.0.2 发布说明和流式契约。请保持 engines、adapters、SSR 包和可选 MCP 工具的发布版本一致；下面的 @1 命令用于选择当前稳定的 v1 发行版。

软件包索引

需要	安装	导入/引用
折线、范围、柱状、点或堆叠面积图	`@sixtyfold/line`	`LineChart` 和 `LineChartOptions`
蜡烛图、OHLCV、成交量或指标图	`@sixtyfold/stock`	`StockChart` 和 `StockChartOptions`
React、Vue、Angular、Svelte 或 SolidJS 承载	`@sixtyfold/<framework>` 以及一个图表引擎	共享适配器契约
静态服务器渲染图表	`@sixtyfold/ssr` 外加 Canvas2D 实现	服务器端渲染
公共外观预设	`@sixtyfold/themes`	主题
本地 AI 编码工具上下文	`@sixtyfold/mcp`	MCP 工具、资源与提示

pnpm add @sixtyfold/line@1

npm install @sixtyfold/stock@1

仅在需要时添加可选软件包：

pnpm add @sixtyfold/themes@1 @sixtyfold/ssr@1

框架适配器为单独软件包。为该应用安装一个适配器，并只安装该应用使用的图表引擎：

# React line chart — stock is not installed
pnpm add @sixtyfold/react@1 @sixtyfold/line@1

# Vue stock chart — line is not installed
pnpm add @sixtyfold/vue@1 @sixtyfold/stock@1

相同模式可通过 @sixtyfold/angular、@sixtyfold/svelte 和 @sixtyfold/solid 使用。导入其 /line 或 /stock 入口点。参见 Framework adapters，了解生命周期、SSR 和类型化数组示例。

可选的 Model Context Protocol（MCP）开发者工具

@sixtyfold/mcp 是为 AI 编码工具提供的独立本地进程。它可以检查精确的带版本 API、推荐最小的包集、生成框架集成、检查图表选项，并帮助诊断渲染或性能问题。

{
  "mcpServers": {
    "sixtyfold": {
      "command": "npx",
      "args": ["-y", "@sixtyfold/mcp@1"]
    }
  }
}

它不是图表的依赖项，不会进入浏览器包，也不是使用 Sixtyfold 的必需项。有关完整的工具、隐私和验证参考，请参阅 MCP server。

最小折线图

为画布指定明确的 CSS 大小。Sixtyfold 会观察该元素并根据活动设备像素比解析后备存储大小。

<canvas id="chart" style="display:block;width:100%;height:420px"></canvas>

import { LineChart } from "@sixtyfold/line";

const canvas = document.querySelector<HTMLCanvasElement>("#chart");
if (!canvas) throw new Error("Chart canvas was not found");

const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Temperature", unit: { suffix: " °C", decimals: 1 } }],
});

await chart.initialize();
chart.setData({
  x: new Float64Array([1711929600000, 1711933200000, 1711936800000]),
  y: new Float64Array([12.4, 13.1, 12.8]),
  length: 3,
});

打包器与安全策略

Worker 的构造使用由包发出的 ESM worker URL。应让打包器处理包导入，而不是将已编译文件复制到公共目录。内容安全策略必须通过 worker-src 'self' 允许同源 Worker；如果不允许，renderMode: "auto" 将回退到主线程。

Angular 的应用构建器是例外：将 Line 或 Stock 包中的 dist/assets 目录添加到应用的 assets 配置中。确切配置见 Framework adapters。

Sixtyfold 不会自动加载字体、分析、主题、数据或其他网络资源。基于 URL 的覆盖图像是例外，因为调用方明确提供了它们的 URL。

清理

chart.destroy();

销毁后请勿重用图表。在附加新的画布时请构造一个新实例。