Kurz: Přidání možností formátování do vizuálu Kruhová karta

Při vytváření vizuálu můžete přidat možnosti pro přizpůsobení jeho vlastností. Mezi položky, které je možné přizpůsobit, patří:

• Nadpis
• Pozadí
• Border
• Stín
• Barvy

V tomto kurzu se naučíte:

• Přidejte do vizuálu vlastnosti formátování.
• Zabalení vizuálu
• Import vlastního vizuálu do sestavy Power BI Desktopu nebo služby

Požadavek

Tento kurz vysvětluje, jak do vizuálu přidat běžné vlastnosti formátování. Jako příklad použijeme vizuál Karty s kruhem. Přidáme možnost změnit barvu a tloušťku kruhu. Pokud nemáte složku projektu Karta Circle , kterou jste vytvořili v tomto kurzu, před pokračováním kurz znovu proveďte.

Přidání možností formátování

1. V PowerShellu přejděte do složky projektu karty s kruhem a spusťte vizuál karty s kruhem. Vizuál je teď spuštěný při hostování na vašem počítači.

   pbiviz start
   

2. V Power BI vyberte panel Formát.

   Měly by se zobrazit obecné možnosti formátování, ale ne žádné možnosti formátování vizuálu.

   

3. V editoru capabilities.json Visual Studio Code otevřete soubor.

4. Před pole dataViewMappings přidejte objekty.

   "objects": {},
   

   

5. Uložte soubor capabilities.json.

6. V Power BI znovu zkontrolujte možnosti formátování.

   Poznámka:

   Pokud se možnosti formátování nezmění, vyberte Znovu načíst vlastní vizuál.

   

7. Nastavte možnost Název na Vypnuto. Všimněte si, že vizuál už nezobrazuje název míry v levém horním rohu.

   

   

Přidání možností vlastního formátování

Teď přidáme novou skupinu s názvem barva pro konfiguraci barvy kruhu a tloušťky obrysu kruhu.

1. V PowerShellu zadejte Ctrl+C a zastavte vlastní vizuál.

2. V editoru capabilities.json Visual Studio Code vložte do objektu označeného objektem následující fragment JSON.

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

   Tento fragment JSON popisuje skupinu s názvem kruh, která se skládá ze dvou proměnných – circleColor a circleThickness.

3. Uložte soubor capabilities.json.

4. V podokně Průzkumník přejděte do složky src a vyberte settings.ts. Tento soubor představuje nastavení počátečního vizuálu.

5. settings.ts V souboru nahraďte řádky importu a dvě třídy následujícím kódem.

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

   Tento modul definuje dvě třídy. Třída Circle Nastavení definuje dvě vlastnosti s názvy, které odpovídají objektům definovaným v souboru capabilities.json (circleColor a circleThickness) a nastaví výchozí hodnoty. Třída Visual Nastavení definuje objekt kruhu podle vlastností popsaných capabilities.json v souboru.

6. Uložte soubor settings.ts.

7. Otevřete soubor visual.ts.

8. visual.ts V souboru naimportujte:

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

   a ve třídě Visual přidejte následující vlastnosti:

   private visualSettings: VisualSettings;
   private formattingSettingsService: FormattingSettingsService;
   
   

   Tato vlastnost ukládá odkaz na objekt Visual Nastavení popisující nastavení vizuálu.

9. Do třídy Visual vložte následující řádek jako první řádek konstruktoru:

   this.formattingSettingsService = new FormattingSettingsService();
   

10. Do třídy Visual přidejte následující metodu za metodu aktualizace.

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

    Tato funkce se volá při každém vykreslení podokna formátování. Umožňuje vybrat objekty a vlastnosti, které chcete zpřístupnit uživatelům v podokně vlastností.

11. Do metody update za deklaraci proměnné radius přidejte následující kód.

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

    Tento kód načte možnosti formátu. Upraví libovolnou hodnotu předanou do vlastnosti circleThickness a převede ji na číslo mezi nulou a 10.

    

12. V elementu kruhu upravte hodnoty předané stylu výplně a stylu šířky tahu následujícím způsobem:

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

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

    

13. Uložte soubor visual.ts.

14. V PowerShellu spusťte vizuál.

    pbiviz start
    

15. V Power BI na panelu nástrojů nad vizuálem vyberte Přepnout automatické opětovné načítání.

    

16. V možnostech formátu vizuálu rozbalte kruh.

    

    Upravte možnost barvy a tloušťky.

Upravte možnost tloušťky na hodnotu menší než nula a hodnotu vyšší než 10. Pak si všimněte, že vizuál aktualizuje hodnotu na přípustné minimum nebo maximum.

Ladění

Tipy k ladění vlastního vizuálu najdete v průvodci laděním.

Zabalení vlastního vizuálu

Teď, když je vizuál dokončený a připravený k použití, je čas ho zabalit. Zabalený vizuál je možné importovat do sestav nebo služby Power BI, které budou používat a využívat ostatní.

Až bude vizuál připravený, postupujte podle pokynů v balíčku vizuálu Power BI a pak ho (pokud chcete), nasdílejte ho s ostatními, aby ho mohli importovat a užívat si ho.

Související obsah

• Vytvoření vizuálu pruhového grafu Power BI
• Zjistěte, jak ladit vizuál Power BI, který jste vytvořili.
• Struktura projektu vizuálů Power BI