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

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

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

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

สำคัญ

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

หมายเหตุ

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

คุณสมบัติ

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

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

• HideLabel - ตัวเลือกนี้ควบคุมว่าจะแสดงหรือซ่อนป้ายชื่อบนแผนภูมิ

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

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

• InnerRadius - ตั้งค่ารัศมีภายในของแผนภูมิโดนัท

• ValueInsideDonut - คุณสมบัตินี้ระบุค่าที่จะแสดงภายในแผนภูมิโดนัท

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

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

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

หมายเหตุ

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

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

• AccessibilityLabel - หน้าจอ ผู้อ่าน aria-label

การใช้

แมปค่าข้อมูลกับคุณสมบัติแผนภูมิที่สอดคล้องกันในคุณสมบัติ Items ของตัวควบคุม ดังแสดงในสูตรด้านล่าง แผนภูมิจะปรับภาพโดยอัตโนมัติเพื่อให้ตรงกับค่าที่สัมพันธ์กัน

เปิดใช้งานคุณสมบัติ CustomColors เพื่อกำหนดสีที่สอดคล้องกัน

Table(
    {
        ItemLegend: "First",
        ItemValue: 60,
        ItemColor:"#00A892"
    },
    {
        ItemLegend: "Second",
        ItemValue: 10,
        ItemColor:"#9A44FC"
    },
    {
        ItemLegend: "Third",
        ItemValue: 30,
        ItemColor:"#3483FA"
    }
)

ข้อจำกัด

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