CapDrive
Kullanım kılavuzu

LineChart

Gerçek x/y değerlerine sahip veri serisini bir eğri olarak çizin. Hız ve zaman gibi trendlere uygundur, koordinat aralıklarını, eksenleri ve etiketleri destekler; eksik y değerleri satır bölümlerini kesecektir.

Örnek

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

Kullanım

  • value.x/y konum, label.x/y yalnız yazıdır. x sıralanmaz; y=null çizgiyi keser. Kayan zaman grafiği data ve rangeX değerlerini birlikte günceller: [şimdikiSaniye−30,şimdikiSaniye].
  • $data.history son 30 saniyeyi eskiden yeniye içerir; boş veya eksik olabilir. timestamp milisaniye, elapsed saniye. null boşlukları koruyup zamanda indeks değil elapsed.value kullanın.
  • rangeX/rangeY etiket değil sayısal aralıktır. Etiketi gizlemek ekseni gizlemez; stroke="clear" kullanın. Yerel düzen çakışmayan etiketleri seçer, hepsini garanti etmez.
  • contentAnimation yazı, resim ve yapısal veriyi geçirir. interpolate için Polyline nokta sayısı/closed, Path komutları veya grafik yapısı eşleşmelidir. Yapı değişirse anında güncellenir.

Özellikler

dataReadonlyArray<ChartDataPoint>

Grafik verileri. value.x/y koordinatları, label.x/y metni belirler; null y çizgiyi keser.

Örnek[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]
rangeX?ChartRange

Görünür sayısal aralık [min, max]. Atlanırsa verilere otomatik uyarlanır.

Örnek[0, 30]
rangeY?ChartRange

Görünür sayısal aralık [min, max]. Atlanırsa verilere otomatik uyarlanır.

Örnek[0, 100]
showXLabels?boolean

Eksen etiketlerini göster. Yerel düzen çakışmayan bir alt küme seçer.

Örnektrue
showYLabels?boolean

Eksen etiketlerini göster. Yerel düzen çakışmayan bir alt küme seçer.

Örnektrue
xAxis?ChartAxisStyle

Grafiğin altındaki yatay eksen çizgisi. Varsayılan: ön plan rengi, 1pt genişlik; stroke: clear ile gizlenir.

Örnek{stroke: HDR($env.foreground), lineWidth: 1}
yAxis?ChartAxisStyle

Grafiğin solundaki dikey eksen çizgisi. Varsayılan: ön plan rengi, 1pt genişlik; stroke: clear ile gizlenir.

Örnek{stroke: HDR($env.foreground), lineWidth: 1}
stroke?Paint

Çizgi rengi veya gradyanı; clear gizler.

ÖrnekHDR($env.dark ? "white" : "black")
lineWidth?number

Çizgi kalınlığı, punto; 0 çizmez.

Örnek2
lineCap?"round" | "butt" | "square"

Çizgi ucu: butt keser, square kare uzatır, round yuvarlar.

Örnek"round"
lineJoin?"round" | "miter" | "bevel"

Birleşim şekli: miter, round veya bevel.

Örnek"round"
dash?number[]

Çizgi ve boşluk uzunlukları sırayla, punto; boş dizi düz çizgidir.

Örnek[]
dashPhase?number

Kesik çizgi desen kayması, punto.

Örnek0
contentAnimation?ContentAnimation

İsteğe bağlı geçiş. interpolate aynı örnek sayısını ve eksik değer konumlarını gerektirir; aksi halde hemen günceller.

Örnek{type: "interpolate", duration: 0.25}
Ortak özellikler
width?number | "auto" | "fill"

Punto cinsinden genişlik, otomatik boyut veya üst alanı doldurma.

Örnek"fill"
height?number | "auto" | "fill"

Punto cinsinden yükseklik, otomatik boyut veya üst alanı doldurma.

Örnek"fill"
x?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
y?number

Görsel kaydırma, punto: x sağa, y aşağı. Yerleşimde ayrılan alan değişmez.

Örnek0
transform?ViewTransform

Yerleşimi değiştirmeyen bütünsel dönüşüm. Kaydırma punto, dönüş/eğim derece, ölçek 1 değişmez, dayanak 0–1.

Örnek{rotation: 0}
opacity?number

Tüm View opaklığı: 0 saydam, 1 opak.

Örnek1
clipped?boolean

View sınırlarını aşan çizimi kırpar.

Örnekfalse
clip?"rectangle" | "ellipse"

Kırpma şekli rectangle veya ellipse; Material için false kapatır.

Örnek"rectangle"
mask?View | null

Alfa maskesi View öğesi. Düzeni etkilemeden ortalanır; null maskeyi devre dışı bırakır.

Örnek<Circle width="fill" height="fill" background="white"/>
zIndex?number

Kardeşler arasında çizim sırası; büyük değer öndedir.

Örnek0
blur?number

Bulanıklık yarıçapı, punto; 0 kapatır.

Örnek4
innerShadow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Efekt rengi, opaklığı, bulanıklık yarıçapı ve x/y kayması; uzaklıklar punto.

Örnek{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Dış gölge rengi.

ÖrnekHDR("black")
shadowOpacity?number

Gölge opaklığı 0–1; 0 gizler.

Örnek0
shadowRadius?number

Dış gölge bulanıklık yarıçapı, punto.

Örnek4
shadowX?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek0
shadowY?number

Gölge kayması, punto: x sağa, y aşağı.

Örnek2
animations?LineChartAnimation[]

Özellik değişimini canlandırır. duration/delay saniye; from/to uçlar; repeat/autoreverse tekrar, wrap dönem.

Örnek[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Kardeş öğeler arasında kararlı kimlik.

Pratik örnek

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

Animasyon

Animasyon

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

Atlandığında

Tablo uygulamada doğrulanmış atlama davranışıdır; örnekler varsayılan değildir. Sabit sonuç için açık değer kullanın; bağlama bağlı boyut ve tema renkleri sabit sayı değildir.

ÖzelliklerAtlandığında
data[]
showXLabelstrue
showYLabelstrue
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

$data · Sürüş verileri

Animasyon

BarChart

Color / Gradient

BarChart

Önceki

Ortak türler

Sonraki adım

Bu sayfada

ÖrnekKullanımÖzelliklerPratik örnekAnimasyonAtlandığındaİlgili API’ler