60FOLDCOMPONENTS

Gemeinsame Diagrammoptionen

Optionen und Laufzeitsteuerungen, die sowohl bei Linien- als auch bei Aktiencharts verfügbar sind.

LineChartOptions und StockChartOptions enthalten dieselben Interaktions-, Achsen-, Beschriftungs-, Overlay-, Viewport- und Rendering-Steuerelemente. Sie erstellen kein Basisdiagramm und importieren keine interne Rendering‑Engine.

Verwenden Sie die Line options oder die Stock options als Referenz für die genauen Felder. Gemeinsame Laufzeitmethoden erscheinen direkt auf LineChart und StockChart.

Aufbaugruppen

Renderer und Interaktion

  • renderMode wählt auto, worker oder main aus. Das tatsächliche Ergebnis lesen Sie mit getRenderMode().
  • rendererInitializationTimeout begrenzt die Startzeit des Renderers in Millisekunden. Standard ist 15 Sekunden, der Timer beginnt bei der Konstruktion und kann auf 0 gesetzt werden, um den Watchdog zu deaktivieren.
  • interactive: false deaktiviert Schwenken, Zoomen, Pinch- und Auswahlgesten, behält jedoch Hover-Informationen bei.
  • minViewportRange begrenzt das Hereinzoomen auf X-Daten-Einheiten.
  • yDomain: { min, max } fixiert eine oder beide Y-Domain-Kanten über Zoom-, LOD-Änderungen und Streaming-Updates hinweg; weggelassene Kanten bleiben automatisch skaliert.
  • wheelZoomSpeed, wheelZoomDirection, keyboardZoomSpeed und keyboardPanSpeed stimmen die Navigation ab.
  • keyboardActivation wählt fokusbasierte oder hoverbasierte Tastatursteuerung.
  • keyboardAnnouncements lokalisiert die höflichen Statusmeldungen, die nach Tastatur-Pan, Zoom, Zurücksetzen und Abbrechen von Auswahl ausgegeben werden; seine optionale viewport-Vorlage akzeptiert {startPercent}, {endPercent} und {spanPercent}. Setzen Sie es auf false, wenn der Host äquivalentes Feedback bereitstellt.
  • animated steuert Datenfreigaben und Viewport-/Achsenübergänge. Wenn weggelassen, deaktiviert prefers-reduced-motion: reduce die Animation und Änderungen dieser Präferenz werden beobachtet, solange das Diagramm gemountet bleibt. Ein explizites true oder false behält Vorrang.

Canvas-Inhalt

grid, axis, chartBackground, rangeSelector, tooltip, crosshairStyle, selection, labels, overlay, padding und textDirection funktionieren bei Linien- und Aktiencharts gleich.

Die Diagrammtypografie verwendet standardmäßig die exportierte DEFAULT_CHART_FONT_FAMILY, einen SFMono‑first Instrumenten‑Stack. Pro Oberfläche bleiben die family-Felder maßgeblich.

Verwenden Sie eine vollständig feste Domäne, wenn eine Live‑Anzeige die visuelle Skalierung beibehalten soll, anstatt jedem neuen Extremwert zu folgen:

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

yDomain ist standardmäßig deaktiviert. Es wird sowohl von Linien‑ als auch von Aktiencharts geteilt und gilt konsistent für Worker-, Hauptthread‑ und SSR‑Rendering.

Viewport-Steuerelemente

const current = chart.getViewport();

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

chart.reset({ animated: true });

Ausgelassene Viewport-Ränder behalten ihren aktuellen Wert. Bereiche werden gegenüber dem vollständigen Datenbereich und dem Diagramm-minViewportRange normalisiert.

Laufzeitdarstellung

Nur bei der Konstruktion festgelegtes Verhalten und die veränderliche Darstellung sind bewusst voneinander getrennt. getOptions() gibt den vollständig normalisierten Snapshot zurück. getAppearance() gibt nur Felder zurück, die zur Laufzeit sicher aktualisiert werden können. Beide Rückgabewerte sind als DeepReadonly-Snapshots typisiert; verschachtelte einfache Objekte und Arrays werden kopiert. Wenden Sie Änderungen daher über die Laufzeitmethoden an, statt die zurückgegebenen Werte zu verändern.

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

Patches werden in das aktuelle Erscheinungsbild zusammengeführt. setLabels() und asynchrone setOverlay() sind fokussierte Komfortmethoden für denselben Zustand.

Fassen Sie synchrone Änderungen zusammen, wenn eine Benutzeraktion mehrere Eigenschaften aktualisiert:

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

Führen Sie kein await innerhalb von batch aus; nur die synchronen Aufrufe, die vor der Rückkehr des Callbacks erfolgen, werden zusammengeführt.

Tooltips

Das eingebaute Tooltip wird mit Canvas2D gerendert. tooltip.onRender wird im Hauptthread ausgeführt und kann seinen Titel und seine Zeilen ersetzen; halten Sie es schnell, da Pointerbewegungen es häufig aufrufen können. tooltip.onLeave eignet sich zum Zurücksetzen des Anwendungszustands.

Verwenden Sie explizit titleFormat für große numerische X-Werte. Die automatische Erkennung behandelt Werte oberhalb von ungefähr einer Milliarde als zeitähnlich.

Overlays

Overlays unterstützen Text, Rechtecke, Kreise, Linien und Bilder in Verhältnis- oder CSS-Pixel-Koordinaten relativ zum Diagrammbereich oder zur gesamten Canvas. String-Bildquellen werden asynchron geladen und dekodiert. Warten Sie auf setOverlay() und konfigurieren Sie CORS für entfernte Bilder.

Vom Aufrufer bereitgestellte ImageBitmap-Handles bleiben im Besitz des Aufrufers. Worker- und Hauptthread-Renderings struktur-klonen sie und schließen nur rendereigene Klone. Ein zur Konstruktion vorhandenes Background- oder nur-eiliges Overlay kann nach Erfüllung von initialize() geschlossen werden. Verwendet ein Konstruktions-Overlay jedoch ein vom Aufrufer stammendes Bitmap zusammen mit einer URL oder einer anderweitig asynchron aufgelösten Quelle, halten Sie das Handle offen, bis das Overlay ersetzt oder zerstört wird; alternativ rufen Sie nach der Initialisierung setOverlay() auf und warten darauf, bevor Sie es schließen.

Laufzeit-Backgrounds und nur-eilige Overlays können nach Rückgabe von updateAppearance() (oder seines umschließenden batch()) geschlossen werden, selbst wenn die Initialisierung noch aussteht. Bei einem gemischten oder verzögerten Laufzeit-Overlay rufen Sie setOverlay() direkt auf und behalten die Aufrufer-Handles offen, bis dessen Promise erfüllt oder abgelehnt wird. Die URL-Fetch/Decode-Implementierung wird als separates On-Demand-Chuck ausgeliefert und ist nicht Teil der initialen Browser-Laufzeit.

Wenn einige Quellen fehlschlagen, installiert setOverlay() die erfolgreichen Elemente und lehnt mit ChartOverlayError ab. Wenn jedes angeforderte Element fehlschlägt, bleibt das zuvor gerenderte Overlay installiert. Auflösungs- und Renderer-Lieferfehler erreichen ebenfalls setOverlayErrorCallback() sowie die Fehler-Hooks des Framework-Adapters. Das Überschreiben eines ausstehenden Updates oder das Zerstören des Charts ist routinemäßige Abbruchaktion: das ausstehende Promise löst sich, ohne zu installieren, und es wird kein Overlay-Fehler gemeldet.

Barrierefreiheit

Sixtyfold fügt Fallback-Semantik nur hinzu, wenn der Host sie nicht bereits bereitgestellt hat. Interaktive Diagramme erhalten role="application", tabindex="0" und einen fallback barrierefreien Namen. Nur-Ansicht-Diagramme (interactive: false) erhalten role="img" und werden nicht in die Tab-Reihenfolge aufgenommen. Bestehende Attribute role, tabindex, aria-label und aria-labelledby bleiben erhalten.

Bevorzugen Sie einen anwendungsspezifischen Namen und eine Beschreibung:

<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>

Für ein interaktives Diagramm stellen Sie eine angrenzende Textzusammenfassung oder eine Daten-Tabellen-Alternative bereit und verweisen Sie mithilfe von aria-describedby darauf. Erzwingen Sie role="img" nicht für ein per Tastatur bedientes Diagramm. Farbe darf nicht die einzige Methode sein, mit der die umgebende Anwendung eine Serie identifiziert.

Tastatur-Pan, -Zoom, -Zurücksetzen und Abbrechen von Auswahl werden über eine versteckte, polite Live-Region angekündigt. Lokalisieren Sie diese Meldungen mit keyboardAnnouncements, aktualisieren Sie sie später mit setKeyboardAnnouncements() oder deaktivieren Sie sie, wenn die umgebende Anwendung gleichwertiges Feedback bereitstellt. Die optionale Viewport-Vorlage kann sichtbaren Start, Ende und Spanne als Prozentsatz des gesamten Datenbereichs hinzufügen. Animierte Pan-, Zoom- und Zurücksetz-Meldungen warten, bis der Renderer-bestätigte Viewport sich gesetzt hat, sodass niemals ein Zwischenanimationsframe angekündigt wird.

Sixtyfold kündigt nicht jede gestreamte Probe oder Neuzeichnung über aria-live an; hochfrequente Ansagen würden das Diagramm mit einem Screenreader unbenutzbar machen. Wenn eine Anwendung aussagekräftige Ereignisse wie eine unterbrochene Datenverbindung oder das Überschreiten eines Schwellenwerts hat, geben Sie diese über eine von der Anwendung verwaltete, gedrosselte Live-Region bekannt.