Representación en servidor

@sixtyfold/ssr ejecuta el mismo renderizador TypeScript contra un canvas mínimo en servidor. No importa globals de canvas del DOM, ni crea workers de navegador, ni anima. La salida real en PNG de Line y Stock se verifica continuamente en Node.js, Bun y Deno.

Instale el paquete SSR y una implementación de Canvas2D adecuada para su runtime. El conjunto de compatibilidad verificado usa @napi-rs/canvas, pero Sixtyfold Charts no lo impone como dependencia de la biblioteca.

La referencia generada enumera las funciones exactas SSR, las opciones de renderizado y los tipos de lienzo neutrales con respecto al tiempo de ejecución.

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");

La implementación del lienzo es la responsable de la codificación de imágenes.

Runtimes de servidor verificados

La suite de compatibilidad actualmente fija estos objetivos de CI:

Estos son objetivos reproducibles de CI, no declaraciones de versión mínima. Cada runtime renderiza fixtures deterministas de Line y Stock sin acceso a la red. La puerta compara los píxeles del gráfico con una referencia visual fijada y exige que cada etiqueta nombrada produzca tinta visible en su ancla de diseño exacta dentro de una región limitada; también valida firmas PNG, dimensiones y la salida codificada. No fija anchos de glifos ni proporciones de tinta dependientes de la fuente. Los PNG se conservan como artefactos de CI inspeccionables. Antes del lanzamiento, la referencia visual de Node se repite en Ubuntu, macOS, y Windows.

Node.js y Bun ejecutan el mismo módulo directamente:

node app.mjs
bun app.mjs

Deno requiere un árbol local node_modules y permisos explícitos para el addon Canvas de Node‑API:

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

Añada --allow-write=<output-directory> solo cuando la aplicación escriba imágenes codificadas en disco. Consulte la verificación de tiempo de ejecución de origen, la compatibilidad de Bun con Node‑API y la guía de addons nativos de Deno.

Configuración soportada

SSR acepta opciones visuales orientadas al renderizador: padding, direction, grid, axes, background, selector de intervalo, estilo del tooltip, estilo del crosshair, labels, overlays, series de líneas/LOD, velas de mercado, indicadores, perfil de volumen, líneas de precio y marcadores. Callbacks exclusivos del navegador, controles DOM, interacción por puntero y workers están intencionadamente ausentes.

Los helpers 1.0.1 también reenvían la configuración de estilo de línea a nivel de gráfico marker y las opciones de stock timeScale, showLeftPriceMarker y showRightPriceMarker a los renderizadores compartidos. Use timeScale: "market" para comprimir observaciones ausentes en la salida estática de stock. Las configuraciones explícitas axis.left.cursorLabel.visible o axis.right.cursorLabel.visible tienen precedencia sobre los alias de marcadores de precio correspondientes. La salida estática no genera eventos de hover ni movimiento del cursor.

Establezca animated: false por claridad aunque el renderizado estático se complete de inmediato. Use el mismo contrato width, height y dpr en pruebas y producción para evitar diferencias en snapshots.

Inyección de canvas neutral respecto al runtime

Cuando el llamador no posee ya el lienzo, suministre createCanvas en SSRRenderOptions. Este recibe las dimensiones del backing-store. El objeto devuelto necesita width, height y getContext("2d") con los métodos Canvas2D utilizados por el renderer.

Salida determinista

• Fije la implementación del lienzo y las fuentes en la imagen de renderizado.
• Proporcione una familia tipográfica explícita si el servidor no ofrece la pila del navegador.
• Evite superposiciones de URL remotas durante el renderizado por petición; resuelva y almacene en caché los recursos antes de renderizar.
• Mantenga estables las matrices de entrada, el tamaño del gráfico, el DPR, la configuración regional, la zona horaria y las opciones.