Opplæring: Legge til formateringsalternativer i sirkelkortvisualobjektet

  • Artikkel

Når du oppretter et visualobjekt, kan du legge til alternativer for tilpassing av egenskapene. Noen av elementene som kan tilpasses formatert inkluderer:

  • Tittel
  • Bakgrunn
  • Border
  • Skygge
  • Farger

I denne opplæringen lærer du hvordan du kan gjøre følgende:

  • Legg til formateringsegenskaper i visualobjektet.
  • Pakke visualobjektet
  • Importere det egendefinerte visualobjektet til en Power BI Desktop- eller Tjenesterapport

Forutsetning

Denne opplæringen forklarer hvordan du legger til vanlige formateringsegenskaper i et visualobjekt. Vi bruker sirkelkortvisualobjektet som et eksempel. Vi legger til muligheten til å endre fargen og tykkelsen på sirkelen. Hvis du ikke har sirkelkortprosjektmappen som du opprettet i denne opplæringen, gjør du om opplæringen før du fortsetter.

Legge til formateringsalternativer

  1. Gå til sirkelkortprosjektmappen i PowerShell, og start sirkelkortvisualobjektet. Visualobjektet kjører nå mens det driftes på datamaskinen.

    pbiviz start

  2. Velg Format-panelet i Power BI.

    Du bør se generelle formateringsalternativer, men ikke noen alternativer for visuell formatering.

    Screenshot of formatting panel with only general formatting options.

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

  4. Før dataViewMappings-matrisen legger du til objekter.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. capabilities.json Lagre filen.

  6. Se gjennom formateringsalternativene på nytt i Power BI.

    Merk

    Hvis formateringsalternativene ikke endres, velger du Last inn egendefinert visualobjekt på nytt.

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

  7. Angi Tittel-alternativet til Av. Legg merke til at visualobjektet ikke lenger viser målnavnet øverst til venstre.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Legge til egendefinerte formateringsalternativer

La oss nå legge til ny gruppe kalt farge for å konfigurere sirkelfargen og tykkelsen på sirkelens disposisjon.

  1. Skriv inn CTRL+C i PowerShell for å stoppe det egendefinerte visualobjektet.

  2. Sett inn følgende JSON-fragment i objektetikettobjektene capabilities.jsoni Visual Studio Code i filen.

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

    Dette JSON-fragmentet beskriver en gruppe kalt sirkel, som består av to variabler – circleColor og circleThickness.

  3. capabilities.json Lagre filen.

  4. Gå til src-mappen i Explorer-ruten, og velg deretter settings.ts. Denne filen representerer innstillingene for startvisualobjektet.

  5. settings.ts I filen erstatter du importlinjene og to klasser med følgende kode.

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

    Denne modulen definerer de to klassene. Circle Innstillinger-klassen definerer to egenskaper med navn som samsvarer med objektene som er definert i capabilities.json-filen (circleColor og circleThickness), og angir standardverdier. Visualobjekt Innstillinger-klassen definerer sirkelobjektet i henhold til egenskapene som er beskrevet i capabilities.json filen.

  6. settings.ts Lagre filen.

  7. Åpne visual.ts-filen.

  8. Importer følgende visual.ts i filen:

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

    og legg til følgende egenskaper i Visualobjekt-klassen :

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Denne egenskapen lagrer en referanse til Visual Innstillinger-objektet, som beskriver de visuelle innstillingene.

  9. Sett inn følgende i visualobjektklassen som den første linjen i konstruktøren:

    this.formattingSettingsService = new FormattingSettingsService();

  10. Legg til følgende metode etter oppdateringsmetoden i Visualobjekt-klassen.

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

    Denne funksjonen blir kalt på hver formateringsrutegjengivelse. Den lar deg velge hvilke av objektene og egenskapene du vil vise for brukerne i egenskapsruten.

  11. Legg til følgende kode etter deklarasjonen av radiusvariabelen i oppdateringsmetoden.

    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 koden henter formatalternativene. Den justerer alle verdier som sendes til circleThickness-egenskapen , og konverterer den til et tall mellom null og 10.

    Screenshot of setting circle thickness to between zero and 10.

  12. Endre verdiene som sendes til fyllstilen og strøkbreddestilen, på følgende måte i sirkelelementet:

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

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

    Screenshot of circle elements.

  13. visual.ts Lagre filen.

  14. Start visualobjektet i PowerShell.

    pbiviz start

  15. Velg Aktiver/deaktiver automatisk innlasting i verktøylinjen som flyter over visualobjektet i Power BI.

    Screenshot of Toggle Auto Reload icon.

  16. Utvid Sirkel i alternativene for visualobjektformat.

    Screenshot of the final circle card visuals format pane elements.

    Endre farge- og tykkelsesalternativet.

Endre tykkelsesalternativet til en verdi som er mindre enn null, og en verdi høyere enn 10. Legg deretter merke til at visualobjektet oppdaterer verdien til et tålelig minimum eller maksimum.

Feilsøking

Hvis du vil ha tips om feilsøking av det egendefinerte visualobjektet, kan du se feilsøkingsveiledningen.

Pakk inn det egendefinerte visualobjektet

Nå som visualobjektet er fullført og klar til bruk, er det på tide å pakke det. Et pakket visualobjekt kan importeres til Power BI-rapporter eller -tjenester som skal brukes og nytes av andre.

Når visualobjektet er klart, følger du instruksjonene i Pakke et Power BI-visualobjekt , og deretter deler du det med andre slik at de kan importere og nyte det.

Relatert innhold