LineChart

Zeichnen Sie die Datenreihe mit den tatsächlichen x/y-Werten als Kurve. Geeignet für Trends wie Geschwindigkeit und Zeit, unterstützt Koordinatenbereiche, Achsen und Beschriftungen; Fehlende y-Werte führen zum Bruch von Liniensegmenten.

Beispiel

function main() {
  return (
    <LineChart
      data={[
        { value: { x: 0, y: 20 }, label: { x: '0s', y: '20' } },
        { value: { x: 10, y: 60 }, label: { x: '10s', y: '60' } },
      ]}
      rangeX={[0, 10]}
      rangeY={[0, 100]}
      showXLabels={true}
      showYLabels={true}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

Verwendung

value.x/y bestimmt Positionen, label.x/y nur Texte. Keine Sortierung nach x; y=null unterbricht die Linie. Für Zeitfenster data und rangeX aktualisieren, etwa [aktuelleSekunden−30,aktuelleSekunden].
$data.history enthält die letzten 30 Sekunden, älteste zuerst, eventuell leer oder lückenhaft. timestamp ist in Millisekunden, elapsed in Sekunden. Für Zeitdiagramme null-Lücken und elapsed.value als x verwenden, nicht den Index.
rangeX/rangeY begrenzen Zahlen, nicht Beschriftungen. Versteckte Labels entfernen keine Achsen; dafür stroke="clear" setzen. Native Auswahl verhindert Überlappungen, weshalb nicht jedes aktivierte Label erscheinen muss.
contentAnimation betrifft Text, Bilder und strukturierte Daten. interpolate benötigt passende Polyline-Punktzahl/closed, Path-Befehlsfolge oder Diagrammstruktur. Strukturänderungen werden sofort übernommen.

Eigenschaften

dataReadonlyArray<ChartDataPoint>

Diagrammdaten. value.x/y legt Koordinaten fest, label.x/y den Text; null bei y unterbricht die Linie.

Beispiel[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]

rangeX?ChartRange

Sichtbarer numerischer Achsenbereich [min, max]. Ohne Angabe automatisch an Daten angepasst.

Beispiel[0, 30]

rangeY?ChartRange

Sichtbarer numerischer Achsenbereich [min, max]. Ohne Angabe automatisch an Daten angepasst.

Beispiel[0, 100]

showXLabels?boolean

Achsenbeschriftungen anzeigen. Das native Layout wählt eine überlappungsfreie Teilmenge.

Beispieltrue

showYLabels?boolean

Achsenbeschriftungen anzeigen. Das native Layout wählt eine überlappungsfreie Teilmenge.

Beispieltrue

xAxis?ChartAxisStyle

Horizontale Achsenlinie am unteren Diagrammrand. Standard: Vordergrundfarbe, 1pt breit; mit stroke: clear ausblenden.

Beispiel{stroke: HDR($env.foreground), lineWidth: 1}

yAxis?ChartAxisStyle

Vertikale Achsenlinie am linken Diagrammrand. Standard: Vordergrundfarbe, 1pt breit; mit stroke: clear ausblenden.

Beispiel{stroke: HDR($env.foreground), lineWidth: 1}

stroke?Paint

Linienfarbe oder Verlauf; clear blendet die Linie aus.

BeispielHDR($env.dark ? "white" : "black")

lineWidth?number

Linienstärke in Punkten; 0 zeichnet keine Linie.

Beispiel2

lineCap?"round" | "butt" | "square"

Linienende: butt endet am Punkt, square verlängert eckig, round rundet.

Beispiel"round"

lineJoin?"round" | "miter" | "bevel"

Form von Linienverbindungen: miter, round oder bevel.

Beispiel"round"

dash?number[]

Abwechselnde Strich- und Lückenlängen in Punkten; leeres Array bedeutet durchgezogen.

Beispiel[]

dashPhase?number

Versatz des Strichmusters in Punkten.

Beispiel0

contentAnimation?ContentAnimation

Optionaler Inhaltsübergang. interpolate erfordert dieselbe Anzahl und Position fehlender Werte; sonst sofortige Aktualisierung.

Beispiel{type: "interpolate", duration: 0.25}

Allgemeine Eigenschaften

width?number | "auto" | "fill"

Breite in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"

height?number | "auto" | "fill"

Höhe in Punkten, automatische Größe oder Ausfüllen des übergeordneten Bereichs.

Beispiel"fill"

x?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0

y?number

Visueller Versatz in Punkten: x nach rechts, y nach unten; der Layoutplatz bleibt gleich.

Beispiel0

transform?ViewTransform

Gesamten View ohne Layoutänderung transformieren. Verschiebung in Punkten, Drehung/Neigung in Grad, Skalierung 1 unverändert, Anker 0–1.

Beispiel{rotation: 0}

opacity?number

Deckkraft des gesamten Views: 0 transparent, 1 undurchsichtig.

Beispiel1

clipped?boolean

Zeichnung außerhalb der View-Grenzen abschneiden.

Beispielfalse

clip?"rectangle" | "ellipse"

Schnittform rectangle oder ellipse; Material erlaubt auch false zum Abschalten.

Beispiel"rectangle"

mask?View | null

View als Alphamaske. Zentriert ohne Einfluss auf das Layout; null deaktiviert die Maske.

Beispiel<Circle width="fill" height="fill" background="white"/>

zIndex?number

Zeichenreihenfolge unter Geschwistern; größere Werte liegen vorne.

Beispiel0

blur?number

Unschärferadius in Punkten; 0 deaktiviert die Unschärfe.

Beispiel4

innerShadow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

Beispiel{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effektfarbe, Deckkraft, Unschärferadius und x/y-Versatz; Entfernungen in Punkten.

Beispiel{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Farbe des äußeren Schattens.

BeispielHDR("black")

shadowOpacity?number

Schattendeckkraft 0–1; 0 blendet ihn aus.

Beispiel0

shadowRadius?number

Unschärferadius des äußeren Schattens in Punkten.

Beispiel4

shadowX?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel0

shadowY?number

Schattenversatz in Punkten: x rechts, y unten.

Beispiel2

animations?LineChartAnimation[]

Attributänderung animieren. duration/delay in Sekunden; from/to sind Endwerte; repeat/autoreverse steuern Wiederholung, wrap die Periode.

Beispiel[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stabile Kennung unter Geschwisterelementen.

Praxisbeispiel

function main() {
  const now = $data.current.elapsed?.value ?? 0;
  const data = $data.history
    .filter((sample) => sample.elapsed?.value != null)
    .map((sample) => ({
      value: { x: sample.elapsed.value, y: sample.speed?.value ?? null },
      label: {
        x: sample.elapsed.value.toFixed(0) + 's',
        y: sample.speed?.value == null ? '' : sample.speed.value.toFixed(0),
      },
    }));
  return (
    <LineChart
      data={data}
      rangeX={[now - 30, now]}
      rangeY={[0, 160]}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

Animation

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeX.0rangeX.1rangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

Beim Weglassen

Die Tabelle zeigt implementierte Vorgaben beim Weglassen. Eigenschaftsbeispiele sind keine Standardwerte. Für feste Ergebnisse explizite Werte setzen; kontextabhängige Maße und Themenfarben sind keine Konstanten.

Eigenschaften	Beim Weglassen
`data`	`[]`
`showXLabels`	`true`
`showYLabels`	`true`
`lineWidth`	`2`
`stroke`	`HDR($env.dark ? 'white' : 'black')`
`xAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`
`yAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

$data · Fahrdaten

Animation

BarChart

Color / Gradient

Auf dieser Seite

LineChart

Beispiel

Verwendung

Eigenschaften

Praxisbeispiel

Animation

Beim Weglassen

Verwandte APIs

$data · Fahrdaten

Animation

BarChart

Color / Gradient

Auf dieser Seite