CapDrive
Panduan penggunaan

BarChart

Plot setiap item data sebagai batang, cocok untuk membandingkan nilai kategorikal. Itu dapat diatur secara horizontal atau vertikal, mengatur rentang numerik, label kategori dan label numerik, dan mendukung nilai positif dan negatif.

Contoh

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

Penggunaan

  • Setiap data satu batang, urutan array menentukan kategori, tanpa x. horizontal tetap memakai rangeY untuk nilai. Rentang otomatis mencakup nol, negatif melewati dasar, background mengisi batang.
  • rangeX/rangeY membatasi angka, bukan label. Menyembunyikan label tidak menyembunyikan sumbu; gunakan stroke="clear". Layout memilih label tanpa tumpang tindih, tidak menjamin semuanya tampil.
  • contentAnimation mengubah teks, gambar atau struktur data. interpolate perlu jumlah titik/closed Polyline, urutan Path atau struktur grafik yang cocok. Perubahan struktur diterapkan langsung.

Properti

dataReadonlyArray<BarChartDataPoint>

Kategori sesuai urutan array. Setiap item memiliki nilai angka dan label opsional.

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

Arah batang: vertical dari kiri ke kanan; horizontal dari atas ke bawah.

Contoh"vertical"
rangeY?ChartRange

Rentang nilai terlihat [min, max]. Jika dihilangkan, menyesuaikan data dan menyertakan nol.

Contoh[0, 100]
showLabels?boolean

Tampilkan label kategori. Label yang tidak ada tetap kosong; tata letak native mencegah tumpang tindih.

Contohtrue
showValueLabels?boolean

Tampilkan label sumbu angka yang dibuat otomatis.

Contohtrue
barThickness?number | "auto"

Ketebalan batang dalam poin, atau auto mengikuti jarak kategori.

Contoh"auto"
xAxis?ChartAxisStyle

Garis sumbu horizontal di bawah grafik. Defaultnya warna latar depan selebar 1pt; gunakan stroke: clear untuk menyembunyikannya.

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

Garis sumbu vertikal di kiri grafik. Defaultnya warna latar depan selebar 1pt; gunakan stroke: clear untuk menyembunyikannya.

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

Isian setiap batang. Defaultnya warna latar depan tema.

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

Radius sudut tiap batang, dibatasi sesuai ukurannya.

Contoh0
stroke?Paint

Warna atau gradasi garis; clear menyembunyikannya.

Contoh"clear"
lineWidth?number

Ketebalan garis dalam poin; 0 tidak menggambar garis.

Contoh2
strokePosition?"inside" | "center" | "outside"

Posisi garis tepi terhadap setiap batang. Defaultnya inside.

Contoh"inside"
dash?number[]

Panjang garis dan celah bergantian dalam poin; larik kosong membuat garis utuh.

Contoh[]
dashPhase?number

Offset pola putus-putus dalam poin.

Contoh0
contentAnimation?ContentAnimation

Transisi konten opsional. interpolate memerlukan jumlah kategori dan arah yang sama; jika berbeda, langsung diperbarui.

Contoh{type: "interpolate", duration: 0.25}
Properti umum
width?number | "auto" | "fill"

Lebar dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh"fill"
height?number | "auto" | "fill"

Tinggi dalam poin, ukuran otomatis, atau memenuhi induk.

Contoh"fill"
x?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
y?number

Offset visual dalam poin: x ke kanan, y ke bawah; ruang tata letak tidak berubah.

Contoh0
transform?ViewTransform

Transformasi seluruh View tanpa mengubah tata letak. Translasi dalam poin, rotasi/kemiringan dalam derajat, skala 1 tetap, jangkar 0–1.

Contoh{rotation: 0}
opacity?number

Opasitas seluruh View: 0 transparan, 1 buram.

Contoh1
clipped?boolean

Potong gambar yang melewati batas View.

Contohfalse
clip?"rectangle" | "ellipse"

Bentuk potongan rectangle atau ellipse; Material juga menerima false untuk mematikan.

Contoh"rectangle"
mask?View | null

View masker alfa. Di tengah tanpa memengaruhi tata letak; null menonaktifkan masker.

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

Urutan gambar antar saudara; nilai lebih besar di depan.

Contoh0
blur?number

Radius buram dalam poin; 0 menonaktifkan.

Contoh4
innerShadow?DrawingEffect

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

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

Warna, opasitas, radius buram dan offset x/y efek; jarak dalam poin.

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

Warna bayangan luar.

ContohHDR("black")
shadowOpacity?number

Opasitas bayangan 0–1; 0 menyembunyikannya.

Contoh0
shadowRadius?number

Radius buram bayangan luar dalam poin.

Contoh4
shadowX?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh0
shadowY?number

Offset bayangan dalam poin: x ke kanan, y ke bawah.

Contoh2
animations?BarChartAnimation[]

Animasi perubahan properti. duration/delay dalam detik; from/to adalah ujung; repeat/autoreverse untuk pengulangan, wrap untuk periode.

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

Identitas stabil di antara elemen sejajar.

Contoh praktis

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

Animasi

Animasi

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

Jika dihilangkan

Tabel menunjukkan perilaku penghilangan yang diverifikasi dari implementasi; contoh bukan default. Untuk hasil tetap beri nilai eksplisit; ukuran dan warna kontekstual bukan konstanta.

PropertiJika dihilangkan
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

Sebelumnya

LineChart

Langkah berikutnya

Di halaman ini

ContohPenggunaanPropertiContoh praktisAnimasiJika dihilangkanAPI terkait