Självstudie: Lägga till formateringsalternativ i cirkelkortets visuella objekt

Artikel
10/14/2021
5 minuter för att läsa

När du skapar ett visuellt objekt kan du lägga till alternativ för att anpassa dess egenskaper. Några av de objekt som kan anpassas formaterade är:

Rubrik
Bakgrund
Kantlinje
Skugga
Färger

I den här guiden får du lära dig att:

Lägg till formateringsegenskaper i ditt visuella objekt.
Paketera det visuella objektet
Importera det anpassade visuella objektet till en Power BI Desktop eller tjänstrapport

Förutsättning

I den här självstudien förklaras hur du lägger till vanliga formateringsegenskaper i ett visuellt objekt. Vi använder cirkelkortets visuella objekt som exempel. Vi lägger till möjligheten att ändra färg och tjocklek på cirkeln. Om du inte har projektmappen för Circle-kortet som du skapade i självstudien ska du göra om självstudien innan du fortsätter.

Lägga till formateringsalternativ

I PowerShell navigerar du till projektmappen för cirkelkortet och startar det visuella cirkelkortet. Ditt visuella objekt körs nu samtidigt som det finns på datorn.
```
pbiviz start
```
Välj sidan Format i Power BI.

Du bör se ett meddelande som lyder så här: Formateringsalternativ är inte tillgängliga för det här visuella objektet.

Om du ser formateringsalternativ här men inte kan ändra dem går du vidare till Lägga till anpassade formateringsalternativ för att anpassa dem.
Öppna Visual Studio i capabilities.json kod.
Lägg till objekt (efter rad 8) före dataViewMappings.
```
"objects": {},
```
Spara filen capabilities.json.
Granska formateringsmöjligheterna igen i Power BI.

Anteckning

Om du inte ser formateringsalternativen så ändra Läs in anpassat visuellt objekt igen.
Ställ in alternativet Rubrik på Av. Observera att det visuella objektet inte längre visar måttets namn i det övre vänstra hörnet.

Lägga till anpassade formateringsalternativ

Nu ska vi lägga till en ny grupp med namnet color (färg) för att konfigurera cirkelns färg och bredd.

I PowerShell anger du Ctrl+C för att stoppa det anpassade visuella objektet.

I Visual Studio in följande capabilities.json JSON-fragment i objektet med etiketten objekt i filen .

    {
        "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 grupp som kallas cirkel, som består av två variabler – circleColor och circleThickness.

Kod för cirkeltjockled

Spara filen capabilities.json.
I Explorer-fönstret går du till mappen src och väljer sedan settings.ts. Den här filen representerar inställningarna för det visuella startobjektet.
Ersätt de settings.ts två klasserna i filen med följande kod.
```
export class CircleSettings {
    public circleColor: string = "white";
    public circleThickness: number = 2;
}
export class VisualSettings extends DataViewObjectsParser {
    public circle: CircleSettings = new CircleSettings();
}
```
Den här modulen definierar de båda klasserna. Klassen CircleSettings definierar två egenskaper med namn som matchar de objekt som definierats i filen ( capabilities.json circleColor och circleThickness) och anger även standardvärden. Klassen VisualSettings ärver klassen DataViewObjectParser och lägger till en egenskap med namnet circle, som matchar objektet som definierats i filen och returnerar en instans capabilities.json av CircleSettings.
Spara filen settings.ts.
Öppna filen visual.ts.
I filen visual.ts importerar du VisualSettings, VisualObjectInstanceEnumeration och EnumerateVisualObjectInstancesOptions:
```
import { VisualSettings } from "./settings";
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
```
och lägger till följande egenskap i klassen Visual:
```
private visualSettings: VisualSettings;
```
Denna egenskap sparar en referens till objektet VisualSettings, som beskriver de visuella inställningarna.

Lägg till följande metod framför metoden Update i klassen Visual. Den här metoden används för att fylla i formateringsalternativen.

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

Den här metoden används för att fylla i formateringsalternativen.

Visuellt inställningsobjekt

Lägg till följande kod efter deklaration av variabeln radius i metoden update.
```
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);
```
Den här koden hämtar formateringsalternativen. Den justerar alla värden som skickas till egenskapen circleThickness, konverterar den till 0 om talet är negativt eller 10 om det är ett värde som är större än 10.
I cirkelelementet ändrar du de värden som skickas till fyllningsformatet och linjebreddsformatet enligt följande:
```
this.visualSettings.circle.circleColor
```
```
this.visualSettings.circle.circleThickness
```
Spara filen visual.ts.
Starta det visuella objektet i PowerShell.
```
pbiviz start
```
Välj Växla automatisk återinläsning i verktygsfältet ovanför det visuella objektet i Power BI.
Expandera Cirkel i alternativen för visuellt format.

Ändra alternativen för färg och tjocklek.

Ändra alternativet tjocklek till ett värde mindre än noll och ett högre värde än 10. Observera sedan hur det visuella objektet uppdaterar värdet till ett tillåtet minimum eller maximum.

Paketera det anpassade visuella objektet

Nu när det visuella objektet är klart och klart att användas är det dags att paketera det. Ett paketerat visuellt objekt kan importeras till Power BI rapporter eller tjänster som ska användas och användas av andra.

I det här avsnittet får du lära dig hur du

Ange egenskapsvärden för det anpassade visuella projektet i pbiviz.json filen .
Uppdatera ikonfilen ( icon.png ).
Paketera slutligen det anpassade visuella objektet.

Redigera egenskapsvärdena för det visuella objektet

I PowerShell anger du Ctrl+C för att stoppa det anpassade visuella objektet.
Öppna filen pbiviz.json i Visual Studio Kod.
Ändra egenskapen displayName till Cirkelkort i objektet visual.

Om du hovrar över ikonen i fönstret Visualiseringar visas visningsnamnet.
Ange följande text för egenskapen beskrivning.

Visar ett formaterad måttvärde inuti en cirkel

Fyll i supportUrl och gitHubUrl för det visuella objektet.

Exempel:

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

Ange informationen i objektet author.
Spara filen pbiviz.json.

Uppdatera ikonen

Observera att dokumentet definierar en sökväg till en ikon i objektet assets pbiviz.json i filen. Ikonen är den bild som visas i fönstret Visualiseringar. Det måste vara en PNG-fil, 20 x 20 pixlar.
I Windows Explorer kopierar du icon.png filen och klistrar sedan in den för att ersätta standardfilen som finns i mappen assets.
I Visual Studio Code expanderar du mappen assets i Explorer-fönstret och väljer sedan icon.png fil.
Granska ikonen.

Paketera det visuella objektet

I Visual Studio Code ser du till att alla filer sparas.
Paketera det anpassade visuella objektet genom att ange följande kommando i PowerShell.
```
pbiviz package
```

Det här kommandot skapar en pbiviz-fil i katalogen dist/i ditt visuella projekt och skriver över alla tidigare pbiviz-filer som kan finnas.

Dist-mapp

Paketet innehåller allt som krävs för att importera det anpassade visuella objektet till Power BI-tjänsten eller en Power BI Desktop-rapport. Nu har du paketerat det anpassade visuella objektet och det är redo att användas.

Importera det anpassade visuella objektet

Nu är du redo att importera det anpassade visuella Circle Card-objektet så att du kan använda det i dina rapporter. Följ anvisningarna i importera en visuell fil från din lokala dator till Power-BI för att importera filen från circleCard.pbiviz mappen dist till din Power BI rapport.