CapDrive
คู่มือการใช้งาน

BarChart

พล็อตแต่ละรายการข้อมูลเป็นแท่ง เหมาะสำหรับการเปรียบเทียบค่าหมวดหมู่ สามารถจัดเรียงในแนวนอนหรือแนวตั้ง กำหนดช่วงตัวเลข ป้ายหมวดหมู่ และป้ายตัวเลข และรองรับค่าบวกและค่าลบ

ตัวอย่าง

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

การใช้งาน

  • หนึ่ง data คือหนึ่งแท่งตามลำดับ ไม่ต้องมี x แม้ horizontal ช่วงค่ายังชื่อ rangeY ช่วงอัตโนมัติรวมศูนย์ ค่าลบยื่นอีกฝั่งฐาน background เติมแท่ง
  • rangeX/rangeY จำกัดตัวเลข ไม่ใช่ป้าย ซ่อนป้ายไม่ซ่อนแกน ใช้ stroke="clear" แยกต่างหาก ระบบเลือกป้ายที่ไม่ชนกัน จึงไม่รับรองว่าจะแสดงทุกป้าย
  • contentAnimation เปลี่ยนข้อความ ภาพ หรือข้อมูลโครงสร้าง interpolate ต้องมีจำนวนจุด/closed ของ Polyline ลำดับ Path หรือโครงสร้างกราฟที่เข้าคู่ หากโครงสร้างเปลี่ยนจะอัปเดตทันที

คุณสมบัติ

dataReadonlyArray<BarChartDataPoint>

หมวดหมู่ตามลำดับอาร์เรย์ แต่ละรายการมีค่าตัวเลขและป้ายกำกับที่เลือกใส่ได้

ตัวอย่าง[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]
axis?"horizontal" | "vertical"

ทิศทางแท่ง: vertical เรียงจากซ้ายไปขวา ส่วน horizontal เรียงจากบนลงล่าง

ตัวอย่าง"vertical"
rangeY?ChartRange

ช่วงค่าที่แสดง [min, max] หากไม่ระบุจะปรับตามข้อมูลและรวมศูนย์

ตัวอย่าง[0, 100]
showLabels?boolean

แสดงป้ายกำกับหมวดหมู่ ป้ายที่ไม่ได้ระบุจะเว้นว่าง และเลย์เอาต์เนทีฟจะป้องกันการทับซ้อน

ตัวอย่างtrue
showValueLabels?boolean

แสดงป้ายตัวเลขบนแกนที่สร้างอัตโนมัติ

ตัวอย่างtrue
barThickness?number | "auto"

ความหนาของแท่งเป็นพอยต์ หรือ auto เพื่อปรับตามระยะห่างหมวดหมู่

ตัวอย่าง"auto"
xAxis?ChartAxisStyle

เส้นแกนนอนด้านล่างพื้นที่กราฟ ค่าเริ่มต้นเป็นสีพื้นหน้ากว้าง 1pt ใช้ stroke: clear เพื่อซ่อน

ตัวอย่าง{stroke: HDR($env.foreground), lineWidth: 1}
yAxis?ChartAxisStyle

เส้นแกนตั้งด้านซ้ายพื้นที่กราฟ ค่าเริ่มต้นเป็นสีพื้นหน้ากว้าง 1pt ใช้ stroke: clear เพื่อซ่อน

ตัวอย่าง{stroke: HDR($env.foreground), lineWidth: 1}
background?Paint

สีเติมแต่ละแท่ง ค่าเริ่มต้นคือสีพื้นหน้าของธีม

ตัวอย่างHDR($env.dark ? "white" : "black")
cornerRadius?number

รัศมีมุมของแต่ละแท่ง จำกัดตามขนาดของแท่ง

ตัวอย่าง0
stroke?Paint

สีหรือไล่สีเส้นขอบ clear ซ่อนเส้น

ตัวอย่าง"clear"
lineWidth?number

ความหนาเส้นเป็นพอยต์ 0 ไม่วาดเส้น

ตัวอย่าง2
strokePosition?"inside" | "center" | "outside"

ตำแหน่งเส้นขอบเทียบกับแต่ละแท่ง ค่าเริ่มต้นคือ inside

ตัวอย่าง"inside"
dash?number[]

ความยาวเส้นและช่องว่างสลับกันเป็นพอยต์ อาร์เรย์ว่างคือเส้นทึบ

ตัวอย่าง[]
dashPhase?number

ระยะเลื่อนลายเส้นประเป็นพอยต์

ตัวอย่าง0
contentAnimation?ContentAnimation

การเปลี่ยนเนื้อหาแบบเลือกได้ interpolate ต้องมีจำนวนหมวดหมู่และทิศทางเดียวกัน มิฉะนั้นจะอัปเดตทันที

ตัวอย่าง{type: "interpolate", duration: 0.25}
คุณสมบัติทั่วไป
width?number | "auto" | "fill"

ความกว้างเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง"fill"
height?number | "auto" | "fill"

ความสูงเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง"fill"
x?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0
y?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0
transform?ViewTransform

แปลงทั้ง View โดยไม่เปลี่ยนเลย์เอาต์ ระยะเลื่อนเป็นพอยต์ หมุน/เอียงเป็นองศา สเกล 1 ไม่เปลี่ยน จุดยึด 0–1

ตัวอย่าง{rotation: 0}
opacity?number

ความทึบทั้ง View: 0 โปร่งใส 1 ทึบ

ตัวอย่าง1
clipped?boolean

ตัดส่วนที่วาดเกินขอบ View

ตัวอย่างfalse
clip?"rectangle" | "ellipse"

รูปทรงตัด rectangle หรือ ellipse; Material ใช้ false เพื่อปิดได้

ตัวอย่าง"rectangle"
mask?View | null

View มาสก์อัลฟา จัดกึ่งกลางโดยไม่ส่งผลต่อเลย์เอาต์; null ปิดการใช้มาสก์

ตัวอย่าง<Circle width="fill" height="fill" background="white"/>
zIndex?number

ลำดับวาดระหว่างองค์ประกอบระดับเดียวกัน ค่ายิ่งมากยิ่งอยู่หน้า

ตัวอย่าง0
blur?number

รัศมีเบลอเป็นพอยต์ 0 คือปิด

ตัวอย่าง4
innerShadow?DrawingEffect

สี ความทึบ รัศมีเบลอ และระยะ x/y ของเอฟเฟกต์ ระยะเป็นพอยต์

ตัวอย่าง{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

สี ความทึบ รัศมีเบลอ และระยะ x/y ของเอฟเฟกต์ ระยะเป็นพอยต์

ตัวอย่าง{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

สีเงาภายนอก

ตัวอย่างHDR("black")
shadowOpacity?number

ความทึบเงา 0–1; 0 ซ่อนเงา

ตัวอย่าง0
shadowRadius?number

รัศมีเบลอเงาภายนอกเป็นพอยต์

ตัวอย่าง4
shadowX?number

เลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง

ตัวอย่าง0
shadowY?number

เลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง

ตัวอย่าง2
animations?BarChartAnimation[]

แอนิเมชันเมื่อคุณสมบัติเปลี่ยน duration/delay เป็นวินาที from/to เป็นปลายทาง repeat/autoreverse ควบคุมการซ้ำ wrap เป็นคาบ

ตัวอย่าง[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

ตัวระบุที่คงที่ระหว่างองค์ประกอบระดับเดียวกัน

ตัวอย่างใช้งาน

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

ภาพเคลื่อนไหว

ภาพเคลื่อนไหว

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

เมื่อไม่ระบุ

ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่

คุณสมบัติเมื่อไม่ระบุ
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

ก่อนหน้า

LineChart

ขั้นตอนถัดไป

ในหน้านี้

ตัวอย่างการใช้งานคุณสมบัติตัวอย่างใช้งานภาพเคลื่อนไหวเมื่อไม่ระบุAPI ที่เกี่ยวข้อง