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

  • Άρθρο

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

  • Τϊτλος
  • Φόντο
  • Border
  • Σκιά
  • Χρώματα

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

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

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

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

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

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

    pbiviz start

  2. Στο Power BI, επιλέξτε τον πίνακα Μορφοποίηση.

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

    Screenshot of formatting panel with only general formatting options.

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

  4. Πριν από τον πίνακα dataViewMappings , προσθέστε αντικείμενα.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

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

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

    Σημείωμα

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

    Screenshot of general and visual formatting options on the formatting pane.

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

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

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

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

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

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

        "circle": {
        "properties": {
            "circleColor": {
                "type": {
                    "fill": {
                        "solid": {
                            "color": true
                        }
                    }
                }
            },
            "circleThickness": {
                "type": {
                    "numeric": true
                }
            }
        }
    }

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

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

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

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

    import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

import FormattingSettingsCard = formattingSettings.SimpleCard;
import FormattingSettingsSlice = formattingSettings.Slice;
import FormattingSettingsModel = formattingSettings.Model;

export class CircleSettings extends FormattingSettingsCard{
    public circleColor = new formattingSettings.ColorPicker({
        name: "circleColor",
        displayName: "Color",
        value: { value: "#ffffff" },
        visible: true
    });

    public circleThickness = new formattingSettings.NumUpDown({
        name: "circleThickness",
        displayName: "Thickness",
        value: 2,
        visible: true
    });

    public name: string = "circle";
    public displayName: string = "Circle";
    public visible: boolean = true;
    public slices: FormattingSettingsSlice[] = [this.circleColor, this.circleThickness]
}

export class VisualSettings extends FormattingSettingsModel {
    public circle: CircleSettings = new CircleSettings();
    public cards: FormattingSettingsCard[] = [this.circle];
}

    Αυτή η εκπαιδευτική ενότητα ορίζει τις δύο κλάσεις. Η κλάση Circle Ρυθμίσεις ορίζει δύο ιδιότητες με ονόματα που συμφωνούν με τα αντικείμενα που ορίζονται στο αρχείο capabilities.json (circleColor και circleThickness) και ορίζει προεπιλεγμένες τιμές. Η κλάση Ρυθμίσεις Visual ορίζει το αντικείμενο κύκλου σύμφωνα με τις ιδιότητες που περιγράφονται στο capabilities.json αρχείο.

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

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

  8. visual.ts Στο αρχείο, εισαγάγετε το :

    import { VisualSettings } from "./settings";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

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

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

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

  9. Στην κλάση Visual, εισαγάγετε τα παρακάτω ως την πρώτη γραμμή της κατασκευής:

    this.formattingSettingsService = new FormattingSettingsService();

  10. Στην κλάση Visual, προσθέστε την ακόλουθη μέθοδο μετά τη μέθοδο update.

    public getFormattingModel(): powerbi.visuals.FormattingModel {
    return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
}

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

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

    this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews);
this.visualSettings.circle.circleThickness.value = Math.max(0, this.visualSettings.circle.circleThickness.value);
this.visualSettings.circle.circleThickness.value = Math.min(10, this.visualSettings.circle.circleThickness.value);

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

    Screenshot of setting circle thickness to between zero and 10.

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

    .style("fill", this.visualSettings.circle.circleColor.value.value)

    .style("stroke-width", this.visualSettings.circle.circleThickness.value)

    Screenshot of circle elements.

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

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

    pbiviz start

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

    Screenshot of Toggle Auto Reload icon.

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

    Screenshot of the final circle card visuals format pane elements.

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

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

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

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

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

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

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

Σχετικό περιεχόμενο