Oktatóanyag: Formázási beállítások hozzáadása a Körkártya vizualizációhoz

Vizualizáció létrehozásakor lehetőség van a tulajdonságai testreszabására. A testre szabható elemek némelyike a következők:

• Cím
• Background
• Szegély
• Árnyék
• Színek

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

• Formázási tulajdonságok hozzáadása a vizualizációhoz.
• A vizualizáció csomagolása
• Az egyéni vizualizáció importálása Power BI Desktop- vagy Szolgáltatásjelentésbe

Előfeltételek

Ez az oktatóanyag bemutatja, hogyan adhat hozzá gyakori formázási tulajdonságokat egy vizualizációhoz. Példaként a Kör kártya vizualizációt fogjuk használni. Hozzá fogjuk adni a kör színének és vastagságának módosítását. Ha nem rendelkezik az oktatóanyagban létrehozott Circle-kártya projektmappával, folytassa az oktatóanyagot.

Formázási beállítások hozzáadása

1. A PowerShellben keresse meg a körkártya projektmappáját, és indítsa el a körkártya-vizualizációt. A vizualizáció a számítógépen való üzemeltetés közben fut.

   pbiviz start
   

2. A Power BI-ban válassza a Formátum panelt.

   Általános formázási beállításokat kell látnia, vizuális formázási beállításokat azonban nem.

   

3. Nyissa meg a fájlt a Visual Studio Code-bancapabilities.json.

4. A dataViewMappings tömb előtt adjon hozzá objektumokat.

   "objects": {},
   

   

5. Mentse a capabilities.json fájlt.

6. A Power BI-ban tekintse át újra a formázási beállításokat.

   Megjegyzés:

   Ha nem jelenik meg a formázási beállítások módosítása, válassza az Egyéni vizualizáció betöltése lehetőséget.

   

7. Állítsa a Cím beállítást kikapcsolva értékre. Figyelje meg, hogy a vizualizáció már nem jeleníti meg a mérték nevét a bal felső sarokban.

   

   

Egyéni formázási beállítások hozzáadása

Most adjunk hozzá egy új, szín nevű csoportot a kör színének és vastagságának konfigurálásához.

1. A PowerShellben a Ctrl C billentyűkombinációval+ állítsa le az egyéni vizualizációt.

2. A Visual Studio Code fájljában capabilities.json szúrja be a következő JSON-töredéket az objektumcímkézett objektumokba.

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

   Ez a JSON-töredék egy kört nevező csoportot ír le, amely két változóból áll : circleColor és circleThickness.

3. Mentse a capabilities.json fájlt.

4. Az Explorer panelen lépjen az src mappára, majd válassza a settings.ts lehetőséget. Ez a fájl a kezdővizualizáció beállításait jelöli.

5. A fájlban settings.ts cserélje le az importálási sorokat és két osztályt a következő kódra.

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

   Ez a modul határozza meg a két osztályt. A Circle Gépház osztály két tulajdonságot határoz meg a capabilities.json fájlban (circleColor és circleThickness) definiált objektumoknak megfelelő névvel, és beállítja az alapértelmezett értékeket. A Vizualizáció Gépház osztály a fájlban leírt tulajdonságoknak megfelelően határozza meg a körobjektumotcapabilities.json.

6. Mentse a settings.ts fájlt.

7. Nyissa meg a visual.ts fájlt.

8. A fájlban importálja a visual.ts következőt:

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

   és a Visual osztályban adja hozzá a következő tulajdonságokat:

   private visualSettings: VisualSettings;
   private formattingSettingsService: FormattingSettingsService;
   
   

   Ez a tulajdonság a Vizualizáció Gépház objektumra mutató hivatkozást tárol a vizualizáció beállításainak leírásával.

9. A Visual osztályban szúrja be a következőt a konstruktor első soraként:

   this.formattingSettingsService = new FormattingSettingsService();
   

10. A Visual osztályban adja hozzá a következő metódust a frissítési módszer után.

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

    Ez a függvény minden formázási panelen megjelenik. Ezzel kiválaszthatja, hogy mely objektumokat és tulajdonságokat szeretné megjeleníteni a felhasználók számára a tulajdonságpanelen.

11. A frissítési módszerben a sugárváltozó deklarációja után adja hozzá a következő kódot.

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

    Ez a kód beolvassa a formátumbeállításokat. Módosítja a circleThickness tulajdonságba átadott értékeket, és nullától 10-ig terjedő számmá alakítja.

    

12. A körelemben módosítsa a kitöltési stílusnak és a körvonalszélességű stílusnak átadott értékeket az alábbiak szerint:

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

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

    

13. Mentse a visual.ts fájlt.

14. A PowerShellben indítsa el a vizualizációt.

    pbiviz start
    

15. A Power BI-ban a vizualizáció fölött lebegő eszköztáron válassza az Automatikus újratöltés váltása lehetőséget.

    

16. A vizualizáció formátumbeállításaiban bontsa ki a Kör elemet.

    

    Módosítsa a szín - és vastagságbeállítást .

Módosítsa a vastagság beállítását nullánál kisebb értékre és 10-nél nagyobb értékre. Ezután figyelje meg, hogy a vizualizáció minimális vagy maximális értékre frissíti az értéket.

Debugging

Az egyéni vizualizáció hibakeresésével kapcsolatos tippekért tekintse meg a hibakeresési útmutatót.

Az egyéni vizualizáció csomagolása

Most, hogy elkészült a vizualizáció, és készen áll a használatra, ideje csomagolni. A csomagolt vizualizációk importálhatók Power BI-jelentésekbe vagy szolgáltatásokba, amelyeket mások használhatnak és élvezhetnek.

Ha a vizualizáció készen áll, kövesse a Power BI-vizualizáció csomagolásának útmutatásait, majd ha szeretné, ossza meg másokkal, hogy importálhassák és élvezhessék azt.

Kapcsolódó tartalom

• Power BI-sávdiagram-vizualizáció létrehozása
• Útmutató a létrehozott Power BI-vizualizációk hibakereséséhez
• Power BI-vizualizációk projektstruktúrája