Zelfstudie: Opmaakopties toevoegen aan de visual Circle Card

Artikel
10/14/2021
6 minuten om te lezen

Wanneer u een visual maakt, kunt u opties toevoegen voor het aanpassen van de eigenschappen. Enkele van de items die kunnen worden aangepast, zijn:

Titel
Achtergrond
Rand
Schaduw
Kleuren

In deze zelfstudie leert u het volgende:

Voeg opmaakeigenschappen toe aan uw visual.
De visual verpakken
De aangepaste visual importeren in een Power BI Desktop of servicerapport

Vereiste

In deze zelfstudie wordt uitgelegd hoe u algemene opmaakeigenschappen toevoegt aan een visual. We gebruiken de visual Circle-kaart als voorbeeld. We voegen de mogelijkheid toe om de kleur en dikte van de cirkel te wijzigen. Als u niet de projectmap circle card hebt die u in deze zelfstudie hebt gemaakt, moet u de zelfstudie opnieuw volgen voordat u verdergaat.

Opmaakopties toevoegen

Navigeer in PowerShell naar de projectmap van uw cirkelkaart en start de visual van de cirkelkaart. Uw visual wordt nu uitgevoerd terwijl deze wordt gehost op uw computer.
```
pbiviz start
```
In Power BI selecteert u de pagina Opmaak.

Als het goed is ziet u het bericht Er zijn geen opmaakopties beschikbaar voor dit visuele element.

Als u hier opmaakopties ziet, maar deze niet kunt wijzigen, gaat u verder met Aangepaste opmaakopties toevoegen om ze aan te passen.
Open Visual Studio code het capabilities.json bestand.
Voor de matrix dataViewMappings voegt u objects toe (na regel 8).
```
"objects": {},
```
Sla het bestand capabilities.json op.
Controleer in Power BI de opmaakopties opnieuw.

Notitie

Als u de opmaakopties niet ziet, selecteert u Aangepaste visual opnieuw laden.
Stel de optie Titel in op Uit. U ziet dat de visual linksboven in de hoek niet langer de metingnaam weergeeft.

Aangepaste opmaakopties toevoegen

Nu gaan we een nieuwe groep met de naam color toevoegen voor het configureren van de kleur en breedte van de cirkel.

Voer in PowerShell Ctrl+C in om de aangepaste visual te stoppen.

Voeg Visual Studio code in het bestand het volgende capabilities.json JSON-fragment in het object met het label objecten in.

    {
        "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
                    }
                }
            }
        }
    }

Het JSON-fragment beschrijft een groep met de naam cirkel, die bestaat uit twee variabelen: circleColor en circleThickness.

De code voor Cirkeldikte

Sla het bestand capabilities.json op.
Ga in het deelvenster Explorer naar de map src en selecteer settings.ts. Dit bestand staat voor de instellingen van de beginvisual.
Vervang in settings.ts het bestand de twee klassen door de volgende code.
```
export class CircleSettings {
    public circleColor: string = "white";
    public circleThickness: number = 2;
}
export class VisualSettings extends DataViewObjectsParser {
    public circle: CircleSettings = new CircleSettings();
}
```
Deze module definieert de twee klassen. De klasse CircleSettings definieert twee eigenschappen met namen die overeenkomen met de objecten die zijn gedefinieerd in het bestand capabilities.json (circleColor en circleThickness) en stelt ook standaardwaarden in. De klasse VisualSettings neemt de klasse DataViewObjectParser over en voegt een eigenschap met de naam circle toe, die overeenkomt met het object dat is gedefinieerd in het bestand, en retourneert een exemplaar van capabilities.json CircleSettings.
Sla het bestand settings.ts op.
Open het bestand visual.ts.
Importeer visual.ts in het bestand VisualSettings, VisualObjectInstanceEnumeration en EnumerateVisualObjectInstancesOptions:
```
import { VisualSettings } from "./settings";
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
```
en in de klasse Visual voegt u de volgende eigenschap toe:
```
private visualSettings: VisualSettings;
```
Deze eigenschap bewaart een verwijzing naar het object VisualSettings en beschrijft de visuele instellingen.

In de klasse Visual voegt u de volgende methode voor de updatemethode toe. Deze methode wordt gebruik om de opmaakinstellingen in te vullen.

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

Deze methode wordt gebruik om de opmaakinstellingen in te vullen.

Object voor visuele instellingen

Voeg de volgende code toe in de updatemethode, na de variabele 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);
```
Deze code haalt de indelingsopties op. De code past waarden aan die in de eigenschap circleThickness zijn opgegeven en converteert die waarden naar 0 als deze negatief zijn, of naar 10 als de waarde groter is dan 10.
Wijzig in het cirkelelement de waarden die worden doorgegeven aan de opvulstijl en de stijl voor streekbreedte als volgt:
```
this.visualSettings.circle.circleColor
```
```
this.visualSettings.circle.circleThickness
```
Sla het bestand visual.ts op.
Start de visual in PowerShell.
```
pbiviz start
```
Selecteer in Power BI****Automatisch opnieuw laden in-/uitschakelen in de werkbalk die boven de visual zweeft.
In de opties voor visual format vouwt u Circle uit.

Bewerk de opties kleur en dikte.

Wijzig de waarde van thickness in een waarde minder dan 0 en een waarde hoger dan 10. U ziet dat de visual de waarde bijwerkt naar een toegestaan minimum of maximum.

De aangepaste visual verpakken

Nu de visual is voltooid en klaar is om te worden gebruikt, is het tijd om deze te verpakken. Een verpakte visual kan worden geïmporteerd in Power BI rapporten of service die door anderen kunnen worden gebruikt en gebruikt.

In deze sectie leert u hoe u

Voer eigenschapswaarden voor het aangepaste visualproject in het pbiviz.json bestand in.
Werk het pictogram ( icon.png ) bestand bij.
Als laatste verpakt u de aangepaste visual.

De eigenschapswaarden van de visual bewerken

Voer in PowerShell Ctrl+C in om de aangepaste visual te stoppen.
Open het pbiviz.json bestand in Visual Studio Code.
Wijzig in het object visual de eigenschap displayName in Circle Card.

Als u in het venster Visualisaties uw muiswijzer boven het pictogram houdt, verschijnt de weergavenaam.
Voer de volgende tekst in voor de eigenschap beschrijving.

Geeft een opgemaakte metingswaarde weer in een cirkel

Geef supportUrl en gitHubUrl op voor de visual.

Voorbeeld:

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

Voer in het object auteur uw gegevens in.
Sla het bestand pbiviz.json op.

Het pictogram bijwerken

In het object assets van het bestand ziet u dat het document een pad naar een pbiviz.json pictogram definieert. Het pictogram is de afbeelding die in het venster Visualisaties verschijnt. Dit moet een PNG-bestand zijn van 20 pixels bij 20 pixels.
Kopieer Windows Explorer het bestand en plak het om het standaardbestand in de icon.png map assets te vervangen.
Vouw in Visual Studio Code in het deelvenster Explorer de map assets uit en selecteer vervolgens het icon.png bestand.
Bekijk het pictogram.

De visual verpakken

Zorg Visual Studio code ervoor dat alle bestanden worden opgeslagen.
Als u de aangepaste visual wilt verpakken, voert u in PowerShell de volgende opdracht in.
```
pbiviz package
```

Met deze opdracht maakt u een pbiviz-bestand in de map dist/van uw visualproject en overschrijft u elk eerder pbiviz-bestand dat mogelijk bestaat.

Dist-map

Het pakket bevat alles dat nodig is om de aangepaste visual te importeren in de Power BI-service of een Power BI Desktop-rapport. U hebt nu de aangepaste visual verpakt en deze is klaar voor gebruik.

De aangepaste visual importeren

U bent nu klaar om de aangepaste circle card-visual te importeren, zodat u deze in uw rapporten kunt gebruiken. Volg de instructies in Een visueel bestand importeren van uw lokale computer in Power-BI om het bestand vanuit de map dist te importeren circleCard.pbiviz in Power BI rapport.