Live-Beispielgruppen

Jedes Dokumentationsbeispiel koppelt ein interaktives Diagramm mit einem synchronisierten, schreibgeschützten, kopierbaren TypeScript. Beispiele verwenden kuratierte Datensätze, damit die Dokumentation auf Mobilgeräten reaktionsfähig bleibt; die Entwickler-Workbench demonstriert maximale Datenmengen.

LOD-Kalibrierung

Die untenstehende interaktive Gruppe hält ihren kuratierten Datensatz stabil und stellt density, rebaseRatio und quantizationStep für die adaptive Detailstufe bereit. Die Vorschau aktualisiert über setLODOptions; die angrenzende, synchronisierte und kopierbare TypeScript ist schreibgeschützt.

Laufzeiterscheinung

Die Beispiele verwenden das auf dieser Website ausgewählte Theme. Die stabile API-ID default wählt Midnight aus. Unter Themes finden Sie die aktuellen hellen und dunklen Presets sowie die Einrichtung eines Selektors. Die Line API und Stock API dokumentieren die genauen Optionen und Member; die Anleitungen zu Linien- und Börsendiagrammen, Rendering, Streaming und SSR bieten aufgabenorientierte Beispiele.

Lebenszyklusvertrag des Beispiels

Die Vorschau zerstört ihr Diagramm, wenn sich Route oder Locale ändern. Sie verwendet einen kuratierten Hauptthread-Datensatz, damit sie auf Mobilgeräten reaktionsfähig bleibt; die anonyme Entwickler-Workbench ist der Ort für Worker-Demonstrationen mit mehreren Millionen Punkten.

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