Kurz: Přidání možností formátování k vizuálu Power BITutorial: Adding formatting options to a Power BI visual

V tomto kurzu si ukážeme, jak do vizuálu přidat nejčastější vlastnosti.In this tutorial, we go through how to add common properties to the visual.

V tomto kurzu se naučíte:In this tutorial, you learn how to:

  • Přidat vlastnosti vizuáluAdd visual properties.
  • Vytvořit balíček vizuáluPackage the visual.
  • Importovat vlastní vizuál do sestavy Power BI DesktopuImport the custom visual to a Power BI Desktop report.

Přidání možností formátováníAdding formatting options

  1. V Power BI vyberte stránku Formát.In Power BI, select the Format page.

    Měla by se zobrazit zpráva: Možnosti formátování nejsou pro tento vizuál dostupné.You should see a message that reads - Formatting options are unavailable for this visual.

    Malířský váleček pro formátování

  2. V editoru Visual Studio Code otevřete soubor capabilities.json.In Visual Studio Code, open the capabilities.json file.

  3. Před pole dataViewMappings přidejte pole objects (za řádek 8).Before the dataViewMappings array, add objects (after line 8).

    "objects": {},
    

    Přidání pole objects

  4. Uložte soubor capabilities.json.Save the capabilities.json file.

  5. V Power BI se znovu podívejte na možnosti formátování.In Power BI, review the formatting options again.

    Poznámka

    Pokud se možnosti formátování nezměnily, načtěte vlastní vizuál znovu.If you do not see the formatting options change then select Reload Custom Visual.

    Zobrazení možností formátování

  6. Nastavte možnost Název na Vypnuto.Set the Title option to Off. Všimněte si, že vizuál už v levém horním rohu nezobrazuje název míry.Notice that the visual no longer displays the measure name at the top-left corner.

    Možnost Název je vypnuta

    Dlaždice bez názvu

Přidání vlastních možností formátováníAdding custom formatting options

Můžete přidat vlastní vlastnosti, aby bylo možné nakonfigurovat barvu kruhu a také šířku ohraničení.You can add custom properties to enable configuring the color of the circle, and also the border width.

  1. V PowerShellu zastavte tento vlastní vizuál.In PowerShell, stop the custom visual.

  2. V editoru Visual Studio Code vložte do souboru capabilities.json do objektu označeného objects následující fragment kódu JSON.In Visual Studio Code, in the capabilities.json file, insert the following JSON fragment into the object labeled objects.

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

    Tento fragment JSON popisuje skupinu s názvem circle, kterou tvoří dvě možnosti s názvy circleColor a circleThickness.The JSON fragment describes a group named circle, which consists of two options named circleColor and circleThickness.

    Kód pro tloušťku kruhu

  3. Uložte soubor capabilities.json.Save the capabilities.json file.

  4. V podokně Explorer ve složce src vyberte soubor settings.ts.In the Explorer pane, from inside the src folder, and then select settings.ts. Tento soubor představuje nastavení pro úvodní vizuál.This file represents the settings for the starter visual.

  5. V souboru settings.ts nahraďte dvě třídy s následujícím kódem.In the settings.ts file, replace the two classes with the following code.

    export class CircleSettings {
        public circleColor: string = "white";
        public circleThickness: number = 2;
    }
    export class VisualSettings extends DataViewObjectsParser {
        public circle: CircleSettings = new CircleSettings();
    }
    

    Třídy modulu

    Tento modul definuje dvě třídy.This module defines the two classes. Třída CircleSettings definuje dvě vlastnosti s názvy odpovídajícími objektům definovaným v souboru capabilities.json (circleColor a circleThickness) a nastavuje také výchozí hodnoty.The CircleSettings class defines two properties with names that match the objects defined in the capabilities.json file (circleColor and circleThickness) and also sets default values. Třída VisualSettings dědí třídu DataViewObjectParser a přidává vlastnost s názvem circle, která odpovídá objektu definovanému v souboru capabilities.json, a vrací instanci CircleSettings.The VisualSettings class inherits the DataViewObjectParser class and adds a property named circle, which matches the object defined in the capabilities.json file, and returns an instance of CircleSettings.

  6. Uložte soubor settings.ts.Save the settings.ts file.

  7. Otevřete soubor visual.ts.Open the visual.ts file.

  8. V souboru visual.tsIn the visual.ts file,

    naimportujte VisualSettings, VisualObjectInstanceEnumeration a EnumerateVisualObjectInstancesOptions:import VisualSettings, VisualObjectInstanceEnumeration and EnumerateVisualObjectInstancesOptions:

    import { VisualSettings } from "./settings";
    import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
    import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
    

    a ve třídě Visual přidejte následující vlastnost:and in the Visual class add the following property:

    private visualSettings: VisualSettings;
    

    Tato vlastnost uchovává odkaz na objekt VisualSettings, který popisuje nastavení vizuálu.This property stores a reference to the VisualSettings object, describing the visual settings.

    Přidání třídy Visual

  9. Ve třídě Visual přidejte před metodu update následující metodu.In the Visual class, add the following method before the update method. Tato metoda se používá k naplnění možností formátování.This method is used to populate the formatting options.

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

    Tato metoda se používá k naplnění možností formátování.This method is used to populate the formatting options.

    Objekt VisualSettings

  10. V metodě update přidejte za deklaraci proměnné radius následující kód.In the update method, after the declaration of the radius variable, add the following code.

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

    Tento kód slouží k načtení možností formátování.This code retrieves the format options. Upraví libovolnou hodnotu předanou do vlastnosti circleThickness tak, že pokud je daná hodnota záporná, převede ji na 0, a pokud je daná hodnota větší než 10, převede ji na 10.It adjusts any value passed into the circleThickness property, converting it to 0 if negative, or 10 if it's a value greater than 10.

    Proměnná Radius

  11. V elementu circle upravte hodnotu předanou jako style: fill na následující výraz.For the circle element, modify the value passed to the fill style to the following expression.

    this.visualSettings.circle.circleColor
    

    Výplň kruhu

  12. V elementu circle upravte hodnotu předanou jako style: stroke-width na následující výraz.For the circle element, modify the value passed to the stroke-width style to the following expression.

    this.visualSettings.circle.circleThickness
    

    Šířka tahu kruhu

  13. Uložte soubor visual.ts.Save the visual.ts file.

  14. V PowerShellu spusťte tento vizuál.In PowerShell, start the visual.

    pbiviz start
    
  15. V Power BI na panelu nástrojů nad vizuálem vyberte Přepnout automatické obnovování.In Power BI, in the toolbar floating above the visual, select Toggle Auto Reload.

  16. V možnostech formátování vizuálu rozbalte možnost Kruh.In the visual format options, expand Circle.

    Formát kruhu

    Upravte možnosti Barva a Tloušťka.Modify the color and thickness option.

    Upravte možnost Tloušťka na hodnotu menší než nula a pak na hodnotu větší než 10.Modify the thickness option to a value less than zero, and a value higher than 10. Sledujte, jak vizuál aktualizuje tuto hodnotu na přípustné minimum nebo maximum.Then notice the visual updates the value to a tolerable minimum or maximum.

Vytvoření balíčku vlastního vizuáluPackaging the custom visual

Zadejte hodnoty vlastností pro projekt vlastního vizuálu, aktualizujte soubor ikony a pak vytvořte balíček vlastního vizuálu.Enter property values for the custom visual project, update the icon file, and then package the custom visual.

  1. V PowerShellu zastavte tento vlastní vizuál.In PowerShell, stop the custom visual.

  2. Otevřete soubor pbiviz.json v editoru Visual Studio Code.Open the pbiviz.json file in Visual Studio Code.

  3. V objektu Visual změňte hodnotu vlastnosti displayName na Kruhová karta.In the visual object, modify the displayName property to Circle Card.

    Tento zobrazovaný název se objeví, když myší najedete na příslušnou ikonu v podokně Vizualizace.In the Visualizations pane, hovering over the icon reveals the display name.

    Zobrazovaný název vizuálu

  4. Pro vlastnost description zadejte následující text.For the description property, enter the following text.

    Zobrazí formátovanou hodnotu míry v kruhu.Displays a formatted measure value inside a circle

  5. Vyplňte supportUrl a gitHubUrl vizuálu.Fill supportUrl and gitHubUrl for the visual.

    Příklad:Example:

    {
        "supportUrl": "https://community.powerbi.com",
        "gitHubUrl": "https://github.com/microsoft/PowerBI-visuals-circlecard"
    }
    
  6. Do objektu author zadejte podrobnosti o sobě.Enter your details in the author object.

  7. Uložte soubor pbiviz.json.Save the pbiviz.json file.

  8. V objektu assets si všimněte, že dokument definuje cestu k ikoně.In the assets object, notice that the document defines a path to an icon. Ikona je obrázek, který se zobrazuje v podokně Vizualizace .The icon is the image that appears in the Visualizations pane. Musí to být soubor PNG o velikosti 20 x 20 pixelů.It must be a PNG file, 20 pixels by 20 pixels.

  9. V Průzkumníkovi Windows zkopírujte soubor icon.png a nahraďte jím výchozí soubor, který se nachází ve složce assets.In Windows Explorer, copy the icon.png file, and then paste it to replace the default file located at assets folder.

  10. V editoru Visual Studio Code v podokně Explorer rozbalte složku assets a vyberte soubor icon.png.In Visual Studio Code, in the Explorer pane, expand the assets folder, and then select the icon.png file.

  11. Zkontrolujte ikonu.Review the icon.

    Obrázek v podokně Vizualizace

  12. V editoru Visual Studio Code se ujistěte, že jsou všechny soubory uložené.In Visual Studio Code, ensure that all files are saved.

  13. Pokud chcete vytvořit balíček vlastního vizuálu, zadejte v PowerShellu následující příkaz.To package the custom visual, in PowerShell, enter the following command.

    pbiviz package
    

    Složka dist

Výstupní balíček se teď nachází ve složce dist daného projektu.Now the package is output to the dist folder of the project. Balíček obsahuje vše, co je potřeba k importu vlastního vizuálu do služby Power BI nebo sestavy Power BI Desktopu.The package contains everything required to import the custom visual into either the Power BI service or a Power BI Desktop report. Vytvořili jste balíček vlastního vizuálu, který je připravený k použití.You have now packaged the custom visual, and it is now ready for use.

Import vlastního vizuáluImporting the custom visual

Teď můžete otevřít sestavu Power BI Desktopu a importovat do ní vlastní vizuál Kruhová karta.Now you can open the Power BI Desktop report, and import the Circle Card custom visual.

  1. Otevřete Power BI Desktop a vytvořte novou sestavu s nějakou ukázkovou datovou sadou.Open Power BI Desktop, create a new report with any sample dataset

  2. V podokně Vizualizace vyberte ikonu tří teček a pak Importovat ze souboru.In the Visualizations pane, select the ellipsis, and then select Import from File.

    Přidání vlastního vizuálu do Desktopu

  3. V okně importu vyberte Importovat.In the import window, select Import.

  4. V okně Otevřít přejděte v adresáři projektu do složky dist.In the Open window, navigate to the dist folder in your project directory.

  5. Vyberte soubor circleCard.pbiviz a pak vyberte Otevřít.Select the circleCard.pbiviz file, and then select Open.

  6. Jakmile se vizuál úspěšně naimportuje, vyberte OK.When the visual has successfully imported, select OK.

  7. Ověřte, že se daný vizuál přidal do podokna Vizualizace .Verify that the visual has been added to the Visualizations pane.

    Zobrazení v podokně Vizualizace PBI Desktopu

  8. Najeďte myší na ikonu Kruhová karta a všimněte si popisu, který se objeví.Hover over the Circle Card icon, and notice the tooltip that appears.

LaděníDebugging

Tipy k ladění vlastního vizuálu najdete v průvodci ladění.For tips about debugging your custom visual, see the debugging guide.

Další krokyNext steps

Svůj nově vyvinutý vizuál můžete nabídnout ostatním, když ho odešlete do AppSource.You can list your newly developed visual for others to use by submitting it to the AppSource. Další informace a postup najdete v článku o publikování vizuálů Power BI do AppSource.For more information on this process reference Publish Power BI visuals to AppSource.