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

  • Článok

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:

  • Zaradenie
  • Pozadie
  • Orámovanie
  • 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

Predpoklady

Tento kurz vysvetľuje, ako do vizuálu pridať bežné vlastnosti formátovania. Ako príklad použijeme vizuál karty Circle. Pridáme možnosť zmeniť farbu a hrúbku kruhu. Ak nemáte priečinok projektu Kruhová karta , ktorý ste vytvorili v tomto kurze, zopakujte si kurz skôr, ako budete pokračovať.

Pridanie možností formátovania

  1. V prostredí PowerShell prejdite 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

  2. V službe Power BI vyberte panel Formát.

    Mali by sa zobraziť všeobecné možnosti formátovania, nie však žiadne možnosti formátovania vizuálu.

    Screenshot of formatting panel with only general formatting options.

  3. V programe Visual Studio Code otvorte capabilities.json súbor.

  4. Pred pole dataViewMappings pridajte objekty.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. capabilities.json Uložte súbor.

  6. V službe Power BI znova skontrolujte možnosti formátovania.

    Poznámka

    Ak sa nezobrazujú zmeny možností formátovania, vyberte položku Znova načítať vlastný vizuál.

    Screenshot of general and visual formatting options on the formatting pane.

  7. Nastavte možnosť Názov do polohy Vypnuté. Všimnite si, že vizuál už nezobrazuje názov mierky v ľavom hornom rohu.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Pridanie vlastných možností formátovania

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

  1. Ak chcete vlastný vizuál zastaviť, v prostredí PowerShell zadajte kláves Ctrl+C.

  2. V programe Visual Studio Code vložte do objektu s názvom capabilities.jsonobjects nasledujúci fragment JSON.

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

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

  3. capabilities.json Uložte súbor.

  4. Na table Prieskumník prejdite do priečinka src a potom vyberte položku settings.ts. Tento súbor predstavuje nastavenia pre úvodný vizuál.

  5. 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 Circle Nastavenia definuje dve vlastnosti s názvami, ktoré zodpovedajú objektom definovaným v súbore capabilities.json (circleColor a circleThickness), a nastaví predvolené hodnoty. Trieda Visual Nastavenia definuje kruhovom objekte podľa vlastností popísaných v súborecapabilities.json.

  6. settings.ts Uložte súbor.

  7. visual.ts Otvorte súbor.

  8. Importujte v súbore visual.ts :

    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 na objekt vizuálu Nastavenia ktorý popisuje nastavenia vizuálu.

  9. Do triedy Visual vložte nasledujúci text ako prvý riadok konštruktora:

    this.formattingSettingsService = new FormattingSettingsService();

  10. V triede 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í.

  11. V metóde update po deklarácii premennej radius pridajte nasledujúci 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číta možnosti formátovania. Upraví akúkoľvek hodnotu odovzdanú vlastnosti circleThickness a konvertuje ju na číslo od nuly do 10.

    Screenshot of setting circle thickness to between zero and 10.

  12. V kruhovom prvku upravte hodnoty odovzdané štýlu výplne a štýlu šírky ťahu takto:

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

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

    Screenshot of circle elements.

  13. visual.ts Uložte súbor.

  14. Spustite vizuál v prostredí PowerShell.

    pbiviz start

  15. V službe Power BI vyberte na paneli s nástrojmi plávajúcom nad vizuálom položkuPrepnúť automatické opätovné načítanie.

    Screenshot of Toggle Auto Reload icon.

  16. V možnostiach formátu vizuálu rozbaľte možnosť Kruh.

    Screenshot of the final circle card visuals format pane elements.

    Upravte možnosti farby 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 sprievodcovi 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 téme Zbaliť vizuál služby Power BI a potom ho, ak chcete, zdieľajte ho s ostatnými, aby ho mohli importovať a vychutnať si ho.

Súvisiaci obsah