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

LineChart

พล็อตชุดข้อมูลด้วยค่า x/y จริงเป็นเส้นโค้ง เหมาะสำหรับแนวโน้ม เช่น ความเร็วและเวลา รองรับช่วงพิกัด แกน และป้ายกำกับ ค่า y ที่หายไปจะทำให้ส่วนของเส้นแตก

ตัวอย่าง

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

การใช้งาน

  • value.x/y กำหนดตำแหน่ง label.x/y เป็นข้อความ ไม่เรียง x ให้อัตโนมัติ y=null ตัดเส้น กราฟเลื่อนตามเวลาต้องปรับ data และ rangeX เช่น [วินาทีปัจจุบัน−30,วินาทีปัจจุบัน]
  • $data.history เป็น 30 วินาทีล่าสุดจากเก่าไปใหม่ อาจว่างหรือขาดค่า timestamp เป็นมิลลิวินาที elapsed เป็นวินาที เก็บช่องว่าง null และใช้ elapsed.value แทนอินเด็กซ์เป็นเวลา
  • rangeX/rangeY จำกัดตัวเลข ไม่ใช่ป้าย ซ่อนป้ายไม่ซ่อนแกน ใช้ stroke="clear" แยกต่างหาก ระบบเลือกป้ายที่ไม่ชนกัน จึงไม่รับรองว่าจะแสดงทุกป้าย
  • contentAnimation เปลี่ยนข้อความ ภาพ หรือข้อมูลโครงสร้าง interpolate ต้องมีจำนวนจุด/closed ของ Polyline ลำดับ Path หรือโครงสร้างกราฟที่เข้าคู่ หากโครงสร้างเปลี่ยนจะอัปเดตทันที

คุณสมบัติ

dataReadonlyArray<ChartDataPoint>

ข้อมูลกราฟ value.x/y กำหนดพิกัด label.x/y กำหนดข้อความ และ y ที่เป็น null จะตัดเส้น

ตัวอย่าง[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]
rangeX?ChartRange

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

ตัวอย่าง[0, 30]
rangeY?ChartRange

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

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

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

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

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

ตัวอย่างtrue
xAxis?ChartAxisStyle

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

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

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

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

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

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

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

ตัวอย่าง2
lineCap?"round" | "butt" | "square"

ปลายเส้น butt ตัด square ยื่นสี่เหลี่ยม round มน

ตัวอย่าง"round"
lineJoin?"round" | "miter" | "bevel"

รูปแบบจุดต่อเส้น miter, round หรือ bevel

ตัวอย่าง"round"
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?LineChartAnimation[]

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

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

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

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

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

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

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

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

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

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

คุณสมบัติเมื่อไม่ระบุ
data[]
showXLabelstrue
showYLabelstrue
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

$data · ข้อมูลการขับขี่

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

BarChart

Color / Gradient

BarChart

ก่อนหน้า

ชนิดข้อมูลทั่วไป

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

ในหน้านี้

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