服务器端渲染

@sixtyfold/ssr 在一个最小化的服务器画布上以相同的 TypeScript 渲染器运行。它不导入 DOM 画布全局变量，不创建浏览器 Worker，也不执行动画。真实的折线图与股票图 PNG 输出在 Node.js、Bun 和 Deno 中持续验证。

安装 SSR 包和与您运行时相适配的 Canvas2D 实现。经验证的兼容集合使用 @napi-rs/canvas，但 Sixtyfold 不会将其作为库依赖强制要求。

生成的参考列出了精确的 SSR 函数、render 选项 和 与运行时无关的 Canvas 类型。

pnpm add @sixtyfold/ssr@1 @napi-rs/canvas

import { createCanvas } from "@napi-rs/canvas";
import { renderLineChartSSR } from "@sixtyfold/ssr";

const width = 1200;
const height = 630;
const canvas = createCanvas(width * 2, height * 2);

renderLineChartSSR(
  canvas,
  data,
  {
    animated: false,
    chartBackground: "#081018",
    series: [{ color: "#65d6ff", width: 2 }],
    axis: { bottom: { format: "time" } },
  },
  { width, height, dpr: 2 },
);

const png = await canvas.encode("png");

Canvas 实现负责图像编码。

经验证的服务器运行时

兼容性套件当前固定以下 CI 目标：

这些是可重现的 CI 目标，而非最低版本声明。每个运行时在无网络访问的情况下均可确定性地呈现 Line 和 Stock 夹具。门控比较绘图像素与固定的视觉参考，并要求每个命名标签在其有界区域内的精确布局锚点处产生可见墨迹；它还验证 PNG 签名、尺寸和编码输出。它不固定依赖字体的字形宽度或墨迹比率。PNG 作为可检查的 CI 工件予以保留。发布前，Node 的视觉参考将在 Ubuntu、macOS 和 Windows 上重复验证。

Node.js 和 Bun 直接运行同一模块：

node app.mjs
bun app.mjs

Deno 需要本地 node_modules 树以及对 Node-API canvas 插件的显式权限：

deno run \
  --allow-read \
  --allow-env \
  --allow-ffi \
  --allow-sys=homedir \
  --node-modules-dir=manual \
  app.mjs

仅在应用将编码后的图像写入磁盘时添加 --allow-write=<output-directory>。参见 运行时验证源、 Bun Node-API 支持 和 Deno 本地插件指南。

受支持的配置

SSR 接受面向渲染器的可视选项：padding、direction、grid、axes、background、范围选择器、tooltip 样式、crosshair 样式、labels、overlays、line series/细节层级、stock candles、indicators、volume profile、price lines 和 markers。浏览器专属的回调、DOM 控件、指针交互和 Workers 有意被排除。

1.0.1 辅助工具还会将图表级别的线条 marker 样式以及股票的 timeScale、showLeftPriceMarker 和 showRightPriceMarker 选项转发给共享渲染器。对于静态股票输出，使用 timeScale: "market" 来压缩缺失的观测值。显式的 axis.left.cursorLabel.visible 或 axis.right.cursorLabel.visible 设置优先于匹配的价格标记别名。静态输出不会产生悬停事件或光标移动。

即便静态渲染会立即完成，也应设置 animated: false 以便清晰。测试和生产中应使用相同的 width、height 和 dpr 合约以防止快照差异。

运行时中性画布注入

当调用方尚未拥有画布时，请在 SSRRenderOptions 中提供 createCanvas。它会接收后备存储（backing-store）尺寸。返回的对象必须包含用于渲染器的 Canvas2D 方法：width、height 和 getContext("2d")。

确定性输出

• 在渲染镜像中固定画布实现和字体。
• 如果服务器未提供浏览器字体堆栈，请传入显式字体族。
• 在请求渲染期间避免远程 URL 覆盖；在渲染前解决并缓存资产。
• 保持输入数组、图表尺寸、DPR、区域设置、时区和选项稳定。