Grupos de ejemplos en vivo

Cada ejemplo de la documentación empareja un gráfico interactivo con un TypeScript sincronizado, de solo lectura y copiable. Los ejemplos usan conjuntos de datos seleccionados para que la documentación siga siendo sensible en móviles; el banco de trabajo de ingeniería demuestra volúmenes de datos máximos.

Calibración de LOD

El grupo interactivo siguiente mantiene su conjunto de datos seleccionado estable mientras expone density, rebaseRatio y quantizationStep para la política adaptativa de LOD. La vista previa se actualiza mediante setLODOptions; su TypeScript adyacente es de solo lectura, está sincronizado y es copiable.

Apariencia en tiempo de ejecución

Los ejemplos siguen el tema seleccionado en este sitio. El identificador estable de la API default selecciona Midnight. Consulte Temas para ver los presets claros y oscuros actuales y cómo configurar un selector. Use la Line API y la Stock API para consultar opciones y miembros exactos; las guías de líneas, gráficos bursátiles, renderizado, streaming y SSR ofrecen ejemplos centrados en tareas.

Contrato de ciclo de vida del ejemplo

La vista previa destruye su gráfico cuando cambia la ruta o la configuración regional. Usa un conjunto de datos en el main thread seleccionado para seguir siendo sensible en móviles; el banco de trabajo anónimo de ingeniería es el lugar para demostraciones en worker con millones de puntos.

import { LineChart } from "@sixtyfold/line";
import { getThemePreset } from "@sixtyfold/themes";

const preset = getThemePreset("default");
const chart = new LineChart(canvas, {
  ...preset.line.appearance,
  renderMode: "main",
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.12,
    quantizationStep: 0.10,
  },
});

await chart.initialize();
chart.setMultiSeriesData(data);
chart.updateAppearance(preset.line.appearance);
preset.line.series.forEach((series, index) => {
  chart.updateSeriesAppearance(index, series);
});