Groupes d’exemples interactifs

Chaque exemple de documentation associe un graphique interactif à un TypeScript en lecture seule, synchronisé et copiable. Les exemples utilisent des jeux de données sélectionnés afin que la documentation reste réactive sur mobile ; le banc d’essai d’ingénierie démontre des volumes de données maximaux.

Calibration du niveau de détail

Le groupe interactif ci‑dessous conserve son jeu de données sélectionné tout en exposant density, rebaseRatio et quantizationStep pour la politique LOD adaptative. L’aperçu se met à jour via setLODOptions ; son TypeScript adjacent est en lecture seule, synchronisé et copiable.

Apparence à l’exécution

Les exemples suivent le thème sélectionné sur ce site. L’identifiant d’API stable default sélectionne Midnight. Consultez Thèmes pour connaître les presets clairs et sombres actuels et configurer un sélecteur. Utilisez la Line API et la Stock API pour les options et membres exacts ; les guides des courbes, graphiques financiers, du rendu, du streaming et du SSR proposent des exemples axés sur des tâches.

Contrat de cycle de vie de l’exemple

L’aperçu détruit son graphique lorsque la route ou la locale change. Il utilise un jeu de données ancré dans le thread principal afin de rester réactif sur mobile ; le banc d’essai d’ingénierie anonyme est l’endroit pour les démonstrations worker à plusieurs millions de points.

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