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

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

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

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

Σημαντικό

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

Σημείωμα

Για την πλήρη τεκμηρίωση και τον κώδικα προέλευσης, ανατρέξτε στο αποθετήριο δεδομένων στοιχεία κώδικα GitHub.

Ιδιότητες

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

• HideLegend - Αυτή η τιμή υποδηλώνει εάν θα εμφανίζονται ή θα αποκρύπτονται υπομνήματα στο γράφημα.

• BarHeight - Αυτή η τιμή υποδηλώνει το ύψος της ράβδου που παρουσιάζεται στο γράφημα.

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

• CustomColors - Αυτή η επιλογή χρησιμοποιείται για την εμφάνιση προσαρμοσμένων χρωμάτων στο γράφημα, εάν παρέχεται

• Στοιχεία- Τα στοιχεία ενέργειας προς απόδοση

  • ItemTitle - Η εμφανιζόμενο όνομα των συγκεκριμένων δεδομένων γραφήματος (στοιχείο).
  • ItemKey - Το κλειδί που πρέπει να χρησιμοποιήσετε για την αναγνώριση του στοιχείου. Τα κλειδιά πρέπει να είναι μοναδικά.
  • ItemValue - Ορίστε την τιμή των συγκεκριμένων δεδομένων γραφήματος (Item).
  • 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"
    }
)

Περιορισμοί

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