Kurz: Pridanie možností formátovania do vizuálu Kruhová karta

Pri vytváraní vizuálu môžete pridať možnosti prispôsobenia jeho vlastností. Medzi položky, ktoré možno prispôsobiť vo formáte, patria tieto:

Titul
Pozadie
Hranica
Tieň
Farby

V tomto kurze sa naučíte:

Pridanie vlastností formátovania do vizuálu.
Vytvorenie balíka vizuálu
Importovanie vlastného vizuálu do zostavy aplikácie Power BI Desktop alebo služby

Predpokladom

Tento kurz vysvetľuje, ako do vizuálu pridať bežné vlastnosti formátovania. Ako príklad použijeme kartu Circle vizuálu. Pridáme možnosť zmeniť farbu a hrúbku kruhu. Ak kartu Circle nemáte priečinku projektu, ktorý ste vytvorili v tomto kurze, pred pokračovaním zopakujte kurz.

Pridanie možností formátovania

V prostredia PowerShellprejdite do svojho priečinka projektu kruhovej karty a spustite vizuál kruhovej karty. Vizuál je teraz spustený a hosťovaný vo vašom počítači.
```
pbiviz start
```
V Power BI vyberte panel Format (Formát).

Mali by sa zobraziť všeobecné možnosti formátovania, nie však žiadne možnosti formátovania vizuálu.
V visual Studio Codeotvorte súbor capabilities.json.
Pred pole dataViewMappings pridajte objekty.
```
"objects": {},
```
Uložte súbor capabilities.json.
V Power BI znova skontrolujte možnosti formátovania.

Nota

Ak sa nezobrazujú zmeny možností formátovania, vyberte položky Znova načítať vlastný vizuál.
Nastavte možnosť Title na Vypnuté. Všimnite si, že vizuál už nezobrazuje názov mierky v ľavom hornom rohu.

Pridanie vlastných možností formátovania

Teraz pridajme novú skupinu s názvom color na konfiguráciu farby kruhu a hrúbky obrysu kruhu.

Na PowerShell zadajte Stlačením klávesov Ctrl+C vlastný vizuál zastavíte.

V Visual Studio Codev súbore capabilities.json vložte nasledujúci fragment JSON do objektu s označením objektmi.

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

Tento fragment JSON popisuje skupinu s názvom kruhový, ktorá sa skladá z dvoch premenných – circleColor a circleThickness.

Uložte súbor capabilities.json.
Na table Explorer (Prieskumník)prejdite do priečinka src a potom vyberte položku settings.ts. Tento súbor predstavuje nastavenia pre štartovací vizuál.

V súbore settings.ts nahraďte riadky importu a dve triedy nasledujúcim kódom.

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 dve triedy. Trieda CircleSettings definuje dve vlastnosti s názvami, ktoré zodpovedajú objektom definovaným v súbore capabilities.json (circleColor a circleThickness), a nastaví predvolené hodnoty. Trieda VisualSettings definuje objekt kruhu podľa vlastností popísaných v súbore capabilities.json.

Uložte súbor settings.ts.
Otvorte súbor visual.ts.

V súbore visual.ts importujte :

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

a v triede Visual pridajte nasledujúce vlastnosti:

private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

Táto vlastnosť ukladá odkaz do VisualSettings objektu, ktorý popisuje nastavenia vizuálu.

Do triedy Visual vložte ako prvý riadokkonštruktora toto:

this.formattingSettingsService = new FormattingSettingsService();

Do triedy Visual pridajte za metódu update nasledujúcu metódu.
```
public getFormattingModel(): powerbi.visuals.FormattingModel {
    return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
}
```
Táto funkcia sa zavolá na každé vykreslenie tably formátovania. Umožňuje vybrať, ktorý z objektov a vlastností chcete sprístupniť používateľom na table vlastností.

V metóde aktualizovať pridajte po deklarácii premennej radius nasledujúci kód.

this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews[0]);
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číta možnosti formátovania. Upraví akúkoľvek hodnotu odovzdanú do vlastnosti circleThickness a konvertuje ju na číslo od nuly do 10.

Snímka obrazovky znázorňujúca nastavenie hrúbky kruhu na nulu až 10.

V kruhovom prvkuupravte hodnoty odovzdané štýlu výplne a štýl šírky ťahu nasledovne:

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

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

snímka obrazovky kruhových prvkov.

Uložte súbor visual.ts.
V prostredia PowerShellspustite vizuál.
```
pbiviz start
```
V Power BI vyberte na paneli s nástrojmi plávajúcom nad vizuálom položku Prepnúť automatické opätovné načítanie.
V možnostiach formátu vizuálu rozbaľte položku circle.

Upravte možnosti farieb a hrúbky .

Upravte možnosť hrúbky na hodnotu menšiu ako nula a vyššiu ako 10. Potom si všimnite, že vizuál aktualizuje hodnotu na znesiteľné minimum alebo maximum.

Ladenie

Tipy na ladenie vlastného vizuálu nájdete v príručke ladenia.

Zbalenie vlastného vizuálu

Teraz, keď je vizuál dokončený a pripravený na použitie, nastal čas, aby ste ho zabalili. Zabalený vizuál je možné importovať do zostáv alebo služby Power BI, aby ho mohli používať a mať radi ostatní.

Keď je váš vizuál pripravený, postupujte podľa pokynov v zbalíte vizuálu služby Power BI a potom ho, ak chcete, zdieľajte ho s ostatnými, aby si ho mohli importovať a vychutnať si ho.

Pripomienky

Bola táto stránka užitočná?

Last updated on 2025-12-15