Worker, Hauptthread und Rendering

Sixtyfold Charts verwendet ein einziges TypeScript-Rendering-Design mit drei Hosts: einem OffscreenCanvas Worker, einem asynchronen Hauptthread-Adapter und einem Server-Side-Rendering-Einstiegspunkt. Canvas2D ist das einzige Grafik-Backend.

Die Auswahl des Renderers ist Teil von LineChartOptions und StockChartOptions. Der aufgelöste Modus ist über chart.getRenderMode() verfügbar.

Automatische Auswahl

renderMode: "auto" bevorzugt einen Worker, wenn der Browser Worker, OffscreenCanvas und Canvas-Transfer unterstützt. Fehlt eine dieser Fähigkeiten oder ist die Erstellung von Workern synchron blockiert — etwa durch eine restriktive Content Security Policy —, fällt es auf den Hauptthread zurück.

const chart = new LineChart(canvas, { renderMode: "auto" });
await chart.initialize();

console.log(chart.getRenderMode()); // "worker" or "main"

renderMode: "worker" drückt eine Präferenz aus, keine Zusage; es fällt ebenfalls zurück, wenn das Rendern im Worker nicht starten kann. Verwenden Sie getRenderMode() für Telemetrie- und Supportinformationen.

Worker-Modus

Der Worker-Modus überträgt die Kontrolle über das Canvas und große typisierte Array-Puffer. Er ist der bevorzugte Pfad für interaktive Diagramme mit mehreren Millionen Punkten, da Hierarchieaufbau, Culling, Layout und Zeichnen den UI-Task des Browsers nicht blockieren.

Callbacks im Hauptthread, wie benutzerdefinierte Tooltip-Renderings, erhalten kompakte Renderer-Nachrichten statt direkten Zugriff auf den Worker-Zustand. Halten Sie Callbacks deterministisch und schnell.

Modus im Hauptthread

Verwenden Sie renderMode: "main" für Testumgebungen, Browser ohne überträgliche Canvas, strikte Hosts, die Worker verbieten, oder kleinere statische Diagramme, bei denen einfachere Integration wichtiger ist als die Isolierung des UI-Threads.

Der Adapter im Hauptthread liefert Renderer-Nachrichten bewusst asynchron. Gehen Sie nicht davon aus, dass ein Aufruf von setData das erste Frame synchron abgeschlossen hat; verwenden Sie Statistiken oder eine anwendungsseitige Bereitschafts-UI, wenn der Abschluss des Frames relevant ist.

Release‑Checks testen Line und Stock sowohl über den Hauptthread‑Pfad als auch über den produktions‑Standardpfad auto in Chromium, Firefox und WebKit. Auf fähigen Engines löst sich auto als OffscreenCanvas‑Worker auf. Der erzwungene‑Worker‑Vertrag läuft ebenfalls in Chromium. Dies verifiziert Kompatibilität, nicht eine geräteunabhängige Bild‑/Frame‑Rate‑Garantie.

Größenbestimmung und DPR

Setzen Sie die CSS‑Breite und -Höhe des Canvas über das Layout. Sixtyfold beobachtet Elementgröße und device‑pixel‑ratio‑Änderungen und aktualisiert dann den Backing‑Store und das Renderer‑Layout. resize() bleibt verfügbar, wenn ein Host das Layout so ändert, dass dies nicht sofort beobachtbar ist.

Vermeiden Sie es, für responsive Charts lediglich die Canvas‑Attribute width und height zu setzen. Diese Attribute sind Backing‑Store‑Werte, während die öffentlichen Größen‑ und Stilfelder von Sixtyfold Charts CSS‑Pixel verwenden.

Content Security Policy

Eine restriktive Produktions‑Policy benötigt üblicherweise:

default-src 'self';
script-src 'self';
worker-src 'self';
img-src 'self' data: blob:;
connect-src 'self';

Passen Sie dieses Beispiel an Ihre Anwendung an und übernehmen Sie es nicht blind. Externe Overlay‑Bilder erfordern ihren Ursprung in img-src sowie kompatible CORS‑Antwortheader.

Sichtbarkeit und Aufräumen

Das Browser-Chart pausiert oder vermeidet unnötige Arbeit, wenn es nicht sichtbar ist. Das optionale Safari-Keep‑alive-Intervall ist standardmäßig deaktiviert und sollte nur aktiviert werden, nachdem die Ressourcenfreigabe auf den Ziel‑Safari‑Versionen reproduziert wurde.

Rufen Sie immer destroy() auf, bevor Sie die Canvas dauerhaft verwerfen. In Single‑Page‑Applications sind Framework‑Aufräum‑Hooks der richtige Ort dafür.

Framework‑Readiness‑Callbacks bestätigen die Initialisierung und die erfolgreiche anfängliche Prop‑Installation, nicht ein gemalten Canvas‑Frame. React 19.2+ Activity‑Verbergen behält den gemounteten Renderer und seinen Speicher bis zur tatsächlichen Demontage; es ist keine Grenze zur Worker‑Entsorgung. Siehe den adapter‑Lifecycle‑Kontrakt für versteckte Refs, aufgeschobene Callbacks und Fehler‑Recovery.