Workers, hilo principal y renderizado

Sixtyfold tiene un diseño de renderizado TypeScript con tres anfitriones: un worker OffscreenCanvas, un adaptador asíncrono en el hilo principal y el punto de entrada de renderizado en servidor. Canvas2D es el único backend gráfico.

La selección del renderizador forma parte de LineChartOptions y StockChartOptions. El modo resuelto está disponible desde chart.getRenderMode().

Selección automática

renderMode: "auto" prefiere un worker cuando el navegador soporta Worker, OffscreenCanvas y la transferencia de canvas. Vuelve al hilo principal cuando faltan esas capacidades o la construcción del worker queda bloqueada de forma síncrona, incluido por una Política de Seguridad de Contenido restrictiva.

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

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

renderMode: "worker" expresa una preferencia, no una promesa; sigue retrocediendo cuando no puede iniciarse el renderizado en worker. Use getRenderMode() para telemetría e información de soporte.

Modo worker

El modo worker transfiere el control del canvas y de los buffers tipados grandes. Es la ruta preferida para gráficos interactivos con millones de puntos porque la construcción de jerarquías, el recorte, el diseño y el dibujo no ocupan la tarea de interfaz de usuario del navegador.

Las callbacks en el hilo principal, como el renderizado personalizado de tooltips, reciben mensajes compactos del renderer en lugar de acceso directo al estado del worker. Mantenga las callbacks deterministas y rápidas.

Modo en el hilo principal

Use renderMode: "main" para entornos de prueba, navegadores sin canvases transferibles, hosts estrictos que prohíben workers o gráficos estáticos más pequeños donde una integración más simple es más importante que el aislamiento del hilo de la UI.

El adaptador del hilo principal entrega intencionadamente los mensajes del renderer de forma asíncrona. No suponga que llamar a setData ha completado sincrónicamente su primer fotograma; use estadísticas o una interfaz de preparación a nivel de aplicación cuando la finalización del fotograma sea importante.

Las comprobaciones de lanzamiento ejercitan Line y Stock tanto a través de la ruta del hilo principal como de la ruta por defecto de producción auto en Chromium, Firefox y WebKit. En motores capaces, auto se resuelve en un worker OffscreenCanvas. El contrato de worker forzado también se ejecuta en Chromium. Esto verifica compatibilidad, no una garantía de tasa de fotogramas independiente del dispositivo.

Dimensionado y DPR

Establezca el ancho y alto CSS del canvas mediante el diseño. Sixtyfold observa cambios en el tamaño del elemento y en la relación de píxeles del dispositivo, y luego actualiza la copia de trabajo y el diseño del renderer. resize() permanece disponible cuando un host cambia el diseño de una forma que no puede observarse inmediatamente.

Evite establecer únicamente los atributos de canvas width y height para gráficos responsivos. Esos atributos son valores de backing-store, mientras que los tamaños públicos y campos de estilo de Sixtyfold Charts usan píxeles CSS.

Política de Seguridad de Contenidos

Una política restrictiva en producción suele requerir:

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

Adapte este ejemplo a la aplicación en lugar de copiarlo a ciegas. Las imágenes remotas de superposición requieren su origen en img-src y cabeceras CORS compatibles.

Visibilidad y limpieza

El gráfico en el navegador se pausa o evita trabajo innecesario cuando no es visible. El intervalo opcional de mantenimiento en Safari está desactivado por defecto y solo debe habilitarse tras reproducir la recuperación de recursos en las versiones objetivo de Safari.

Siempre llame a destroy() antes de descartar permanentemente el canvas. En aplicaciones de una sola página, los hooks de limpieza del framework son el lugar correcto.

Las callbacks de preparación del framework confirman la inicialización y la instalación inicial de propiedades con éxito, no un fotograma de canvas pintado. React 19.2+ Activity al ocultar conserva el renderer montado y su memoria hasta el desmontado real; no es un límite de eliminación del worker. Consulte el contrato de ciclo de vida del adaptador adapter para refs ocultas, callbacks diferidos y recuperación de errores.