LineChart

Traccia la serie di dati con i valori x/y effettivi come una curva. Adatto per tendenze quali velocità e tempo, supporta intervalli di coordinate, assi ed etichette; i valori y mancanti interromperanno i segmenti di linea.

Esempio

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

Utilizzo

value.x/y posiziona; label.x/y fornisce solo testo. Nessun ordinamento per x; y=null interrompe. Un grafico temporale scorrevole aggiorna data e rangeX, ad esempio [secondiAttuali−30,secondiAttuali].
$data.history contiene 30 secondi, dal meno recente, anche vuoti o mancanti. timestamp usa millisecondi, elapsed secondi. Mantieni interruzioni null e usa elapsed.value, non indici, per il tempo.
rangeX/rangeY limita numeri, non etichette. Nascondere etichette non elimina assi: usa stroke="clear" separatamente. Il motore evita sovrapposizioni e non garantisce ogni etichetta.
contentAnimation riguarda testo, immagini o dati strutturati. interpolate richiede punti/closed Polyline, sequenza Path o campioni compatibili. Cambi strutturali aggiornano subito.

Proprietà

dataReadonlyArray<ChartDataPoint>

Dati del grafico. value.x/y definisce le coordinate, label.x/y il testo; y null interrompe la linea.

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

rangeX?ChartRange

Intervallo numerico visibile [min, max]. Se omesso, si adatta automaticamente ai dati.

Esempio[0, 30]

rangeY?ChartRange

Intervallo numerico visibile [min, max]. Se omesso, si adatta automaticamente ai dati.

Esempio[0, 100]

showXLabels?boolean

Mostra le etichette dell’asse. Il layout nativo seleziona un sottoinsieme senza sovrapposizioni.

Esempiotrue

showYLabels?boolean

Mostra le etichette dell’asse. Il layout nativo seleziona un sottoinsieme senza sovrapposizioni.

Esempiotrue

xAxis?ChartAxisStyle

Asse orizzontale in basso nel grafico. Predefinito: primo piano, larghezza 1pt; stroke: clear lo nasconde.

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

yAxis?ChartAxisStyle

Asse verticale a sinistra del grafico. Predefinito: primo piano, larghezza 1pt; stroke: clear lo nasconde.

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

stroke?Paint

Colore o gradiente del tratto; clear lo nasconde.

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

lineWidth?number

Spessore del tratto in punti; 0 non disegna il tratto.

Esempio2

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

Estremità: butt taglia, square prolunga in quadrato, round arrotonda.

Esempio"round"

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

Forma delle giunzioni: miter, round o bevel.

Esempio"round"

dash?number[]

Lunghezze alternate di tratto e spazio in punti; array vuoto per linea continua.

Esempio[]

dashPhase?number

Spostamento del motivo tratteggiato in punti.

Esempio0

contentAnimation?ContentAnimation

Transizione facoltativa. interpolate richiede lo stesso numero di campioni e posizioni dei valori mancanti; altrimenti aggiorna subito.

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

Proprietà comuni

width?number | "auto" | "fill"

Larghezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"

height?number | "auto" | "fill"

Altezza in punti, dimensione automatica o riempimento del contenitore.

Esempio"fill"

x?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0

y?number

Spostamento visivo in punti: x a destra, y in basso; non cambia lo spazio nel layout.

Esempio0

transform?ViewTransform

Trasformazione globale senza cambiare il layout. Traslazione in punti, rotazione/inclinazione in gradi, scala 1 invariata, ancoraggi 0–1.

Esempio{rotation: 0}

opacity?number

Opacità dell’intero View: 0 trasparente, 1 opaco.

Esempio1

clipped?boolean

Ritaglia il disegno oltre i limiti del View.

Esempiofalse

clip?"rectangle" | "ellipse"

Forma di ritaglio rectangle o ellipse; Material accetta anche false per disattivarlo.

Esempio"rectangle"

mask?View | null

View per la maschera alfa. Centrata senza modificare il layout; null disattiva la maschera.

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

zIndex?number

Ordine tra elementi fratelli; valori più grandi appaiono davanti.

Esempio0

blur?number

Raggio della sfocatura in punti; 0 la disattiva.

Esempio4

innerShadow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

glow?DrawingEffect

Colore, opacità, raggio di sfocatura e offset x/y dell’effetto; distanze in punti.

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

shadowColor?Color

Colore dell’ombra esterna.

EsempioHDR("black")

shadowOpacity?number

Opacità dell’ombra 0–1; 0 la nasconde.

Esempio0

shadowRadius?number

Raggio di sfocatura dell’ombra esterna in punti.

Esempio4

shadowX?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio0

shadowY?number

Offset dell’ombra in punti: x a destra, y in basso.

Esempio2

animations?LineChartAnimation[]

Anima le modifiche alle proprietà. duration/delay in secondi; from/to sono estremi; repeat/autoreverse controllano le ripetizioni, wrap il periodo.

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

key?string | number

Identità stabile tra elementi fratelli.

Esempio pratico

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

Animazione

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

Quando omesso

La tabella documenta omissioni verificate nell’implementazione. Gli esempi non sono valori predefiniti. Specifica valori per risultati fissi; misure e colori contestuali non sono costanti.

Proprietà	Quando omesso
`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 }`

Esempio

Utilizzo

Proprietà

Esempio pratico

Animazione

Quando omesso

$data · Dati di guida

Animazione

BarChart

Color / Gradient

In questa pagina

LineChart

Esempio

Utilizzo

Proprietà

Esempio pratico

Animazione

Quando omesso

API correlate

$data · Dati di guida

Animazione

BarChart

Color / Gradient

In questa pagina