Εκμάθηση: Προσθήκη επιλογών μορφοποίησης στην απεικόνιση κάρτας κύκλου

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

  • Τίτλος
  • Φόντο
  • Περίγραμμα
  • Σκιά
  • Χρώματα

Σε αυτή την εκμάθηση, θα μάθετε πώς μπορείτε να κάνετε τα εξής:

  • Προσθέστε ιδιότητες μορφοποίησης στην απεικόνιση.
  • Συσκευασία της απεικόνισης
  • Εισαγωγή της προσαρμοσμένης απεικόνισης σε μια Power BI Desktop ή αναφορά υπηρεσίας

Προαπαιτούμενο στοιχείο

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

Προσθήκη επιλογών μορφοποίησης

  1. Στο PowerShell, μεταβείτε στον φάκελο έργου της κάρτας κύκλου και ξεκινήστε την απεικόνιση κάρτας κύκλου. Η απεικόνισή σας πλέον εκτελείται ενώ φιλοξενείται στον υπολογιστή σας.

    pbiviz start
    
  2. Στο Power BI, επιλέξτε τη σελίδα μορφοποίησης.

    Θα πρέπει να δείτε το εξής μήνυμα: Οι επιλογές μορφοποίησης δεν είναι διαθέσιμες για αυτήν την απεικόνιση.

    Πινέλο μορφοποίησης

    Εάν βλέπετε εδώ επιλογές μορφοποίησης, αλλά δεν μπορείτε να τις αλλάξετε, μεταβείτε στην Προσθήκη προσαρμοσμένων επιλογών μορφοποίησης για να τις προσαρμόσετε.

  3. Στο Visual Studio Code, ανοίξτε το capabilities.json αρχείο.

  4. Πριν από τον πίνακα dataViewMappings, προσθέστε το αντικείμενο objects (μετά τη γραμμή 8).

    "objects": {},
    

    Προσθήκη αντικειμένου objects

  5. Αποθηκεύστε το capabilities.json αρχείο.

  6. Στο Power BI, ελέγξτε ξανά τις επιλογές μορφοποίησης.

    Σημείωση

    Εάν δεν βλέπετε αλλαγή στις επιλογές μορφοποίησης, τότε επιλέξτε Επαναφόρτωση προσαρμοσμένης απεικόνισης.

    Προβολή επιλογών μορφοποίησης

  7. Ορίστε την επιλογή Τίτλος στη θέση Ανενεργό. Παρατηρήστε ότι στην απεικόνιση δεν εμφανίζεται πλέον το όνομα μέτρησης στην επάνω αριστερή γωνία.

    Η επιλογή τίτλου είναι ανενεργή

    Πλακίδιο χωρίς όνομα

Προσθήκη προσαρμοσμένων επιλογών μορφοποίησης

Τώρα ας προσθέσουμε νέα ομάδα που ονομάζεται χρώμα για τη ρύθμιση παραμέτρων του χρώματος και του πλάτους του κύκλου.

  1. Στο PowerShell, πληκτρολογήστε Ctrl+C για να διακόψετε την προσαρμοσμένη απεικόνιση.

  2. Στο Visual Studio Code, στο αρχείο, εισαγάγετε το ακόλουθο τμήμα capabilities.json JSON στο αντικείμενο objects .

        {
            "circle": {
                "displayName": "Circle",
                "properties": {
                    "circleColor": {
                        "displayName": "Color",
                        "description": "The fill color of the circle.",
                        "type": {
                            "fill": {
                                "solid": {
                                    "color": true
                                }
                            }
                        }
                    },
                    "circleThickness": {
                        "displayName": "Thickness",
                        "description": "The circle thickness.",
                        "type": {
                            "numeric": true
                        }
                    }
                }
            }
        }
    

    Το τμήμα JSON περιγράφει μια ομάδα που ονομάζεται circle, η οποία αποτελείται από δύο μεταβλητές - circleColor και circleThickness.

    Κώδικας πάχους κύκλου

  3. Αποθηκεύστε το capabilities.json αρχείο.

  4. Στο τμήμα παραθύρου Explorer, μεταβείτε στον φάκελο src και, στη συνέχεια, επιλέξτε settings.ts. Αυτό το αρχείο αντιπροσωπεύει τις ρυθμίσεις για την αρχική απεικόνιση.

  5. Στο settings.ts αρχείο, αντικαταστήστε τις δύο κλάσεις με τον ακόλουθο κώδικα.

    export class CircleSettings {
        public circleColor: string = "white";
        public circleThickness: number = 2;
    }
    export class VisualSettings extends DataViewObjectsParser {
        public circle: CircleSettings = new CircleSettings();
    }
    

    Κλάσεις λειτουργικής μονάδας

    Αυτή η λειτουργική μονάδα ορίζει τις δύο κλάσεις. Η κλάση CircleSettings ορίζει δύο ιδιότητες με ονόματα που αντιστοιχούν στα αντικείμενα που έχουν οριστεί στο αρχείο capabilities.json (circleColor και circleThickness) και επίσης ορίζει τις προεπιλεγμένες τιμές. Η κλάση VisualSettings λαμβάνει την κλάση DataViewObjectParser και προσθέτει μια ιδιότητα με το όνομα circle, η οποία αντιστοιχεί στο αντικείμενο που έχει οριστεί στο αρχείο και επιστρέφει μια παρουσία του capabilities.json CircleSettings.

  6. Αποθηκεύστε το settings.ts αρχείο.

  7. Ανοίξτε το visual.ts αρχείο.

  8. Στο visual.ts αρχείο, εισαγάγετε VisualSettings, VisualObjectInstanceEnumeration και EnumerateVisualObjectInstancesΕπισκοπίες:

    import { VisualSettings } from "./settings";
    import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
    import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
    

    και στην κλάση Visual προσθέστε την ακόλουθη ιδιότητα:

    private visualSettings: VisualSettings;
    

    Αυτή η ιδιότητα αποθηκεύει μια αναφορά για το αντικείμενο VisualSettings, περιγράφοντας τις ρυθμίσεις απεικόνισης.

    Προσθήκη κλάσης απεικόνισης

  9. Στην κλάση Visual, προσθέστε την ακόλουθη μέθοδο πριν από τη μέθοδο update. Αυτή η μέθοδος χρησιμοποιείται για τη συμπλήρωση των επιλογών μορφοποίησης.

    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        const settings: VisualSettings = this.visualSettings || <VisualSettings>VisualSettings.getDefault();
        return VisualSettings.enumerateObjectInstances(settings, options);
    }
    

    Αυτή η μέθοδος χρησιμοποιείται για τη συμπλήρωση των επιλογών μορφοποίησης.

    Αντικείμενο ρυθμίσεων απεικόνισης

  10. Στη μέθοδο update, μετά τη δήλωση της μεταβλητής radius, προσθέστε τον ακόλουθο κώδικα.

    this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);
    
    this.visualSettings.circle.circleThickness = Math.max(0, this.visualSettings.circle.circleThickness);
    this.visualSettings.circle.circleThickness = Math.min(10, this.visualSettings.circle.circleThickness);
    

    Αυτός ο κώδικας ανακτά τις επιλογές μορφοποίησης. Προσαρμόζει οποιαδήποτε τιμή μεταβιβάζεται στην ιδιότητα circleThickness και τη μετατρέπει σε 0 αν είναι αρνητική ή 10, εάν πρόκειται για μια τιμή μεγαλύτερη του 10.

    Μεταβλητή ακτίνας

  11. Στο στοιχείο circle , τροποποιήστε τις τιμές που μεταβιβάσται στο στυλ γεμίσματος και στο στυλ stroke-width ως εξής:

    this.visualSettings.circle.circleColor
    
    this.visualSettings.circle.circleThickness
    

    Γέμισμα του στοιχείου κύκλου

  12. Αποθηκεύστε το visual.ts αρχείο.

  13. Στο PowerShell, ξεκινήστε την απεικόνιση.

    pbiviz start
    
  14. Στο Power BI, στη γραμμή εργαλείων πάνω από την απεικόνιση, επιλέξτε Εναλλαγή της αυτόματης επαναφόρτωσης.

    Εναλλαγή της αυτόματης επαναφόρτωσης

  15. Στις επιλογές μορφής απεικόνισης, αναπτύξτε το στοιχείο Κύκλος.

    Μορφή κύκλου

    Τροποποιήστε την επιλογή χρώμα και πάχος.

    Τροποποιήστε την επιλογή πάχος σε μια τιμή μικρότερη από μηδέν και μια τιμή μεγαλύτερη του 10. Στη συνέχεια, παρατηρήστε την απεικόνιση να ενημερώνει την τιμή σε μια ανεκτή ελάχιστη ή μέγιστη τιμή.

Δημιουργία πακέτου με την προσαρμοσμένη απεικόνιση

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

Σε αυτή την ενότητα θα μάθετε πώς να

Επεξεργασία των τιμών ιδιοτήτων της απεικόνισης

  1. Στο PowerShell, πληκτρολογήστε Ctrl+C για να διακόψετε την προσαρμοσμένη απεικόνιση.

  2. Ανοίξτε το pbiviz.json αρχείο στο Visual Studio Code.

  3. Στο αντικείμενο visual, τροποποιήστε την ιδιότητα displayName σε Circle Card.

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

    Απεικόνιση εμφανιζόμενου ονόματος

  4. Για την ιδιότητα description, πληκτρολογήστε το ακόλουθο κείμενο.

    Displays a formatted measure value inside a circle (Εμφανίζει μια μορφοποιημένη τιμή μέτρησης μέσα σε έναν κύκλο)

  5. Συμπληρώστε supportUrl και gitHubUrl για την απεικόνιση.

    Παράδειγμα:

    {
        "supportUrl": "https://community.powerbi.com",
        "gitHubUrl": "https://github.com/microsoft/PowerBI-visuals-circlecard"
    }
    
  6. Εισαγάγετε τα στοιχεία σας στο αντικείμενο author.

  7. Αποθηκεύστε το pbiviz.json αρχείο.

Ενημερώστε το εικονίδιο

  1. Στο αντικείμενο assets του pbiviz.json αρχείου, παρατηρήστε ότι το έγγραφο ορίζει μια διαδρομή προς ένα εικονίδιο. Το εικονίδιο είναι η εικόνα που εμφανίζεται στο τμήμα παραθύρου Απεικονίσεις. Πρέπει να είναι αρχείο PNG, διαστάσεων 20 pixel επί 20 pixel.

  2. Στην Windows Explorer, αντιγράψτε το αρχείο και, στη συνέχεια, επικολλήστε το για να icon.png αντικαταστήσετε το προεπιλεγμένο αρχείο που βρίσκεται στον φάκελο πόρων.

  3. Στο Visual Studio Code, στο τμήμα παραθύρου Explorer, αναπτύξτε τον φάκελο πόρων και, στη συνέχεια, επιλέξτεicon.png αρχείο.

  4. Εξετάστε το εικονίδιο.

    Εικόνα του τμήματος παραθύρου "Απεικονίσεις"

Συσκευασία της απεικόνισης

  1. Στο Visual Studio , βεβαιωθείτε ότι όλα τα αρχεία έχουν αποθηκευτεί.

  2. Για να δημιουργήσετε ένα πακέτο με την προσαρμοσμένη απεικόνιση, στο PowerShell, πληκτρολογήστε την ακόλουθη εντολή.

    pbiviz package
    

Αυτή η εντολή δημιουργεί ένα αρχείο pbiviz στον κατάλογο dist/ του έργου απεικόνισης και αντικαθιστά τυχόν προηγούμενο αρχείο pbiviz που μπορεί να υπάρχει.

Φάκελος dist

Το πακέτο περιέχει όλα τα στοιχεία που απαιτούνται για την εισαγωγή της προσαρμοσμένης απεικόνισης είτε στην υπηρεσία Power BI είτε σε μια αναφορά Power BI Desktop. Έχετε συσκευάστε τώρα την προσαρμοσμένη απεικόνιση και είναι έτοιμη για χρήση.

Εισαγωγή της προσαρμοσμένης απεικόνισης

Τώρα είστε έτοιμοι να εισαγάγετε την προσαρμοσμένη απεικόνιση κάρτας κύκλου, ώστε να μπορείτε να την χρησιμοποιήσετε στις αναφορές σας. Ακολουθήστε τις οδηγίες στην εισαγωγή ενός αρχείου απεικόνισης από τον τοπικό υπολογιστή σας στο Power-BI για να εισαγάγετε το αρχείο από τον φάκελο circleCard.pbiviz dist στην Power BI σας.

Εντοπισμός σφαλμάτων

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

Επόμενα βήματα