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

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

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

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

สำคัญ

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

หมายเหตุ

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

คุณสมบัติ

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

• HideLegend - ค่านี้ระบุว่าจะแสดงหรือซ่อนคำอธิบายแผนภูมิ

• BarHeight - ค่านี้ระบุความสูงของแท่งที่แสดงในแผนภูมิ

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

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

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

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

หมายเหตุ

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

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

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

การใช้

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

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

Table(
    {
        ItemKey: "1",
        ItemTitle: "First",
        ItemCallout:"First item callout title",
        ItemValue: 40,
        ItemColor: "#00A892"
    },
    {
        ItemKey: "2",
        ItemTitle: "Second",
        ItemCallout:"Second item callout title",
        ItemValue: 20,
        ItemColor: "#9A44FC"
    },
    {
        ItemKey: "3",
        ItemTitle: "Third",
        ItemCallout:"Third item callout title",
        ItemValue: 120,
        ItemColor: "#3483FA"
    },
    {
        ItemKey: "4",
        ItemTitle: "Fourth",
        ItemCallout:"Fourth item callout title",
        ItemValue: 90,
        ItemColor: "#EBA800"
    }
)

ข้อจำกัด

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