60FOLDCOMPONENTS

安装

为你的图表安装最小的 Sixtyfold 包集。

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

包索引

需要安装Import/reference
折线、范围、柱状、点图或堆叠面积图@sixtyfold/lineLineChart 和 LineChartOptions
蜡烛图、OHLCV、成交量或指标图@sixtyfold/stockStockChart 和 StockChartOptions
React、Vue、Angular、Svelte 或 SolidJS 宿主@sixtyfold/<framework> 加上一个图表引擎共享适配器契约
静态服务器渲染图表@sixtyfold/ssr 加上一个 Canvas2D 实现服务器端渲染
公共外观预设@sixtyfold/themes主题
本地 AI 编码工具上下文@sixtyfold/mcpMCP 工具、资源与提示
pnpm add @sixtyfold/line@next
npm install @sixtyfold/stock@next

仅在需要时添加可选包：

pnpm add @sixtyfold/themes@next @sixtyfold/ssr@next

框架适配器为独立包。安装一个适配器以及该应用使用的图表引擎：

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

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

相同模式可通过 @sixtyfold/angular、@sixtyfold/svelte 和 @sixtyfold/solid 获得。导入它们的 /line 或 /stock 入口点。关于生命周期、SSR 和类型化数组示例，请参见 框架适配器。

可选的 MCP 开发工具

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

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

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

最小折线图

为画布指定明确的 CSS 尺寸。Sixtyfold 监听该元素并使用活动设备像素比解析 backing-store 大小。

<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 配置中。确切配置见 框架适配器。

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

清理

chart.destroy();

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