แชร์ผ่าน

GaugeChart การควบคุม (พรีวิว)

  • บทความ

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

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

การควบคุม GaugeChart

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

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

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

สำคัญ

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

หมายเหตุ

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

คุณสมบัติ

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

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

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

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

  • ค่าต่ำสุด - ค่านี้ระบุค่าต่ำสุดของเกจวัด

  • MaxValue - ค่านี้ระบุค่าสูงสุดของเกจวัด

  • 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"
    }
)

ข้อจำกัด

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