Dela via

Självstudie: Lägga till formateringsalternativ i det visuella cirkelkortet

  • Artikel

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 vara anpassade formaterade är:

  • Title
  • Bakgrund
  • Border
  • Skugga
  • Färger

I den här självstudien lär du dig att:

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

Förutsättningar

I den här självstudien beskrivs hur du lägger till vanliga formateringsegenskaper i ett visuellt objekt. Vi använder det visuella objektet Cirkelkort som exempel. Vi lägger till möjligheten att ändra cirkelns färg och tjocklek. Om du inte har projektmappen Circle-kort som du skapade i den självstudien gör du om självstudien innan du fortsätter.

Lägga till formateringsalternativ

  1. I PowerShell navigerar du till projektmappen för cirkelkortet och startar det visuella cirkelkortet. Det visuella objektet körs nu när det finns på datorn.

    pbiviz start

  2. I Power BI väljer du panelen Format.

    Du bör se allmänna formateringsalternativ, men inte några alternativ för visuell formatering.

    Screenshot of formatting panel with only general formatting options.

  3. Öppna filen i capabilities.json Visual Studio Code.

  4. Lägg till objekt innan matrisen dataViewMappings.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. Spara filen capabilities.json.

  6. Granska formateringsalternativen igen i Power BI.

    Kommentar

    Om formateringsalternativen inte ändras väljer du Läs in anpassat visuellt objekt igen.

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

  7. Ställ in alternativet Rubrik på Av. Observera att det visuella objektet inte längre visar måttnamnet i det övre vänstra hörnet.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Lägga till anpassade formateringsalternativ

Nu ska vi lägga till en ny grupp med namnet color för att konfigurera cirkelfärgen och tjockleken på cirkelns kontur.

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

  2. I Visual Studio Code i capabilities.json filen infogar du följande JSON-fragment i objektetiketterade objekt.

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

    Det här JSON-fragmentet beskriver en grupp som kallas cirkel, som består av två variabler – circleColor och circleThickness.

  3. Spara filen capabilities.json.

  4. I fönstret Utforskaren går du till mappen src och väljer sedan settings.ts. Den här filen representerar inställningarna för det visuella startobjektet.

  5. settings.ts I filen ersätter du importraderna och två klasser med följande kod.

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

    Den här modulen definierar de två klasserna. Klassen Circle Inställningar definierar två egenskaper med namn som matchar de objekt som definierats i filen capabilities.json (circleColor och circleThickness) och anger standardvärden. Klassen Visual Inställningar definierar cirkelobjektet enligt egenskaperna som beskrivs i capabilities.json filen.

  6. Spara filen settings.ts.

  7. Öppna visual.ts-filen.

  8. visual.ts I filen importerar du :

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

    och i klassen Visual lägger du till följande egenskaper:

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Den här egenskapen lagrar en referens till objektet Visual Inställningar som beskriver de visuella inställningarna.

  9. I klassen Visuellt objekt infogar du följande som den första raden i konstruktorn:

    this.formattingSettingsService = new FormattingSettingsService();

  10. I klassen Visuellt objekt lägger du till följande metod efter uppdateringsmetoden .

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

    Den här funktionen anropas för varje formateringsfönsteråtergivning. Med den kan du välja vilka av de objekt och egenskaper som du vill exponera för användarna i egenskapsfönstret.

  11. Lägg till följande kod efter deklarationen av radius-variabeln i uppdateringsmetoden.

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

    Den här koden hämtar formatalternativen. Den justerar alla värden som skickas till egenskapen circleThickness och konverterar det till ett tal mellan noll och 10.

    Screenshot of setting circle thickness to between zero and 10.

  12. I cirkelelementet ändrar du de värden som skickas till fyllningsformatet och linjebreddsformatet på följande sätt:

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

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

    Screenshot of circle elements.

  13. Spara filen visual.ts.

  14. Starta det visuella objektet i PowerShell.

    pbiviz start

  15. I Power BI går du till verktygsfältet som svävar ovanför det visuella objektet och väljer Växla automatisk inläsning.

    Screenshot of Toggle Auto Reload icon.

  16. I alternativen för visuellt format expanderar du Cirkel.

    Screenshot of the final circle card visuals format pane elements.

    Ändra färg- och tjockleksalternativet.

Ändra tjockleksalternativet till ett värde som är mindre än noll och ett värde som är högre än 10. Observera sedan att det visuella objektet uppdaterar värdet till ett acceptabelt minimum eller maximum.

Felsökning

Tips om hur du felsöker ditt anpassade visuella objekt finns i felsökningsguiden.

Paketera det anpassade visuella objektet

Nu när det visuella objektet har slutförts och är redo att användas är det dags att paketera det. Ett paketerat visuellt objekt kan importeras till Power BI-rapporter eller -tjänsten för att användas och användas av andra.

När det visuella objektet är klart följer du anvisningarna i Paketera ett visuellt Power BI-objekt och sedan, om du vill, dela det med andra så att de kan importera och njuta av det.

Relaterat innehåll