Κοινή χρήση μέσω

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

  • Άρθρο

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

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

Στοιχείο ελέγχου DonutChart.

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

Σημαντικό

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

Σημείωμα

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

Ιδιότητες

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

  • Τίτλος- Αυτή η τιμή υποδηλώνει τον τίτλο του γραφήματος.

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

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

  • ShowLabelsInPercentage - Αυτή η επιλογή ελέγχει εάν θα εμφανίζονται οι ετικέτες σε ποσοστό.

  • InnerRadius - Ορίστε την τιμή για την εσωτερική ακτίνα του γραφήματος ντόνατς.

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

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

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

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

Περιορισμοί

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