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


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

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

Υπάρχουν δύο τύποι διαγραμμάτων μετρητών: Ταχύμετρο και μετρητής βαθμολογίας.

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

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

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

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

Σημαντικό

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

Σημείωμα

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

Ιδιότητες

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

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

  • Δευτερεύουσα ετικέτα - Αυτή η τιμή υποδηλώνει δευτερεύουσα ετικέτα του γραφήματος.

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

  • MinValue - Αυτή η τιμή υποδηλώνει την ελάχιστη τιμή του μετρητή.

  • MaxValue - Αυτή η τιμή υποδηλώνει τη μέγιστη τιμή του μετρητή.

  • HideMinMax - Αυτή η τιμή υποδηλώνει εάν θα αποκρύψετε τις ελάχιστες και μέγιστες τιμές στο μετρητή.

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

  • ChartValueFormat - Αυτή η τιμή υποδηλώνει την εμφάνιση της τιμής γραφήματος στο Percentage or Fraction.

  • CustomColors - Ορίστε αυτήν την τιμή σε true για να επιτρέψετε προσαρμοσμένα χρώματα στο γράφημα, εάν παρέχονται.

  • Στοιχεία- Τα στοιχεία ενέργειας που θα αποδοθούν:

    • ItemLegend - Η εμφανιζόμενο όνομα των συγκεκριμένων δεδομένων γραφήματος (Στοιχείο).
    • ItemSize - Το μέγεθος των συγκεκριμένων δεδομένων γραφήματος (Item).
    • ItemColor - Ορίστε το όνομα χρώματος ή την τιμή HEX που θα εμφανίζεται για τα συγκεκριμένα δεδομένα γραφήματος (Στοιχείο).

Σημείωμα

Το χρώμα στοιχείου εφαρμόζεται μόνο εάν η ιδιότητα CustomColors είναι ενεργοποιημένη.

Προσβασιμότητα

  • AccessibilityLabel - Οθόνη Αναγνώστης aria-label.

Χρήση

Ταχύμετρο

Απαιτείται μόνο μία σειρά για Items. Χρησιμοποιήστε το για ChartValue να υποδείξετε τη θέση-στόχο.

Table(
    {
        ItemSize: 15,
        ItemColor: "#3483FA"
    }
)

Μετρητής βαθμολογίας

Δώστε τα εύρη ως Items ιδιότητα. Το άθροισμα όλων ItemSize των τιμών πρέπει να προσθέτει έως και το 100% της διαφοράς μεταξύ του MinValue και MaxValue. Χρησιμοποιήστε το για ChartValue να υποδείξετε την τρέχουσα θέση.

Table(
    {
        ItemLegend: "Critical",
        ItemSize: 11,
        ItemColor: "#C50F1F"
    },
    {
        ItemLegend: "Warning",
        ItemSize: 25,
        ItemColor: "#F2610C"
    },
    {
        ItemLegend: "No risk",
        ItemSize: 30,
        ItemColor: "#107C10"
    }
)

Περιορισμοί

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