BarChart

Vẽ từng mục dữ liệu dưới dạng thanh, phù hợp để so sánh các giá trị phân loại. Nó có thể được sắp xếp theo chiều ngang hoặc chiều dọc, đặt phạm vi số, nhãn danh mục và nhãn số, đồng thời hỗ trợ các giá trị dương và âm.

Ví dụ

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

Cách sử dụng

Mỗi data là một thanh theo thứ tự mảng, không cần x. horizontal vẫn dùng rangeY cho giá trị. Phạm vi tự động gồm 0, số âm kéo qua đường cơ sở; background tô thanh.
rangeX/rangeY giới hạn số, không phải nhãn. Ẩn nhãn không ẩn trục; dùng stroke="clear" riêng. Native chọn nhãn không đè nhau nên không đảm bảo hiện tất cả.
contentAnimation chuyển chữ, ảnh hoặc dữ liệu cấu trúc. interpolate cần số điểm/closed Polyline, chuỗi lệnh Path hoặc mẫu biểu đồ tương ứng. Đổi cấu trúc cập nhật ngay.

Thuộc tính

dataReadonlyArray<BarChartDataPoint>

Danh mục theo thứ tự mảng. Mỗi mục có giá trị số và nhãn tùy chọn.

Ví dụ[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]

axis?"horizontal" | "vertical"

Hướng cột: vertical từ trái sang phải; horizontal từ trên xuống dưới.

Ví dụ"vertical"

rangeY?ChartRange

Phạm vi giá trị hiển thị [min, max]. Bỏ qua để khớp dữ liệu và bao gồm số không.

Ví dụ[0, 100]

showLabels?boolean

Hiện nhãn danh mục. Nhãn thiếu để trống; bố cục gốc ngăn chồng lấp.

Ví dụtrue

showValueLabels?boolean

Hiện nhãn trục số được tạo tự động.

Ví dụtrue

barThickness?number | "auto"

Độ dày cột theo điểm, hoặc auto để khớp khoảng cách danh mục.

Ví dụ"auto"

xAxis?ChartAxisStyle

Đường trục ngang ở đáy vùng vẽ. Mặc định dùng màu tiền cảnh, rộng 1pt; stroke: clear để ẩn.

Ví dụ{stroke: HDR($env.foreground), lineWidth: 1}

yAxis?ChartAxisStyle

Đường trục dọc ở bên trái vùng vẽ. Mặc định dùng màu tiền cảnh, rộng 1pt; stroke: clear để ẩn.

Ví dụ{stroke: HDR($env.foreground), lineWidth: 1}

background?Paint

Màu tô từng cột. Mặc định là màu tiền cảnh của giao diện.

Ví dụHDR($env.dark ? "white" : "black")

cornerRadius?number

Bán kính góc từng cột, giới hạn theo kích thước cột.

Ví dụ0

stroke?Paint

Màu hoặc chuyển màu của nét; clear ẩn nét.

Ví dụ"clear"

lineWidth?number

Độ dày nét theo điểm; 0 không vẽ nét.

Ví dụ2

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

Vị trí nét viền so với từng cột. Mặc định inside.

Ví dụ"inside"

dash?number[]

Độ dài nét và khoảng trống xen kẽ theo điểm; mảng rỗng là nét liền.

Ví dụ[]

dashPhase?number

Độ dịch mẫu nét đứt theo điểm.

Ví dụ0

contentAnimation?ContentAnimation

Chuyển tiếp nội dung tùy chọn. interpolate yêu cầu cùng số danh mục và hướng; nếu khác sẽ cập nhật ngay.

Ví dụ{type: "interpolate", duration: 0.25}

Thuộc tính chung

width?number | "auto" | "fill"

Chiều rộng tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ"fill"

height?number | "auto" | "fill"

Chiều cao tính bằng point, tự động hoặc lấp đầy khung cha.

Ví dụ"fill"

x?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

y?number

Dịch chuyển hiển thị theo điểm: x sang phải, y xuống dưới; không đổi chỗ trong bố cục.

Ví dụ0

transform?ViewTransform

Biến đổi toàn View không đổi bố cục. Dịch chuyển theo điểm, xoay/nghiêng theo độ, tỷ lệ 1 giữ nguyên, điểm neo 0–1.

Ví dụ{rotation: 0}

opacity?number

Độ đục toàn bộ View: 0 trong suốt, 1 đục hoàn toàn.

Ví dụ1

clipped?boolean

Cắt phần vẽ vượt ra ngoài View.

Ví dụfalse

clip?"rectangle" | "ellipse"

Hình cắt rectangle hoặc ellipse; Material còn nhận false để tắt.

Ví dụ"rectangle"

mask?View | null

View mặt nạ alpha. Căn giữa mà không ảnh hưởng bố cục; null tắt mặt nạ.

Ví dụ<Circle width="fill" height="fill" background="white"/>

zIndex?number

Thứ tự vẽ giữa các phần tử cùng cấp; giá trị lớn nằm trước.

Ví dụ0

blur?number

Bán kính làm mờ theo điểm; 0 là tắt.

Ví dụ4

innerShadow?DrawingEffect

Màu, độ đục, bán kính mờ và độ lệch x/y của hiệu ứng; khoảng cách theo điểm.

Ví dụ{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Màu, độ đục, bán kính mờ và độ lệch x/y của hiệu ứng; khoảng cách theo điểm.

Ví dụ{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Màu bóng đổ bên ngoài.

Ví dụHDR("black")

shadowOpacity?number

Độ đục bóng 0–1; 0 ẩn bóng.

Ví dụ0

shadowRadius?number

Bán kính làm mờ bóng ngoài theo điểm.

Ví dụ4

shadowX?number

Độ lệch bóng theo điểm: x sang phải, y xuống.

Ví dụ0

shadowY?number

Độ lệch bóng theo điểm: x sang phải, y xuống.

Ví dụ2

animations?BarChartAnimation[]

Hoạt ảnh khi thuộc tính đổi. duration/delay theo giây; from/to là đầu cuối; repeat/autoreverse điều khiển lặp, wrap là chu kỳ.

Ví dụ[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Định danh ổn định giữa các phần tử cùng cấp.

Ví dụ kết hợp

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

Hoạt ảnh

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

Khi bỏ qua

Bảng ghi hành vi bỏ qua đã kiểm tra từ triển khai; ví dụ không phải mặc định. Muốn kết quả cố định hãy truyền giá trị rõ, kích thước và màu theo ngữ cảnh không phải hằng số.

Thuộc tính	Khi bỏ qua
`data`	`[]`
`axis`	`"vertical"`
`showLabels`	`true`
`showValueLabels`	`true`
`cornerRadius`	`0`
`strokePosition`	`"inside"`
`background`	`HDR($env.dark ? 'white' : 'black')`
`xAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`
`yAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

LineChart

Color / Gradient

Trên trang này

BarChart

Ví dụ

Cách sử dụng

Thuộc tính

Ví dụ kết hợp

Hoạt ảnh

Khi bỏ qua

API liên quan

LineChart

Color / Gradient

Trên trang này