CapDrive
Kullanım kılavuzu

BarChart

Her veri öğesini kategorik değerleri karşılaştırmak için uygun bir çubuk olarak çizin. Yatay veya dikey olarak düzenlenebilir, sayısal aralıklar, kategori etiketleri ve sayısal etiketler ayarlanabilir ve pozitif ve negatif değerleri destekleyebilir.

Örnek

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

Kullanım

  • Her data bir çubuk, dizi sırası kategori sırasıdır; x gerekmez. horizontal durumunda da değer aralığı rangeY adını taşır. Otomatik aralık sıfırı kapsar, negatifler tabanın tersine uzanır; background çubukları doldurur.
  • 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<BarChartDataPoint>

Dizi sırasındaki kategoriler. Her öğede sayısal değer ve isteğe bağlı etiket bulunur.

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

Çubuk yönü: vertical soldan sağa; horizontal yukarıdan aşağıya sıralanır.

Örnek"vertical"
rangeY?ChartRange

Görünür değer aralığı [min, max]. Atlanırsa verilere uyar ve sıfırı içerir.

Örnek[0, 100]
showLabels?boolean

Kategori etiketlerini göster. Eksik etiketler boş kalır; yerel düzen çakışmayı önler.

Örnektrue
showValueLabels?boolean

Otomatik oluşturulan sayısal eksen etiketlerini göster.

Örnektrue
barThickness?number | "auto"

Puan cinsinden çubuk kalınlığı veya kategori aralığına uyan auto.

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

Her çubuğun dolgusu. Varsayılan, temanın ön plan rengidir.

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

Her çubuğun köşe yarıçapı, boyutuyla sınırlıdır.

Örnek0
stroke?Paint

Çizgi rengi veya gradyanı; clear gizler.

Örnek"clear"
lineWidth?number

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

Örnek2
strokePosition?"inside" | "center" | "outside"

Her çubuğa göre çizgi konumu. Varsayılan inside.

Örnek"inside"
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ı içerik geçişi. interpolate aynı kategori sayısı ve yö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?BarChartAnimation[]

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

Animasyon

Animasyon

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.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[]
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

Önceki

LineChart

Sonraki adım

Bu sayfada

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