HorizontalBarChart έλεγχος (έκδοση προεπισκόπησης)

[Αυτό το άρθρο αποτελεί τεκμηρίωση προέκδοσης και ενδέχεται να αλλάξει.]

Μια οριζόντια γράφημα ράβδων είναι ένα γράφημα που παρουσιάζει κατηγορικά δεδομένα με ορθογώνιες ράβδους με μήκη ανάλογα με τις τιμές που αντιπροσωπεύουν. Αυτός ο τύπος γραφήματος είναι χρήσιμος όταν η πρόθεση είναι να εμφανιστούν συγκρίσεις μεταξύ διαφόρων κατηγοριών και οι ετικέτες για αυτές τις κατηγορίες είναι μεγάλες.

Αυτό το στοιχείο κώδικα παρέχει ένα πρόγραμμα εξομοίωσης γύρω από το στοιχείο ελέγχου HorizontalBarChart Fluent UI για χρήση σε καμβά και προσαρμοσμένες σελίδες.

Σημαντικό

• Αυτή είναι μια δυνατότητα προεπισκόπησης.
• Οι λειτουργίες προεπισκόπησης δεν προορίζονται για παραγωγική χρήση και ενδέχεται να έχουν περιορισμένη λειτουργικότητα. Αυτές οι δυνατότητες είναι διαθέσιμες πριν από μια επίσημη κυκλοφορία έτσι ώστε οι πελάτες να έχουν πρόσβαση από νωρίς και να κάνουν σχόλια.

Σημείωμα

Πλήρης τεκμηρίωση και πηγαίος κώδικας που βρίσκεται στο αποθετήριο στοιχείων κώδικα GitHub.

Ιδιότητες

Το στοιχείο ελέγχου δέχεται τις παρακάτω ιδιότητες:

• Τίτλος- Αυτή η τιμή υποδηλώνει τον τίτλο του γραφήματος.
• HideLabels - Ορίστε αυτήν την επιλογή σε true για να αποκρύψετε ετικέτες στο γράφημα.
• BarHeight - Αυτή η τιμή υποδηλώνει το ύψος της ράβδου που παρουσιάζεται στο γράφημα.
• HideTooltip - Ορίστε αυτήν την επιλογή σε true για να αποκρύψετε τις συμβουλές εργαλείων στο γράφημα.
• CustomColors - Ορίστε αυτήν την επιλογή σε true για να επιτρέψετε προσαρμοσμένα χρώματα στο γράφημα, εάν παρέχεται.
• Παραλλαγή- Αυτή η επιλογή επιτρέπει την εμφάνιση του γραφήματος σε Absolute scale ή Part to whole.
• ChartDataMode - Αυτή η επιλογή παρέχει την εμφάνιση της τιμής κάθε γραμμής στο Fraction or Percentage.
• Στοιχεία- Τα στοιχεία ενέργειας που θα αποδοθούν:
  • ItemTitle - Η εμφανιζόμενο όνομα των συγκεκριμένων δεδομένων γραφήματος (Item).
  • ItemLegend - Το υπόμνημα που σχετίζεται με τα συγκεκριμένα δεδομένα γραφήματος (Item).
  • ItemValue - Ορίστε την τιμή των συγκεκριμένων δεδομένων γραφήματος (Item).
  • ItemTotalValue - Η συνολική τιμή που θα χρησιμοποιηθεί για τα συγκεκριμένα δεδομένα γραφήματος (Item).
  • 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"
    }
)

Περιορισμοί

Αυτό το στοιχείο καμβά μπορεί να χρησιμοποιηθεί μόνο σε εφαρμογές καμβά, προσαρμοσμένες σελίδες.