Selvstudium: tilføjelse af formateringsindstillinger til det visuelle element på cirklen kort

Artikel
10/14/2021
5 minutter til læsning

Når du opretter en visualisering, kan du tilføje indstillinger for tilpasning af dens egenskaber. Nogle af de elementer, der kan tilpasses i tilpassede format, omfatter:

Titel
Baggrund
Kant
Lagt
Farvesæt

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

Føj formateringsegenskaber til dit visuelle element.
Pak det visuelle element
importér den brugerdefinerede visualisering til en Power BI Desktop eller en tjeneste rapport

Forudsætning

I dette selvstudium forklares det, hvordan du føjer almindelige formateringsegenskaber til en visualisering. Vi bruger det visuelle element i cirkel kortet som et eksempel. Vi tilføjer muligheden for at ændre cirklens farve og tykkelse. Hvis du ikke har den mappe med kort til cirkler , som du har oprettet i dette selvstudium, skal du gentage selvstudiet, før du fortsætter.

Tilføjelse af formateringsindstillinger

I PowerShell skal du navigere til mappen med cirkl Card-projektet og starte det visuelle element i cirklen. Din visualisering kører nu, mens den hostes på din computer.
```
pbiviz start
```
I Power BI skal du vælge siden Formatér.

Du får vist en meddelelse med teksten – Formateringsindstillinger er ikke tilgængelige for denne visual.

Hvis du får vist formateringsindstillinger her, men ikke kan ændre dem, skal du tilføje brugerdefinerede formateringsindstillinger for at tilpasse dem.
åbn filen i Visual Studio kode capabilities.json .
Før matrixen dataViewMappings skal du tilføje objekter (efter linje 8).
```
"objects": {},
```
Gem capabilities.json filen.
I Power BI skal du gennemse formateringsindstillingerne igen.

Bemærk

Hvis du ikke kan se ændringerne af formateringsindstillingerne, skal du vælge Genindlæs brugerdefineret visual.
Angiv indstillingen Titel til Fra. Bemærk, at visualen ikke længere viser navnet på målingen i øverste venstre hjørne.

Tilføjelse af brugerdefinerede formateringsindstillinger

Lad os nu tilføje en ny gruppe kaldet farve til at konfigurere cirklens farve og bredde.

I PowerShell skal du skrive CTRL + C for at stoppe den brugerdefinerede visualisering.

i filen Visual Studio kode skal capabilities.json du i filen indsætte følgende JSON-fragment i objektet med navnet 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-fragmentet beskriver en gruppe med navnet cirkel, der består af to variabler – circleColor og circleThickness.

Kode for cirklens tykkelse

Gem capabilities.json filen.
Gå til mappen src i ruden Explorer, og vælg derefter Settings. ts. Denne fil repræsenterer indstillingerne for startvisualen.
I settings.ts filen skal du erstatte de to klasser med følgende kode.
```
export class CircleSettings {
    public circleColor: string = "white";
    public circleThickness: number = 2;
}
export class VisualSettings extends DataViewObjectsParser {
    public circle: CircleSettings = new CircleSettings();
}
```
Dette modul definerer de to klasser. CircleSettings -klassen definerer to egenskaber med navne, der stemmer overens med de objekter, der er defineret i capabilities.json filen (circleColor og circleThickness), og som også angiver standardværdier. VisualSettings -klassen arver DataViewObjectParser -klassen og tilføjer en egenskab med navnet cirkel, der svarer til det objekt, der er defineret i capabilities.json filen, og returnerer en forekomst af CircleSettings.
Gem settings.ts filen.
Åbn visual.ts filen.
I visual.ts filen, import VisualSettings, VisualObjectInstanceEnumeration og EnumerateVisualObjectInstancesOptions:
```
import { VisualSettings } from "./settings";
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
```
og i klassen Visual skal du tilføje følgende egenskab:
```
private visualSettings: VisualSettings;
```
Denne egenskab gemmer en reference til objektet VisualSettings, der beskriver indstillingerne for visualen.

I klassen Visual skal du tilføje følgende metode før opdaterings metoden. Denne metode bruges til at udfylde formateringsindstillingerne.

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

Denne metode bruges til at udfylde formateringsindstillingerne.

Objekt for visualindstillinger

I opdaterings metoden skal du tilføje følgende kode efter angivelsen af variablen 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);
```
Denne kode henter formateringsindstillingerne. Den justerer alle værdier, der er overført til egenskaben circleThickness, og konverterer dem til 0, hvis de er negative, eller 10, hvis de har en værdi, der er større end 10.
I elementet i cirklen skal du ændre de værdier, der overføres til fyldtypografi og stregbredde-typografi som følger:
```
this.visualSettings.circle.circleColor
```
```
this.visualSettings.circle.circleThickness
```
Gem visual.ts filen.
Åbn det visuelle element i PowerShell.
```
pbiviz start
```
På værktøjslinjen i Power BI, der flyder over visualen, skal du vælge Slå automatisk genindlæsning til/fra.
I indstillingerne for formatering af visual skal du udvide Cirkel.

Rediger indstillingen for 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. Læg derefter mærke til, at visualen opdaterer værdien til en acceptabel minimum- eller maksimumværdi.

Pak den brugerdefinerede visual

Nu, hvor det visuelle element er færdigt og klar til at blive brugt, er det tid til at pakke det. et emballeret visuelt element kan importeres til Power BI rapporter eller den tjeneste, der skal bruges, og som andre har.

I dette afsnit får du mere at vide om, hvordan du

Indtast egenskabsværdier for det brugerdefinerede Visual-projekt i pbiviz.json filen.
Opdater icon.png filen ().
Til sidst skal du pakke det brugerdefinerede visuelle element.

Rediger visualiseringens egenskabsværdier

I PowerShell skal du skrive CTRL + C for at stoppe den brugerdefinerede visualisering.
åbn pbiviz.json filen i Visual Studio kode.
I objektet visual skal du ændre egenskaben displayName til Circle Card.

I ruden Visualiseringer kan du se det viste navn, når du peger på ikonet.
I forbindelse med egenskaben description skal du angive følgende tekst.

Viser en formateret målingsværdi i en cirkel

Udfyld supportUrl og gitHubUrl for visualiseringen.

Eksempel:

{
    "supportUrl": "https://community.powerbi.com",
    "gitHubUrl": "https://github.com/microsoft/PowerBI-visuals-circlecard"
}

Angiv dine oplysninger under objektet forfatter.
Gem pbiviz.json filen.

Opdater ikonet

pbiviz.json Læg mærke til, at dokumentet definerer en sti til et ikon i filens aktiveringsobjekt. Ikonet er det billede, der vises i ruden Visualiseringer. Det skal være en PNG-fil, 20 pixel gange 20 pixel.
i Windows Explorer skal du kopiere icon.png filen og derefter indsætte den for at erstatte den fil, der er placeret i mappen assets .
i Visual Studio kode skal du i ruden Explorer udvide mappen assets og derefter vælge den icon.png fil.
Gennemse ikonet.

Pak det visuelle element

i Visual Studio kode skal du kontrollere, at alle filer er gemt.
Hvis du vil pakke den brugerdefinerede Visual, skal du i PowerShell skrive følgende kommando.
```
pbiviz package
```

Denne kommando opretter en pbiviz -fil i dist/ mappen i det visuelle projekt og overskriver eventuel tidligere pbiviz -fil, der kan findes.

Mappen Dist

Pakken indeholder alt det, der kræves for at importere den brugerdefinerede visual til enten Power BI-tjenesten eller en rapport i Power BI Desktop. Du har nu pakket den brugerdefinerede visualisering, og det er klar til brug.

Importér den brugerdefinerede visual

Nu er du klar til at importere den brugerdefinerede cirkel kort visualisering, så du kan bruge det i dine rapporter. følg anvisningerne for import af en visual-fil fra din lokale computer til Power BI for at importere circleCard.pbiviz filen fra mappen dist til din Power BI rapport.