Server-seitiges Rendering

@sixtyfold/ssr führt denselben TypeScript-Renderer gegen eine minimale Server-Canvas aus. Es importiert keine DOM-Canvas-Globals, erstellt keine Browser-Worker und animiert nicht. Echtes Line- und Stock-PNG-Ausgabe wird fortlaufend in Node.js, Bun und Deno verifiziert.

Installieren Sie das SSR-Paket und eine für Ihre Laufzeit geeignete Canvas2D-Implementierung. Der verifizierte Kompatibilitätsumfang verwendet @napi-rs/canvas, aber Sixtyfold erzwingt dies nicht als Bibliotheksabhängigkeit.

Die generierte Referenz listet die genauen SSR-Funktionen, Render‑Optionen und laufzeitneutralen Canvas‑Typen.

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

Die Canvas‑Implementierung ist für die Bildkodierung zuständig.

Verifizierte Server‑Runtimes

Die Kompatibilitäts‑Suite legt derzeit diese CI‑Ziele fest:

Dies sind reproduzierbare CI-Ziele, keine Mindestversionsangaben. Jede Laufzeit rendert deterministische Line- und Stock-Fixtures ohne Netzwerkzugriff. Das Gate vergleicht Plot-Pixel mit einer festgelegten visuellen Referenz und verlangt, dass jedes benannte Label an seinem genauen Layout-Anker innerhalb eines begrenzten Bereichs sichtbare Tinte erzeugt; es validiert außerdem PNG-Signaturen, Abmessungen und kodierte Ausgabe. Es legt keine fontabhängigen Glyphenbreiten oder Tintenverhältnisse fest. Die PNGs werden als prüfbare CI-Artefakte aufbewahrt. Vor der Freigabe wird die Node-Referenz unter Ubuntu, macOS, und Windows wiederholt.

Node.js und Bun führen dasselbe Modul direkt aus:

node app.mjs
bun app.mjs

Deno benötigt einen lokalen node_modules-Baum und explizite Berechtigungen für das Node‑API‑Canvas‑Addon:

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

Fügen Sie --allow-write=<output-directory> nur hinzu, wenn die Anwendung kodierte Bilder auf die Festplatte schreibt. Siehe die Laufzeit‑Verifizierungsquelle, Bun‑Node‑API‑Unterstützung und Deno‑Native‑Addon‑Anleitung.

Unterstützte Konfiguration

SSR akzeptiert rendererseitige Visual‑Optionen: padding, direction, grid, axes, background, Bereichsauswahl, tooltip‑Stil, crosshair‑Stil, Labels, Overlays, Linien‑Series/LOD, Stock‑Candles, Indikatoren, Volume‑Profile, Preislinien und Marker. Browser‑spezifische Callbacks, DOM‑Steuerelemente, Pointer‑Interaktion und Worker sind bewusst nicht enthalten.

Die 1.0.1‑Hilfsfunktionen leiten außerdem auf Chart‑Ebene Linien‑marker‑Styling und die Stock‑Optionen timeScale, showLeftPriceMarker und showRightPriceMarker an die gemeinsamen Renderer weiter. Verwenden Sie timeScale: "market", um fehlende Beobachtungen in statischen Stock‑Ausgaben zu komprimieren. Explizite axis.left.cursorLabel.visible‑ oder axis.right.cursorLabel.visible‑Einstellungen haben Vorrang vor den entsprechenden Price‑Marker‑Aliasen. Statische Ausgaben erzeugen keine Hover‑Events oder Cursorbewegung.

Setzen Sie animated: false zur Klarheit, auch wenn das statische Rendern sofort abgeschlossen ist. Verwenden Sie denselben width, height und dpr‑Vertrag in Tests und Produktion, um Snapshot‑Unterschiede zu vermeiden.

Laufzeitneutrale Canvas‑Injection

Wenn ein Aufrufer das Canvas noch nicht besitzt, übergeben Sie createCanvas in SSRRenderOptions. Es erhält Backing‑Store‑Abmessungen. Das zurückgegebene Objekt muss width, height und getContext("2d") mit den vom Renderer verwendeten Canvas2D‑Methoden bereitstellen.

Deterministische Ausgabe

• Fixieren Sie die Canvas‑Implementierung und Schriftarten im Rendering‑Image.
• Geben Sie eine explizite Schriftfamilie an, wenn der Server den Browser‑Schriftstapel nicht zur Verfügung stellt.
• Vermeiden Sie Überlagerungen durch Remote‑URLs während der Anforderungs‑Rendering‑Phase; lösen Sie Assets auf und cachen Sie sie, bevor Sie rendern.
• Halten Sie Eingabe‑Arrays, Diagrammgröße, DPR, Gebietsschema, Zeitzone und Optionen stabil.