CapDrive
Guida all’uso

BarChart

Traccia ciascun elemento dati come una barra, adatta per confrontare valori categoriali. Può essere disposto orizzontalmente o verticalmente, impostare intervalli numerici, etichette di categoria ed etichette numeriche e supporta valori positivi e negativi.

Esempio

function main() {
  return (
    <BarChart
      data={[
        { value: 30, label: 'A' },
        { value: 70, label: 'B' },
      ]}
      axis="vertical"
      rangeY={[0, 100]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={6}
      yAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

Utilizzo

  • Ogni elemento data è una barra nell’ordine delle categorie, senza x. horizontal conserva rangeY per i valori. Il range automatico include zero, i negativi attraversano la base e background riempie le barre.
  • 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<BarChartDataPoint>

Categorie nell’ordine dell’array. Ogni elemento ha un valore numerico e un’etichetta facoltativa.

Esempio[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]
axis?"horizontal" | "vertical"

Direzione: vertical da sinistra a destra; horizontal dall’alto in basso.

Esempio"vertical"
rangeY?ChartRange

Intervallo visibile [min, max]. Se omesso, si adatta ai dati includendo zero.

Esempio[0, 100]
showLabels?boolean

Mostra le etichette delle categorie. Quelle mancanti restano vuote; il layout nativo evita sovrapposizioni.

Esempiotrue
showValueLabels?boolean

Mostra le etichette numeriche dell’asse generate automaticamente.

Esempiotrue
barThickness?number | "auto"

Spessore delle barre in punti, oppure auto in base alla distanza fra categorie.

Esempio"auto"
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}
background?Paint

Riempimento di ogni barra. Per impostazione predefinita usa il primo piano del tema.

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

Raggio degli angoli di ogni barra, limitato alla sua dimensione.

Esempio0
stroke?Paint

Colore o gradiente del tratto; clear lo nasconde.

Esempio"clear"
lineWidth?number

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

Esempio2
strokePosition?"inside" | "center" | "outside"

Posizione del tratto rispetto a ogni barra. Predefinito inside.

Esempio"inside"
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 categorie e direzione; 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?BarChartAnimation[]

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() {
  return (
    <BarChart
      width={260}
      height={160}
      axis="horizontal"
      rangeY={[-50, 100]}
      data={[
        { value: 80, label: 'A' },
        { value: -25, label: 'B' },
        { value: 45, label: 'C' },
      ]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={4}
      xAxis={{ stroke: $env.foreground, dash: [4, 3] }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

Animazione

Animazione

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.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[]
axis"vertical"
showLabelstrue
showValueLabelstrue
cornerRadius0
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

LineChart

Color / Gradient

Path

Precedente

LineChart

Passaggio successivo

In questa pagina

EsempioUtilizzoProprietàEsempio praticoAnimazioneQuando omessoAPI correlate