แชร์ผ่าน

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

  • บทความ

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

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

การควบคุม VerticalBarChart

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

สำคัญ

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

หมายเหตุ

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

คุณสมบัติ

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

  • ชื่อ - ค่านี้ระบุชื่อของแผนภูมิ
  • HideLabels - ตั้งค่าตัวเลือกนี้เป็นจริงเพื่อซ่อนป้ายกำกับบนแผนภูมิ
  • BarHeight - ค่านี้ระบุความสูงของแท่งที่แสดงในแผนภูมิ
  • HideTooltip - ตั้งค่าตัวเลือกนี้เป็นจริงเพื่อซ่อนคำแนะนำบนแผนภูมิ
  • CustomColors - ตั้งค่าตัวเลือกนี้เป็นจริง เพื่ออนุญาตให้ใช้สีที่กำหนดเองบนแผนภูมิหากมีให้
  • ตัวแปร - ตัวเลือกนี้ช่วยให้สามารถแสดงแผนภูมิใน Absolute scale หรือ Part to wholeได้
  • ChartDataMode - ตัวเลือกนี้ใช้สำหรับแสดงค่าของแต่ละแท่งใน Fraction หรือ Percentage
  • รายการ - รายการการดำเนินการที่จะแสดง:
    • ItemTitle - ชื่อที่แสดง ของข้อมูลแผนภูมิที่เฉพาะเจาะจง (รายการ)
    • ItemLegend - ตำนานที่เชื่อมโยงกับข้อมูลแผนภูมิเฉพาะ (รายการ)
    • ItemValue - ตั้งค่าข้อมูลแผนภูมิเฉพาะ (รายการ)
    • ItemTotalValue - มูลค่ารวมที่จะใช้สำหรับข้อมูลแผนภูมิเฉพาะ (รายการ)
    • ItemXPopover - ข้อความป๊อปโอเวอร์บนแกน X สำหรับข้อมูลแผนภูมิเฉพาะ (รายการ)
    • ItemYPopover - ข้อความป๊อปโอเวอร์บนแกน Y สำหรับข้อมูลแผนภูมิเฉพาะ (รายการ)
    • ItemColor - ตั้งชื่อสีหรือค่า HEX ที่จะแสดงสำหรับข้อมูลแผนภูมิเฉพาะ (รายการ)

หมายเหตุ

  • สีของรายการจะใช้เฉพาะเมื่อคุณสมบัติ CustomColors เปิดอยู่
  • การซ่อนป้ายกำกับจะทำงานเมื่อแผนภูมิมีประเภท 'มาตราส่วนสัมบูรณ์'
  • การซ่อนคำแนะนำเครื่องมือทำงานได้ดีเมื่อเล่นแอป (ไม่ใช่ในสตูดิโอ) แต่จะไม่สามารถเรนเดอร์ได้ในขณะที่อยู่ในสตูดิโอ

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

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

การใช้

แมปค่าข้อมูลไปยังคุณสมบัติแผนภูมิที่สอดคล้องกันในคุณสมบัติของการควบคุม ดังที่แสดงในสูตรต่อไปนี้ Items

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

Table(
    {
        ItemTitle: "First",
        ItemLegend: "First",
        ItemValue: 40,
        ItemTotalValue: 100,
        ItemXPopOver: "10/2/2024",
        ItemYPopOver: "10%",
        ItemColor: "#00A892"
    },
    {
        ItemTitle: "Second",
        ItemLegend: "Second",
        ItemValue: 20,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "20%",
        ItemColor: "#9A44FC"
    },
    {
        ItemTitle: "Third",
        ItemLegend: "Third",
        ItemValue: 120,
        ItemTotalValue: 100,
        ItemXPopOver: "10/6/2024",
        ItemYPopOver: "30%",
        ItemColor: "#3483FA"
    },
    {
        ItemTitle: "Fourth",
        ItemLegend: "Fourth",
        ItemValue: 90,
        ItemTotalValue: 100,
        ItemXPopOver: "20/4/2024",
        ItemYPopOver: "40%",
        ItemColor: "#EBA800"
    }
)

ข้อจำกัด

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