Linien-Diagrammoptionen
LineChartOptions API. Konfigurieren Sie Serien, Achsen, Interaktion, Animation, Beschriftungen, Overlays und Detailstufe.
import type { LineChartOptions } from "@sixtyfold/line";Verwenden Sie den oben gezeigten öffentlichen Einstiegspunkt. Reine Typimporte werden aus dem Anwendungs-JavaScript entfernt.
BandOptions
Bereichs-/Band-spezifische visuelle Optionen
Import @sixtyfold/line·Schnittstelle
interface BandOptions| Member | Definition | Beschreibung |
|---|---|---|
border | string | undefined | Gemeinsame Randfarbe für obere und untere Begrenzungen (standardmäßig Serienfarbe, wenn ein Rand aktiviert ist) |
border | BandBorderStyle | undefined= solid | Linienstil des Rands |
border | number | undefined | Rahmenbreite in Pixeln. Auf 0 setzen, um Rahmen zu deaktivieren. |
fill? | number | boolean | undefined | Band füllen. - false: keine Füllung des Bands - true: mit Serienfarbe bei Standard-Deckkraft füllen - Zahl (0–1): mit Serienfarbe bei angegebener Deckkraft füllen |
fill | string | SeriesGradient | undefined | Farbe der Bandfüllung — einfarbige Farbzeichenfolge oder Gradientenobjekt. Überschreibt die Füll-Deckkraft, falls angegeben |
lower | string | undefined | Überschreibt die Farbe für die untere Grenze |
upper | string | undefined | Überschreibt die Farbe für die obere Grenze |
BarOptions
Balken-/Säulen-spezifische visuelle Optionen
Import @sixtyfold/line·Schnittstelle
interface BarOptions| Mitglied | Definition | Beschreibung |
|---|---|---|
baseline? | number | undefined= 0 | Datenwert, von dem die Balken ausgehen |
border | string | undefined | Gemeinsame Balkenrandfarbe (standardmäßig Serienfarbe, wenn ein Rand aktiviert ist) |
border | BarBorderStyle | undefined= solid | Linienstil des Randes |
border | number | undefined | Randbreite in Pixeln. Auf 0 setzen, um Ränder zu deaktivieren. |
fill? | number | boolean | undefined | Fülle die Balken. - false: keine Balkenfüllung - true: mit Serienfarbe bei Standarddeckkraft füllen - Zahl (0–1): mit Serienfarbe bei angegebener Deckkraft füllen |
fill | string | SeriesGradient | undefined | Farbe der Balkenfüllung - Farbstring oder Verlaufobjekt. Überschreibt die Füllungsdeckkraft, falls angegeben |
max | number | undefined= 24 | Maximale Balkenbreite in Pixel |
min | number | undefined= 1 | Minimale Balkenbreite in Pixel |
width | number | undefined= 0.7 | Anteil des verfügbaren Stichprobenabstands, der von jeder Leiste verwendet wird |
LegendLabelFontOptions
Optionen für die Schriftart der Legendenbeschriftung.
Import @sixtyfold/line·interface
interface LegendLabelFontOptionsLegendOptions
Platzierung, Layout, Typografie, Farbmuster und Interaktion für die eingebaute Canvas2D-Legende.
Import @sixtyfold/line·Schnittstelle
interface LegendOptions| Mitglied | Definition | Beschreibung |
|---|---|---|
align? | LegendAlign | undefined= center | Ausrichtung im Legendenbereich |
allow | boolean | undefined= false | Erlaube das Ausblenden aller Serien |
inactive | number | undefined= 0.45 | Deckkraft für ausgeblendete Legenden-Einträge von Serien |
interactive? | boolean | undefined= false | Klick-zum-Umschalten-Interaktion aktivieren |
item | number | undefined= 12 | Abstand zwischen Elementen in px |
label | LegendLabelFontOptions | undefined | Legendenbeschriftungs-Schriftstil |
layout? | LegendLayout | undefined= column | Elementlayout |
padding? | { top?: number; right?: number; bottom?: number; left?: number; } | undefined= 8 | Innenabstand innerhalb des Legendenbereichs in px |
position? | LegendPosition | undefined= right | Legendenposition um den Diagrammbereich |
swatch? | LegendSwatchOptions | undefined | Optionen für Swatch-Stil |
swatch | number | undefined= 6 | Abstand zwischen Swatch und Beschriftung in px |
visible? | boolean | undefined | Zeigt die Legende an. Standardmäßig aktiviert, wenn legend angegeben ist; ohne legend ist sie deaktiviert. |
LegendSwatchOptions
Optionen für das Legenden-Swatch.
Import @sixtyfold/line·interface
interface LegendSwatchOptions| Member | Definition | Beschreibung |
|---|---|---|
border | string | undefined= transparent | Farbrand der Musterfläche |
border | number | undefined= 0 | Randbreite der Musterfläche in px |
shape? | LegendSwatchShape | undefined= circle | Form der Musterfläche |
size? | number | undefined= 10 | Größe der Musterfläche in px |
LineAppearanceOptions
Linien-Diagramm Erscheinungsbild — Basis-Erscheinung + Legende + Marker
Import @sixtyfold/line·Schnittstelle
interface LineAppearanceOptions extends BaseAppearanceOptions| Mitglied | Definition | Beschreibung |
|---|---|---|
axis? | AxisAppearanceOptions | undefined | Laufzeit-Erscheinungsoptionen für Achse. |
chart | BackgroundOptions | undefined | Laufzeit-Erscheinungsoptionen für den Diagrammhintergrund. |
crosshair | CrosshairOptions | undefined | Laufzeit-Erscheinungsoptionen für das Fadenkreuz-Styling. |
grid? | GridOptions | undefined | Laufzeit-Erscheinungsoptionen für das Grid. |
labels? | ChartLabels | undefined | Laufzeit-Erscheinungsoptionen für Beschriftungen. |
legend? | LegendOptions | undefined | Laufzeit-Erscheinungsoptionen für Legende. |
marker? | MarkerOptions | undefined | Laufzeit-Erscheinungsoptionen für Marker. |
overlay? | OverlayOptions | undefined | Laufzeit-Erscheinungsoptionen für Overlay. |
padding? | PaddingOptions | undefined | Laufzeit-Erscheinungsoptionen für Padding. |
range | RangeSelectorAppearanceOptions | undefined | Laufzeit-Darstellungsoptionen für die Bereichsauswahl. |
selection? | SelectionOptions | undefined | Laufzeit-Darstellungsoptionen für die Auswahl. |
text | TextDirection | undefined | Laufzeit-Darstellungsoptionen für die Textrichtung. |
tooltip? | TooltipOptions | undefined | Laufzeit-Darstellungsoptionen für Tooltip. |
LineChartOptions
Konstruktions-, Interaktions-, Erscheinungs-, Serien- und LOD-Optionen für ein Liniendiagramm.
Import @sixtyfold/line·Schnittstelle
interface LineChartOptions| Mitglied | Definition | Beschreibung |
|---|---|---|
animated? | boolean | undefined | Animiert das Offenlegen von Daten sowie Viewport-/Achsen‑Übergänge. Wenn ausgelassen, ist die Animation aktiviert, sofern der Browser nicht prefers-reduced-motion: reduce meldet. |
axis? | AxisOptions | undefined | Achsenanpassung (Linienfarbe und Beschriftungsfarben) |
chart | BackgroundOptions | undefined= #16213e | Diagrammhintergrund (deckt die gesamte Canvas einschließlich Vorschau-Bereich ab). Kann ein einfarbiger Farbstring, eine Verlaufdefinition oder ein Bild sein. |
crosshair | CrosshairOptions | undefined | Fadenkreuzlinienstil (vertikale und horizontale Hilfslinien) |
grid? | GridOptions | undefined | Rasterlinienanpassung für Hauptdiagramm |
interactive? | boolean | undefined= true | Aktivieren von Benutzerinteraktionen (Pan/Zoom/Pinch). Wenn false, ist das Diagramm nur zur Ansicht, zeigt aber weiterhin Fadenkreuz/Tooltip beim Hover an. |
interpolation? | "none" | "linear" | "spline" | undefined= linear | Interpolationsmodus für Werte zwischen Datenpunkten - 'none': keine Interpolation, auf den nächsten Datenpunkt einrasten - 'linear': lineare Interpolation zwischen benachbarten Punkten - 'spline': Catmull‑Rom‑Spline‑Interpolation für glatte Kurven |
keep | number | undefined= 0 (disabled) | Keep‑alive‑Intervall in Sekunden, um zu verhindern, dass Safari GPU‑Ressourcen freigibt. Safari bereinigt aggressiv "nicht verwendete" Canvas‑Elemente, was zu leeren Diagrammen führt. |
keyboard | "focus" | "hover" | undefined | Wie Tastatursteuerungen aktiv werden. - "focus" (Standard): das Diagramm muss DOM‑Fokus haben - "hover": das Diagramm unter dem Mauszeiger erhält Tastaturnavigation |
keyboard | false | KeyboardAnnouncementMessages | undefined | Lokalisieren Sie Tastatur-Aktionsansagen für unterstützende Technologien, oder setzen Sie false, um sie zu deaktivieren. Weggelassene Meldungen verwenden prägnante englische Standardtexte. |
keyboard | number | undefined= 0.1 (10%) | Tastatur-Pan-Geschwindigkeit (Pfeiltasten). Bruchteil des sichtbaren Bereichs, um den pro Tastendruck verschoben wird.1 (10%) |
keyboard | number | undefined= 0.1 (10% per keypress) | Tastatur-Zoom-Geschwindigkeit (+/- Tasten). Höhere Werte = schnelleres Zoomen.1 (10% pro Tastendruck) |
labels? | ChartLabels | undefined | Textbeschriftungen rund um das Diagramm (Titel, Achsenbeschriftungen) |
legend? | LegendOptions | undefined | Legendenoptionen für Serien |
lod? | LineLODOptions | undefined | Präsentationsrichtlinie der Detailstufe. |
marker? | MarkerOptions | undefined | Standard-Markierungsstil für Hover-Punkte (kann pro Serie überschrieben werden) |
min | number | undefined | Kleinste interaktive X-Viewport-Spanne, angegeben in denselben Einheiten wie die X-Werte des Diagramms. Ungültige oder nicht positive Werte behalten die Standardwerte des Diagrammtyps bei. Diese Konstruktionsoption ist nicht Teil des veränderbaren Erscheinungsbilds. |
overlay? | OverlayOptions | undefined | Deklarative Overlay-Primitiven, gerendert über dem Diagramminhalt |
padding? | PaddingOptions | undefined= { top: 20, right: 80, bottom: 40, left: 80 } | Benutzerdefinierte Innenabstände in Pixeln |
range | RangeSelectorOptions | undefined | Bereichsauswahl (Vorschau-Diagramm) Konfiguration |
renderer | number | undefined= 15000 | Maximale Zeit in Millisekunden, die für den Renderer-Start erlaubt ist. Der Watchdog beginnt während der Diagrammkonstruktion, sodass er auch Anwendungen schützt, die nicht auf BaseChart.initialize warten. Auf 0 setzen, um ihn zu deaktivieren. |
render | "auto" | "worker" | "main" | undefined | Auswahl des Rendering-Modus. auto bevorzugt Worker + OffscreenCanvas; worker erzwingt Worker-Rendering mit Main-Thread-Fallback; main rendert im Browser-Main-Thread und benötigt ein DOM. |
selection? | SelectionOptions | undefined | Styling der Bereichsauswahl (Ziehen zum Zoomen) |
series? | SeriesOptions[] | undefined | Serien-spezifische Konfiguration (Farben, Füllungen, Verläufe) |
text | TextDirection | undefined= inherit | Richtung, die für Canvas2D-Text verwendet wird. Verwenden Sie "auto", um aus dem ersten starken Zeichen jedes Strings zu schließen, oder "rtl"/"ltr", um eine diagrammweite Richtung zu erzwingen. |
tooltip? | TooltipOptions | undefined | Tooltip-(Fadenkreuz-Infobox)-Styling |
wheel | "up-in" | "up-out" | undefined | Mausrad-Zoomrichtung. - „up-in“ (Standard): Rad nach oben/zurück zoomt hinein, Rad nach unten/vorwärts zoomt heraus - „up-out“: Rad nach oben/zurück zoomt heraus, Rad nach unten/vorwärts zoomt hinein |
wheel | number | undefined= 0.1 (10% per wheel tick) | Mausrad-Zoomgeschwindigkeit. Höhere Werte = schnelleres Zoomen.1 (10% pro Mausrad-Tick) |
y | YDomainOptions | undefined | Klemmen Sie eine oder beide Kanten der dargestellten Y-Domäne fest. Weggelassene Kanten skalieren weiterhin automatisch anhand sichtbarer Daten. Werden beide endlichen Kanten angegeben, bleibt der Y-Viewport über Zoom, LOD-Auswahl und Streaming-Updates hinweg stabil. Die Option ist standardmäßig deaktiviert und gehört zur Konstruktionskonfiguration, nicht zur veränderbaren Darstellung. |
LineChartStatsOptions
Steuert, wie häufig Telemetriedaten der Linie veröffentlicht werden.
Import @sixtyfold/line·Schnittstelle
interface LineChartStatsOptionsLineDataUpdateOptions
Steuert die animierte Übergangsbewegung, die bei einem massenhaften Austausch der Liniendaten verwendet wird.
Import @sixtyfold/line·Schnittstelle
interface LineDataUpdateOptionsLineLODOptions
Stabile Darstellungspolitik im Bildschirmraum sowie Koeffizienten für Treue/Glätte.
Import @sixtyfold/line·interface
interface LineLODOptionsMarkerGlowOptions
Optionaler Leuchteffekt für Hover‑Marker
Import @sixtyfold/line·Schnittstelle
interface MarkerGlowOptionsMarkerOptions
Marker-Optionen für Hover-Punkt-Indikatoren
Import @sixtyfold/line·Schnittstelle
interface MarkerOptions| Mitglied | Definition | Beschreibung |
|---|---|---|
border | string | undefined= #fff | Rand-/Konturfarbe |
border | number | undefined= 1 | Rand-/Konturstärke in Pixel |
glow? | boolean | MarkerGlowOptions | undefined | Optionaler Leuchteffekt um das Marker-Symbol |
shape? | MarkerShape | undefined= circle | Markerform |
size? | number | undefined= 5 | Markierungsgröße in Pixeln — Radius bei Kreis, halbe Breite bei anderen |
PointOptions
Scatter-/Punkte-spezifische visuelle Optionen
Import @sixtyfold/line·interface
interface PointOptions| Mitglied | Definition | Beschreibung |
|---|---|---|
border | string | undefined= #fff | Punktrand-/Konturfarbe |
border | number | undefined= 0 | Punktrand-/Konturbreite in Pixel |
color? | string | undefined | Punktfüllfarbe (Standard: Serienfarbe) |
opacity? | number | undefined= 1 | Punkt-Opazität 0–1 |
shape? | MarkerShape | undefined= circle | Punktform |
size? | number | undefined= 3 | Punktgröße in Pixel — Radius bei Kreis, halbe Breite bei anderen |
SeriesAppearanceOptions
Erscheinungsfelder pro Serie — nur visuell und präsentationsbezogen
Import @sixtyfold/line·type
type SeriesAppearanceOptions = Pick<SeriesOptions, "type" | "color" | "fill" | "fillColor" | "fillToZero" | "fillEffect" | "band" | "bar" | "stack" | "point" | "width" | "name" | "unit" | "marker">| Member | Definition | Beschreibung |
|---|---|---|
band? | BandOptions | undefined | Bereichs-/Banden-spezifische Füllungs- und Randgestaltung |
bar? | BarOptions | undefined | Balken/Spalten-spezifische Füllungs-, Rand-, Breiten- und Basisliniengestaltung |
color? | string | undefined | Linienfarbe (fällt auf Standardpalette zurück, falls nicht angegeben) |
fill? | number | boolean | undefined | Füllt den Bereich unter der Linie. - false: keine Füllung (Standard) - true: Füllung mit Linienfarbe bei 40% Deckkraft - Zahl (0–1): Füllung mit Linienfarbe bei angegebener Deckkraft |
fill | string | SeriesGradient | undefined | Füllfarbe – einfarbige Farbzeichenfolge oder Gradientobjekt. Überschreibt die Füll-Deckkraft, falls angegeben |
fill | "none" | "glow" | "layered" | undefined | Füllstil-Effekt - 'none': flächige Farbfüllung (Standard) - 'glow': sanfter Leuchteffekt, der von der Linie ausgeht - 'layered': gestapelte Füllungen mit unterschiedlicher Deckkraft für Tiefenwirkung |
fill | boolean | undefined= true | Auf die Null-Basislinie füllen statt bis zum Diagrammfuß Wenn true: positive Werte füllen bis zur Null, negative füllen bis zur Null nach oben Wenn false: immer bis zum Diagrammfuß füllen |
marker? | MarkerOptions | undefined | Marker-Stil für den Hover-Punkt dieser Serie (überschreibt das chartweite Marker-Design) |
name? | string | undefined | Anzeigename der Serie (wird in Legende und Tooltip verwendet). |
point? | PointOptions | undefined | Scatter-/Punkte-spezifische Marker-Stilgestaltung |
stack? | StackOptions | undefined | Stacked-Area-spezifische Füll- und obere Begrenzungs-Stilgebung |
type? | LineSeriesType | undefined= line | Linienzeichnungsstil. „step“ ist ein Alias für „step-after“; „band“ ist ein Alias für „range“; „points“ ist ein Alias für „scatter“; „column“ ist ein Alias für „bar“; „stackedArea“ ist ein Alias für „stacked-area“. |
unit? | UnitOptions | undefined | Einheitliche Konfiguration für diese Serie (verwendet in Tooltip und Achsenbeschriftungen) |
width? | number | undefined= 1.5 | Linienstrichbreite in Pixeln. Auf 0 setzen, um den Strich zu unterdrücken und gleichzeitig Bereichsfüllungen, Tooltips und andere Serienebenen beizubehalten. |
SeriesGradient
Gradientendefinition für die Serienfüllung
Import @sixtyfold/line·Schnittstelle
interface SeriesGradientSeriesOptions
Konfiguration für eine einzelne Serie
Import @sixtyfold/line·Schnittstelle
interface SeriesOptions| Mitglied | Definition | Beschreibung |
|---|---|---|
band? | BandOptions | undefined | Bereichs-/Band-spezifische Füllungs- und Randgestaltung |
bar? | BarOptions | undefined | Balken-/Säulen-spezifische Füllung, Rand, Breite und Basisliniengestaltung |
color? | string | undefined | Linienfarbe (fällt auf die Standardpalette zurück, wenn nicht angegeben) |
fill? | number | boolean | undefined | Füllt die Fläche unter der Linie. - false: keine Füllung (Standard) - true: Füllung mit Linienfarbe bei 40 % Deckkraft - Zahl (0–1): Füllung mit Linienfarbe bei angegebener Deckkraft |
fill | string | SeriesGradient | undefined | Füllfarbe – Farbangabe als durchgehende Farbe oder Gradientobjekt. Überschreibt die Füllopazität, falls |
fill | "none" | "glow" | "layered" | undefined | Fülleffekt – 'none': einfarbige Füllung (Standard) – 'glow': weiches Leuchten, das von der Linie ausgeht – 'layered': gestapelte Füllungen mit variierender Opazität für Tiefenwirkung |
fill | boolean | undefined= true | Fülle zur Null-Baseline statt zum Diagrammuntergrund Wenn true: positive Werte füllen bis zu null nach unten, negative füllen bis zu null nach oben Wenn false: immer bis zum Diagrammuntergrund füllen |
marker? | MarkerOptions | undefined | Marker-Stil für den Hover-Punkt dieser Serie (überschreibt das chartweite Marker-Setting) |
name? | string | undefined | Serienanzeige‑Name (wird in Legende und Tooltip verwendet). |
point? | PointOptions | undefined | Scatter-/Punkt‑spezifische Marker‑Stilisierung |
stack? | StackOptions | undefined | Gestapelte‑Fläche‑spezifische Füll‑ und Obergrenzen‑Stilisierung |
type? | LineSeriesType | undefined= line | Zeichenstil der Serie. "step" ist ein Alias für "step-after"; "band" ist ein Alias für "range"; "points" ist ein Alias für "scatter"; "column" ist ein Alias für "bar"; "stackedArea" ist ein Alias für "stacked-area". |
unit? | UnitOptions | undefined | Einheitkonfiguration für diese Serie (verwendet in Tooltip und Achsenbeschriftungen) |
width? | number | undefined= 1.5 | Linienstrichbreite in Pixeln. Auf 0 setzen, um den Strich zu unterdrücken und gleichzeitig Bereichsfüllungen, Tooltips und andere Serienstufen beizubehalten. |
StackOptions
Spezifische visuelle Optionen für gestapelte Flächen
Import @sixtyfold/line·interface
interface StackOptions| Member | Definition | Description |
|---|---|---|
border | string | undefined | Obere Begrenzungsfarbe (Standard: Serienfarbe) |
border | StackBorderStyle | undefined= solid | Stil der oberen Begrenzungslinie |
border | number | undefined | Breite der oberen Begrenzung in Pixeln (Standard: Serienbreite). Auf 0 setzen, um zu deaktivieren. |
curve? | StackCurveStyle | undefined= linear | Begrenzungsform für das gefüllte Band und die obere Begrenzung. |
fill? | number | boolean | undefined | Fläche des gestapelten Bereichs füllen. - false: keine Flächenfüllung - true: mit Serienfarbe bei Standardopacity füllen - Zahl (0–1): mit Serienfarbe bei angegebener Opazität füllen |
fill | string | SeriesGradient | undefined | Füllfarbe des Bereichs – konstante Farbstring oder Gradientenobjekt. Überschreibt die Füllopazität, falls angegeben |