แชร์ผ่าน

GaugeChart การควบคุม (ดูตัวอย่าง)

[บทความนี้เป็นคู่มือรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

มาตรวัดมีสองประเภท: มาตรวัดความเร็วและมาตรวัดระยะทาง

การควบคุม GaugeChart

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

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

ส่วนประกอบโค้ดนี้จัดให้มีตัวห่อหุ้มรอบตัวควบคุม Fluent UI GaugeChart เพื่อใช้งานในแคนวาสและหน้าที่กำหนดเอง

สำคัญ

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

หมายเหตุ

สำหรับเอกสารประกอบและซอร์สโค้ดฉบับเต็ม โปรดดูที่ ที่เก็บส่วนประกอบโค้ดของ GitHub |

คุณสมบัติ

การควบคุมยอมรับคุณสมบัติต่อไปนี้:

  • Title - ค่านี้แสดงชื่อของแผนภูมิ

  • ป้ายย่อย - ค่านี้ระบุป้ายย่อยของแผนภูมิ

  • ChartValue - ค่านี้ระบุค่าที่จะแสดงบนมาตรวัด

  • ค่าต่ำสุด - ค่านี้แสดงถึงค่าต่ำสุดของเกจวัด

  • ค่าสูงสุด - ค่านี้แสดงถึงค่าสูงสุดของเกจวัด

  • HideMinMax - ค่านี้ระบุว่าจะซ่อนค่าต่ำสุดและสูงสุดบนเกจวัดหรือไม่

  • HideLegend - ค่านี้ระบุว่าจะซ่อนคำอธิบายบนมาตรวัดหรือไม่

  • ChartValueFormat - ค่านี้ระบุให้แสดงค่าแผนภูมิใน Percentage หรือ Fraction

  • CustomColors - ตั้งค่านี้เป็นจริงเพื่ออนุญาตให้ใช้สีที่กำหนดเองบนแผนภูมิหากมีให้

  • รายการ - รายการการดำเนินการที่จะแสดง:

    • ItemLegend - ชื่อที่แสดงของข้อมูลแผนภูมิเฉพาะ (รายการ)
    • ItemSize - ขนาดของข้อมูลแผนภูมิเฉพาะ (รายการ)
    • ItemColor - ตั้งชื่อสีหรือค่า HEX ที่จะแสดงสำหรับข้อมูลแผนภูมิเฉพาะ (รายการ)

หมายเหตุ

สีของรายการจะใช้เฉพาะเมื่อคุณสมบัติ CustomColors เปิดอยู่

ความสามารถเข้าถึง

  • AccessibilityLabel - ตัวอ่านหน้าจอ aria-label

การใช้

มาตรวัดความเร็ว

ต้องการเพียงหนึ่งแถวสำหรับ Items ใช้ ChartValue เพื่อระบุตำแหน่งเป้าหมาย

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

มิเตอร์วัดเรตติ้ง

ระบุช่วงเป็นคุณสมบัติ Items ผลรวมของค่า ItemSize ทั้งหมดจะต้องรวมกันได้ 100% ของความแตกต่างระหว่าง MinValue และ MaxValue ใช้ ChartValue เพื่อระบุตำแหน่งปัจจุบัน

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

ข้อจำกัด

ส่วนประกอบของพื้นที่ทำงานนี้ใช้ได้เฉพาะในแอปพื้นที่ทำงานและหน้าที่กำหนดเองเท่านั้น

  • Last updated on