Zelfstudie: Opmaakopties toevoegen aan de visual Cirkelkaart

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

• Titel
• Achtergrond
• Border
• Schaduw
• Kleuren

In deze zelfstudie leert u het volgende:

• Opmaakeigenschappen toevoegen 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 cirkelkaart als voorbeeld. We voegen de mogelijkheid toe om de kleur en dikte van de cirkel te wijzigen. Als u de projectmap Circle Card niet hebt die u in die zelfstudie hebt gemaakt, moet u de zelfstudie opnieuw uitvoeren voordat u doorgaat.

Opmaakopties toevoegen

1. Navigeer in PowerShell naar de projectmap van de cirkelkaart en start de visual van de cirkelkaart. Uw visual wordt nu uitgevoerd terwijl deze wordt gehost op uw computer.

   pbiviz start
   

2. Selecteer in Power BI het deelvenster Opmaak.

   U ziet algemene opmaakopties, maar geen opties voor visuele opmaak.

   

3. Open het bestand in Visual Studio Code.capabilities.json

4. Voordat de dataViewMappings-matrix wordt weergegeven, voegt u objecten toe.

   "objects": {},
   

   

5. Sla het bestand capabilities.json op.

6. Controleer de opmaakopties opnieuw in Power BI.

   Notitie

   Als de opmaakopties niet worden gewijzigd, selecteert u Aangepaste visual opnieuw laden.

   

7. Stel de optie Titel in op Uit. U ziet dat de naam van de meting niet meer wordt weergegeven in de linkerbovenhoek.

   

   

Aangepaste opmaakopties toevoegen

We gaan nu een nieuwe groep met de naam kleur toevoegen voor het configureren van de cirkelkleur en -dikte van de omtrek van de cirkel.

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

2. Voeg in Visual Studio Code in het capabilities.json bestand het volgende JSON-fragment in het object met het labelobject in.

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

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

3. Sla het bestand capabilities.json op.

4. Ga in het deelvenster Explorer naar de src-map en selecteer vervolgens settings.ts. Dit bestand vertegenwoordigt de instellingen voor de startersvisual.

5. Vervang in het settings.ts bestand de importregels en twee klassen door de volgende code.

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

   Deze module definieert de twee klassen. De klasse Circle Instellingen definieert twee eigenschappen met namen die overeenkomen met de objecten die zijn gedefinieerd in het bestand capabilities.json (circleColor en circleThickness) en stelt standaardwaarden in. De klasse Visual Instellingen definieert het cirkelobject op basis van de eigenschappen die in het capabilities.json bestand worden beschreven.

6. Sla het bestand settings.ts op.

7. Open het bestand visual.ts.

8. Importeer het volgende in het visual.ts bestand:

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

   en voeg in de visualklasse de volgende eigenschappen toe:

   private visualSettings: VisualSettings;
   private formattingSettingsService: FormattingSettingsService;
   
   

   Met deze eigenschap wordt een verwijzing naar het object Visual Instellingen opgeslagen, waarin de visuele instellingen worden beschreven.

9. Voeg in de klasse Visual het volgende in als de eerste regel van de constructor:

   this.formattingSettingsService = new FormattingSettingsService();
   

10. Voeg in de visualklasse de volgende methode toe na de updatemethode .

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

    Deze functie wordt aangeroepen voor elke weergave van het opmaakvenster. Hiermee kunt u selecteren welke objecten en eigenschappen u beschikbaar wilt maken voor de gebruikers in het eigenschappenvenster.

11. Voeg in de updatemethode , na de declaratie van de radiusvariabele , de volgende code toe.

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

    Met deze code worden de indelingsopties opgehaald. Hiermee wordt elke waarde aangepast die is doorgegeven aan de eigenschap circleThickness en wordt deze geconverteerd naar een getal tussen nul en 10.

    

12. Wijzig in het cirkelelement de waarden die als volgt worden doorgegeven aan de stijl voor opvulling en lijnbreedte :

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

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

    

13. Sla het bestand visual.ts op.

14. Start de visual in PowerShell.

    pbiviz start
    

15. Selecteer in Power BI, in de werkbalk die boven de visual zweeft, de optie Automatisch opnieuw laden in-/uitschakelen.

    

16. Vouw Cirkel uit in de opties voor visuele opmaak.

    

    Wijzig de kleur - en dikteoptie .

Wijzig de dikteoptie in een waarde kleiner dan nul en een waarde hoger dan 10. U ziet vervolgens dat de waarde door de visual wordt bijgewerkt naar een acceptabel minimum of maximum.

Foutopsporing

Zie de handleiding voor foutopsporing voor tips over het opsporen van fouten in uw aangepaste visual.

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 om door anderen te worden gebruikt en genoten.

Wanneer uw visual klaar is, volgt u de aanwijzingen in Een Power BI-visual verpakken en deelt u deze desgewenst met anderen, zodat ze deze kunnen importeren en ervan kunnen genieten.

Gerelateerde inhoud

• Een Power BI-staafdiagramvisual maken
• Informatie over het opsporen van fouten in een Power BI-visual die u hebt gemaakt
• Projectstructuur van Power BI-visuals