Opciones de gráfico compartidas

LineChartOptions y StockChartOptions incluyen los mismos controles de interacción, ejes, etiquetas, superposiciones, ventana de vista y renderizado. No se construye un gráfico base ni se importa un motor de renderizado interno.

Consulte las opciones de Línea o las opciones de Stock para los campos exactos. Los métodos en tiempo de ejecución compartidos aparecen directamente en LineChart y StockChart.

Grupos de construcción

Renderizador e interacción

• renderMode selecciona auto, worker o main. Lea el resultado real con getRenderMode().
• rendererInitializationTimeout limita el tiempo de arranque del renderizador en milisegundos. Por defecto son 15 segundos, comienza en la construcción y puede establecerse en 0 para desactivar el watchdog.
• interactive: false desactiva paneo, zoom, pellizco y selección conservando la información de hover.
• minViewportRange limita el zoom en unidades de datos X.
• yDomain: { min, max } fija uno o ambos extremos del dominio Y durante zoom, cambios de LOD y actualizaciones por streaming; los extremos omitidos permanecen con escalado automático.
• wheelZoomSpeed, wheelZoomDirection, keyboardZoomSpeed y keyboardPanSpeed ajustan la navegación.
• keyboardActivation elige el control de teclado basado en el foco o en el hover.
• keyboardAnnouncements localiza los mensajes de estado polite emitidos tras paneo, zoom, restablecimiento y cancelación de selección por teclado; su plantilla opcional viewport acepta {startPercent}, {endPercent} y {spanPercent}. Establécela en false cuando el host proporcione retroalimentación equivalente.
• animated controla las revelaciones de datos y las transiciones de viewport/ejes. Cuando se omite, prefers-reduced-motion: reduce desactiva la animación y los cambios en esa preferencia se observan mientras el gráfico permanece montado. Un explícito true o false sigue siendo normativo.

Contenido Canvas

grid, axis, chartBackground, rangeSelector, tooltip, crosshairStyle, selection, labels, overlay, padding y textDirection funcionan igual en gráficos de líneas y de acciones.

La tipografía del gráfico usa por defecto la DEFAULT_CHART_FONT_FAMILY exportada, una pila de fuentes con SFMono como primera opción. Los campos family por superficie siguen siendo autorizativos.

Use un dominio totalmente fijo cuando una visualización en vivo deba preservar la escala visual en lugar de ajustarse a cada nuevo extremo:

const chart = new LineChart(canvas, {
  yDomain: { min: 0, max: 100 },
});

yDomain está desactivado por defecto. Se comparte entre gráficos de líneas y de acciones y se aplica de forma coherente al renderizado en worker, main thread y SSR.

Controles del viewport

const current = chart.getViewport();

chart.setViewport(
  { xMin: current.xMin + 60_000, xMax: current.xMax - 60_000 },
  { animated: true },
);

chart.reset({ animated: true });

Los bordes del viewport omitidos conservan su valor actual. Los rangos se normalizan respecto al alcance de datos completo y al minViewportRange del gráfico.

Apariencia en tiempo de ejecución

El comportamiento definido solo durante la construcción y la apariencia mutable se mantienen separados de forma intencionada. getOptions() devuelve la instantánea completa normalizada. getAppearance() devuelve solo los campos que se pueden actualizar con seguridad en tiempo de ejecución. Ambos valores están tipados como instantáneas DeepReadonly; los objetos simples y arrays anidados se copian. Por tanto, aplique los cambios mediante los métodos de tiempo de ejecución en lugar de modificar los valores devueltos.

chart.updateAppearance({
  chartBackground: "#081018",
  grid: { color: "rgba(130, 180, 220, 0.16)" },
  axis: { bottom: { labelFont: { color: "#a9bac9" } } },
});

Los parches se fusionan con la apariencia actual. setLabels() y la asincrónica setOverlay() son métodos de conveniencia centrados en el mismo estado.

Agrupa cambios síncronos cuando una sola acción de usuario actualiza varias propiedades:

chart.batch(() => {
  chart.updateAppearance({ grid: { color: "#26384a" } });
  chart.setViewport({ xMin, xMax });
});

No llames a await dentro de batch; solo las llamadas síncronas realizadas antes de que la devolución de llamada retorne se coalescen.

Información emergente

El tooltip integrado se renderiza con Canvas2D. tooltip.onRender se ejecuta en el main thread y puede reemplazar su título y filas; mantenlo rápido porque el movimiento del puntero puede invocarlo con frecuencia. tooltip.onLeave es apropiado para limpiar el estado de la aplicación.

Usa titleFormat explícito para valores X numéricos grandes. La detección automática trata valores superiores aproximadamente a mil millones como parecidos a tiempo.

Superposiciones

Las superposiciones admiten texto, rectángulos, círculos, líneas e imágenes en coordenadas en ratio o en píxeles CSS relativas al área del gráfico o al lienzo completo. Las fuentes de imagen en forma de cadena se obtienen y decodifican de forma asíncrona. Espera a setOverlay() y configura CORS para imágenes remotas.

Los manejadores proporcionados por el llamador ImageBitmap siguen siendo propiedad del llamador. El worker y el main thread los clonan mediante structured-clone y solo cierran las copias propiedad del renderizador. Un background construido en tiempo de construcción o un overlay solo eager puede cerrarse después de que initialize() se cumpla. Si un overlay de construcción mezcla un bitmap del llamador con una URL u otra fuente resuelta de forma asíncrona, mantén el manejador abierto hasta que el overlay se reemplace o destruya; alternativamente, llama y espera setOverlay() tras la inicialización antes de cerrarlo.

Los backgrounds en tiempo de ejecución y los overlays solo eager pueden cerrarse después de que updateAppearance() (o su batch() contenedor) devuelva, incluso mientras la inicialización sigue pendiente. Para un overlay en tiempo de ejecución mixto o diferido, llama directamente a setOverlay() y mantiene los manejadores del llamador abiertos hasta que su promesa se resuelva. La implementación de fetch/decodificación de URL se entrega como un chunk independiente bajo demanda y no forma parte del runtime inicial del navegador.

Si algunas fuentes fallan, setOverlay() instala los ítems exitosos y rechaza con ChartOverlayError. Si todos los ítems solicitados fallan, permanece instalado el overlay previamente renderizado. Los fallos de resolución y de entrega al renderizador también alcanzan setOverlayErrorCallback() y los hooks de error del adaptador del framework. Superseder una actualización pendiente o destruir el gráfico es una cancelación rutinaria: la promesa pendiente se resuelve sin instalar y no se informa ningún error de overlay.

Accesibilidad

Sixtyfold añade semántica de reserva solo cuando el host no la ha proporcionado ya. Los gráficos interactivos reciben role="application", tabindex="0" y un nombre accesible de reserva. Los gráficos solo de visualización (interactive: false) reciben role="img" y no se añaden al orden de tabulación. Se preservan los atributos role, tabindex, aria-label y aria-labelledby existentes.

Prefiera un nombre y una descripción específicos de la aplicación:

<canvas
  aria-label="Hourly load for feeder 12"
  aria-describedby="feeder-12-summary"
></canvas>
<p id="feeder-12-summary">Latest load is 73 kW; the daily peak was 96 kW.</p>

Para un gráfico interactivo, proporcione un resumen de texto adyacente o una alternativa en tabla de datos y haga referencia a ella con aria-describedby. No imponga role="img" a un gráfico operable por teclado. El color no debe ser la única forma en que la aplicación circundante identifique una serie.

El panorámico, zoom, restablecimiento y la cancelación de selección por teclado se anuncian mediante una región viva oculta con prioridad "polite". Localice estos mensajes con keyboardAnnouncements, actualícelos posteriormente con setKeyboardAnnouncements(), o desactívelos cuando la aplicación circundante ofrezca retroalimentación equivalente. La plantilla de vista previa opcional puede añadir el inicio visible, el fin y el intervalo como porcentajes del rango de datos completo. Los mensajes animados de panorámica, zoom y restablecimiento esperan a que el viewport confirmado por el renderizador se estabilice, por lo que nunca se anuncia un fotograma intermedio de la animación.

Sixtyfold no anuncia cada muestra transmitida ni cada repintado a través de aria-live; los anuncios a alta frecuencia harían que el gráfico fuera inutilizable con un lector de pantalla. Cuando una aplicación tiene eventos significativos, como una desconexión de la fuente de datos o el cruce de un umbral, expóngalos mediante una región live controlada y con limitación de frecuencia gestionada por la propia aplicación.