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

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

  • Άρθρο

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

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

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

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

Προϋπόθεση

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

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

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

    pbiviz start

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

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

    Στιγμιότυπο οθόνης του πίνακα μορφοποίησης με μόνο γενικές επιλογές μορφοποίησης.

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

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

    "objects": {},

    Στιγμιότυπο οθόνης του αρχείου δυνατοτήτων με κενό πίνακα αντικειμένων.

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

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

    Σημείωση

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

    Στιγμιότυπο οθόνης των επιλογών γενικής και μορφοποίησης απεικόνισης στο τμήμα παραθύρου μορφοποίησης.

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

    Στιγμιότυπο οθόνης του τμήματος παραθύρου απεικονίσεων με απενεργοποιημένο τον διακόπτη

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

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

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

  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];
}

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

  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;

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

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

    this.formattingSettingsService = new FormattingSettingsService();

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

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

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

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

    this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews[0]);
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.

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

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

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

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

    Στιγμιότυπο οθόνης στοιχείων κύκλου.

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

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

    pbiviz start

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

    Στιγμιότυπο οθόνης του εικονιδίου Εναλλαγή της αυτόματης επαναφόρτωσης.

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

    Στιγμιότυπο οθόνης των τελικών στοιχείων παραθύρου μορφοποίησης απεικονίσεων κάρτας κύκλου.

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

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

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

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

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

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

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

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