Selvstudium: Føj formateringsindstillinger til cirkelkortvisualiseringen

  • Artikel

Når du opretter en visualisering, kan du tilføje indstillinger for tilpasning af dens egenskaber. Nogle af de elementer, der kan være til tilpasset formateret, omfatter:

  • Titel
  • Baggrund
  • Border
  • Skygge
  • Farver

I dette selvstudium lærer du, hvordan du kan:

  • Føj formateringsegenskaber til din visualisering.
  • Pak visualiseringen
  • Importér den brugerdefinerede visualisering til en power BI Desktop- eller tjenesterapport

Forudsætning

I dette selvstudium forklares det, hvordan du føjer almindelige formateringsegenskaber til en visualisering. Vi bruger cirkelkortvisualiseringen som et eksempel. Vi tilføjer muligheden for at ændre cirklens farve og tykkelse. Hvis du ikke har mappen Circle card-projekt , som du oprettede i dette selvstudium, skal du gentage selvstudiet, før du fortsætter.

Tilføjelse af formateringsindstillinger

  1. I PowerShell skal du navigere til din cirkelkortprojektmappe og starte cirkelkortvisualiseringen. Din visualisering kører nu, mens den hostes på computeren.

    pbiviz start

  2. Vælg panelet Formatér i Power BI.

    Du bør kunne se generelle formateringsindstillinger, men ikke nogen formateringsindstillinger for visualiseringer.

    Screenshot of formatting panel with only general formatting options.

  3. Åbn filen i capabilities.json Visual Studio Code.

  4. Før matrixen dataViewMappings skal du tilføje objekter.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. capabilities.json Gem filen.

  6. Gennemse formateringsindstillingerne igen i Power BI.

    Bemærk

    Hvis formateringsindstillingerne ikke ændres, skal du vælge Genindlæs brugerdefineret visualisering.

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

  7. Angiv indstillingen Titel til Fra. Bemærk, at visualiseringen ikke længere viser målingsnavnet i øverste venstre hjørne.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Tilføjelse af brugerdefinerede formateringsindstillinger

Lad os nu tilføje en ny gruppe med navnet farve til konfiguration af cirkelfarven og tykkelsen af cirklens kontur.

  1. I PowerShell skal du angive Ctrl+C for at stoppe den brugerdefinerede visualisering.

  2. I Visual Studio Code skal du indsætte følgende JSON-fragment i objektets navngivne objekter i capabilities.json filen.

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

    Dette JSON-fragment beskriver en gruppe kaldet cirkel, som består af to variabler - circleColor og circleThickness.

  3. capabilities.json Gem filen.

  4. I ruden Stifinder skal du gå til mappen src og derefter vælge indstillinger.ts. Denne fil repræsenterer indstillingerne for startvisualiseringen.

  5. settings.ts Erstat importlinjerne og to klasser med følgende kode i filen.

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

    Dette modul definerer de to klasser. Klassen Circle Indstillinger definerer to egenskaber med navne, der svarer til de objekter, der er defineret i filen capabilities.json (circleColor og circleThickness), og angiver standardværdier. Klassen Visual Indstillinger definerer cirkelobjektet i henhold til de egenskaber, der er beskrevet i capabilities.json filen.

  6. settings.ts Gem filen.

  7. Åbn visual.ts-filen.

  8. Importér visual.ts : i filen .

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

    og tilføj følgende egenskaber i klassen Visual :

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Denne egenskab gemmer en reference til objektet Visual Indstillinger, der beskriver indstillingerne for visualiseringen.

  9. I klassen Visual skal du indsætte følgende som den første linje i konstruktøren:

    this.formattingSettingsService = new FormattingSettingsService();

  10. I klassen Visual skal du tilføje følgende metode efter opdateringsmetoden .

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

    Denne funktion bliver kaldt på alle formateringsrudegengivelser. Det giver dig mulighed for at vælge, hvilke objekter og egenskaber du vil vise for brugerne i egenskabsruden.

  11. Tilføj følgende kode i opdateringsmetoden efter erklæringen af radiusvariablen.

    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);

    Denne kode henter formatindstillingerne. Den justerer alle værdier, der overføres til egenskaben circleThickness , og konverterer den til et tal mellem nul og 10.

    Screenshot of setting circle thickness to between zero and 10.

  12. I cirkelelementet skal du ændre de værdier, der overføres til fyldtypografien og typografien penselstrøgsbredde, på følgende måde:

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

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

    Screenshot of circle elements.

  13. visual.ts Gem filen.

  14. Start visualiseringen i PowerShell.

    pbiviz start

  15. I Power BI skal du på værktøjslinjen, der flyder over visualiseringen, vælge Slå automatisk genindlæsning til/fra.

    Screenshot of Toggle Auto Reload icon.

  16. I indstillingerne for visualiseringsformat skal du udvide Cirkel.

    Screenshot of the final circle card visuals format pane elements.

    Rediger indstillingen farve og tykkelse .

Rediger indstillingen for tykkelse til en værdi, der er mindre end nul, og en værdi, der er højere end 10. Bemærk derefter, at visualiseringen opdaterer værdien til et acceptabelt minimum eller maksimum.

Fejlfinding

Du kan finde tip til fejlfinding af din brugerdefinerede visualisering i fejlfindingsvejledningen.

Pakker den brugerdefinerede visualisering

Nu, hvor visualiseringen er fuldført og klar til brug, er det tid til at pakke den. En pakket visualisering kan importeres til Power BI-rapporter eller -tjenesten, så andre kan bruge den og nyde den.

Når din visualisering er klar, skal du følge vejledningen i Pakke en Power BI-visualisering og derefter dele den med andre, hvis du vil, så de kan importere og nyde den.

Relateret indhold