Megosztás a következőn keresztül:

Oktatóanyag: Kör alakú Power BI-kártyavizualizáció fejlesztése

  • Cikk

Ebben az oktatóanyagban egy Kör kártya nevű Power BI-vizualizációt fejleszt, amely egy körön belül formázott mértékértéket jelenít meg. A körkártya vizualizációja támogatja a kitöltési szín és a körvonal vastagságának testreszabását.

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

  • Hozzon létre egy fejlesztési projektet a vizualizációhoz.
  • A vizualizáció fejlesztése D3-vizualizációs elemekkel.
  • Konfigurálja a vizualizációt az adatok feldolgozására.
  • Konfigurálja a vizualizációt a méretváltozásokhoz való alkalmazkodáshoz.
  • Konfigurálja a vizualizáció adaptív szín- és szegélybeállításait.

Feljegyzés

A vizualizáció teljes forráskódját a körkártyás Power BI-vizualizációban találhatja meg.

Előfeltételek

A Power BI-vizualizáció fejlesztése előtt ellenőrizze, hogy minden szerepel-e a szakaszban.

Fejlesztési projekt létrehozása

Ebben a szakaszban egy projektet hoz létre a körkártya-vizualizációhoz.

Feljegyzés

Ebben az oktatóanyagban a Visual Studio Code (VS Code) használható a Power BI-vizualizáció fejlesztéséhez.

  1. Nyisson meg egy új terminált a VS Code-ban, és keresse meg azt a mappát, amelyben létre szeretné hozni a projektet.

  2. Adja meg a következő parancsot a PowerShell-terminálban:

    pbiviz new CircleCard

  3. Nyissa meg a CircleCard mappát a VS Code Explorerben. (Fájl>megnyitása mappa).

    Képernyőkép a KÖRkártya mappába megnyitott VS-kód ablakról.

    Az egyes fájlok funkciójának részletes magyarázatát a Power BI-vizualizációs projektstruktúrában találja.

  4. Ellenőrizze a terminálablakot, és győződjön meg arról, hogy a CircleCard könyvtárban van. Telepítse a Power BI-vizualizációs eszközök függőségeit.

    npm install

    Tipp.

    A vizualizációban telepített függőségek megtekintéséhez ellenőrizze a package.json fájlt.

  5. Indítsa el a körkártya vizualizációját.

    pbiviz start

    A vizualizáció a számítógépen való üzemeltetés közben fut.

    Fontos

    Az oktatóanyag végéig ne zárja be a PowerShell-ablakot . A vizualizáció futtatásának leállításához írja be a Ctrl C billentyűkombinációt+, és ha a rendszer kéri a kötegelt feladat leállítását, írja be az Y, majd az Enter parancsot.

Vizualizáció megtekintése a Power BI szolgáltatás

A vizualizáció Power BI szolgáltatás való teszteléséhez az EGYESÜLT Államok értékesítési elemzési jelentését fogjuk használni. Letöltheti ezt a jelentést, és feltöltheti Power BI szolgáltatás.

A vizualizáció teszteléséhez saját jelentést is használhat.

Feljegyzés

A folytatás előtt ellenőrizze, hogy engedélyezte-e a vizualizációk fejlesztői beállításait.

  1. Jelentkezzen be a PowerBI.com, és nyissa meg az USA értékesítési elemzésijelentését.

  2. Válassza a Szerkesztés lehetőséget.

    Képernyőkép a Power B I szolgáltatás szerkesztési lehetőségéről.

  3. Hozzon létre egy új lapot a teszteléshez a Power BI szolgáltatás felület alján található Új lap gombra kattintva.

    Képernyőkép a Power B I szolgáltatás új lap gombjáról.

  4. A Vizualizációk panelen válassza ki a Fejlesztői vizualizációt.

    Képernyőkép a fejlesztői vizualizációról a vizualizációk panelen.

    Ez a vizualizáció a számítógépen futó egyéni vizualizációt jelöli. Ez csak akkor érhető el, ha az egyéni vizualizáció hibakeresési beállítása engedélyezve van.

  5. Ellenőrizze, hogy egy vizualizáció lett-e hozzáadva a jelentésvászonhoz.

    Képernyőkép a jelentéshez hozzáadott új vizualizációról.

    Ez egy egyszerű vizualizáció, amely azt jeleníti meg, hogy hányszor hívták meg a frissítési metódust. Ebben a szakaszban a vizualizáció nem kér le adatokat.

    Feljegyzés

    Ha a vizualizáció csatlakozási hibaüzenetet jelenít meg, nyisson meg egy új lapot a böngészőben, lépjen ide https://localhost:8080/assets, és engedélyezze a böngészőnek, hogy használja ezt a címet.

    Képernyőkép az új vizualizációról, amely csatlakozási hibát jelenít meg.

  6. Amíg az új vizualizáció ki van jelölve, lépjen a Mezők panelre, bontsa ki az Értékesítés elemet, és válassza a Mennyiség lehetőséget.

    Képernyőkép a Power B I szolgáltatás mennyiség mezőjéről az egyesült államokbeli értékesítési elemzési jelentés értékesítési táblájában.

  7. A vizualizáció válaszának teszteléséhez méretezze át, és figyelje meg, hogy a frissítésszám értéke minden alkalommal növekszik, amikor átméretezi a vizualizációt.

    Képernyőkép az új vizualizációról, amely egy másik frissítésszámmal jelenik meg az átméretezés után.

Vizuális elemek és szöveg hozzáadása

Ebben a szakaszban megtudhatja, hogyan alakíthatja a vizualizációt körré, és hogyan jelenítheti meg szöveggé.

A vizualizációk fájljának módosítása

Állítsa be a visual.ts fájlt.

Tipp.

Az olvashatóság javítása érdekében javasoljuk, hogy minden alkalommal formázza a dokumentumot, amikor kódrészleteket másol a projektbe. Kattintson a jobb gombbal a VS-kód tetszőleges pontjára, és válassza a Dokumentum formázása lehetőséget (vagy írja be az Alt Shift+F billentyűkombinációt).+

  1. A VS Code Explorer paneljén bontsa ki az src mappát, és válassza ki a fájlt visual.ts.

    Képernyőkép a visual.ts fájl V S-kódban való eléréséről.

  2. Távolítsa el az MIT-licenc megjegyzése alatt található összes kódot.

    Fontos

    Figyelje meg a megjegyzéseket a visual.ts fájl tetején. A Power BI-vizualizációs csomagok használatának engedélyezése a Massachusetts Institute of Technology (MIT) licenc feltételei szerint ingyenes. A szerződés részeként a megjegyzéseket a fájl tetején kell hagynia.

  3. Importálja a szükséges kódtárakat és modulokat, és adja meg a d3 kódtár típusválasztását:

    "use strict";

import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import DataView = powerbi.DataView;
import IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;

    Feljegyzés

    Ha a D3 JavaScript-kódtár nem lett telepítve a telepítés részeként, telepítse most. Futtassa a PowerShellből npm i d3@latest --save

    Figyelje meg, hogy az importált elemek között a következők találhatók:

    • IVisualHost – A vizualizációs gazdagép (Power BI) használatához használt tulajdonságok és szolgáltatások gyűjteménye.
    • D3-kódtár – JavaScript-kódtár adatvezérelt dokumentumok létrehozásához.

  4. Az importálás alatt hozzon létre egy üres vizualizációosztályt . A vizualizációosztály implementálja az IVisual felületet, ahol az összes vizualizáció elindul:

    export class Visual implements IVisual {

}

    A vizualizációs osztályba való bekerülésről a Visual API-t ismertető cikkben talál további információt. A következő három lépésben definiáljuk ezt az osztályt.

  5. Adjon hozzá osztályszintű privát metódusokat a vizualizációosztály elején:

    private host: IVisualHost;
private svg: Selection<SVGElement>;
private container: Selection<SVGElement>;
private circle: Selection<SVGElement>;
private textValue: Selection<SVGElement>;
private textLabel: Selection<SVGElement>;

    Figyelje meg, hogy egyes privát metódusok a Kijelölés típust használják.

  6. A konstruktormetódusban definiálja a kör- és szövegelemeket. Ezt a metódust a vizualizáció példányosításakor hívjuk meg. A D3 méretezhető vektorgrafika (SVG) három alakzat létrehozását teszi lehetővé: egy kör és két szöveges elem:

    constructor(options: VisualConstructorOptions) {
    this.svg = d3.select(options.element)
        .append('svg')
        .classed('circleCard', true);
    this.container = this.svg.append("g")
        .classed('container', true);
    this.circle = this.container.append("circle")
        .classed('circle', true);
    this.textValue = this.container.append("text")
        .classed("textValue", true);
    this.textLabel = this.container.append("text")
        .classed("textLabel", true);
}

  7. Adja meg a frissítési módszer szélességét és magasságát. Ezt a metódust minden alkalommal meghívjuk, amikor változás történik az adatokban vagy a gazdagépkörnyezetben, például új értéket vagy átméretezést.

    public update(options: VisualUpdateOptions) {
    let width: number = options.viewport.width;
    let height: number = options.viewport.height;
    this.svg.attr("width", width);
    this.svg.attr("height", height);
    let radius: number = Math.min(width, height) / 2.2;
    this.circle
        .style("fill", "white")
        .style("fill-opacity", 0.5)
        .style("stroke", "black")
        .style("stroke-width", 2)
        .attr("r", radius)
        .attr("cx", width / 2)
        .attr("cy", height / 2);
    let fontSizeValue: number = Math.min(width, height) / 5;
    this.textValue
        .text("Value")
        .attr("x", "50%")
        .attr("y", "50%")
        .attr("dy", "0.35em")
        .attr("text-anchor", "middle")
        .style("font-size", fontSizeValue + "px");
    let fontSizeLabel: number = fontSizeValue / 4;
    this.textLabel
        .text("Label")
        .attr("x", "50%")
        .attr("y", height / 2)
        .attr("dy", fontSizeValue / 1.2)
        .attr("text-anchor", "middle")
        .style("font-size", fontSizeLabel + "px");
}

  8. Mentse a visual.ts fájlt.

(Nem kötelező) A vizualizációk fájlban lévő kód áttekintése

Ellenőrizze, hogy a visual.ts fájl végleges kódja így néz-e ki:

/*
*  Power BI Visual CLI
*
*  Copyright (c) Microsoft Corporation
*  All rights reserved.
*  MIT License
*
*  Permission is hereby granted, free of charge, to any person obtaining a copy
*  of this software and associated documentation files (the ""Software""), to deal
*  in the Software without restriction, including without limitation the rights
*  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*  copies of the Software, and to permit persons to whom the Software is
*  furnished to do so, subject to the following conditions:
*
*  The above copyright notice and this permission notice shall be included in
*  all copies or substantial portions of the Software.
*
*  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*  THE SOFTWARE.
*/
"use strict";

import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import DataView = powerbi.DataView;
import IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;

export class Visual implements IVisual {
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private circle: Selection<SVGElement>;
    private textValue: Selection<SVGElement>;
    private textLabel: Selection<SVGElement>;
    
    constructor(options: VisualConstructorOptions) {
        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circleCard', true);
        this.container = this.svg.append("g")
            .classed('container', true);
        this.circle = this.container.append("circle")
            .classed('circle', true);
        this.textValue = this.container.append("text")
            .classed("textValue", true);
        this.textLabel = this.container.append("text")
            .classed("textLabel", true);
    }
    
    public update(options: VisualUpdateOptions) {
        let width: number = options.viewport.width;
        let height: number = options.viewport.height;
        this.svg.attr("width", width);
        this.svg.attr("height", height);
        let radius: number = Math.min(width, height) / 2.2;
        this.circle
            .style("fill", "white")
            .style("fill-opacity", 0.5)
            .style("stroke", "black")
            .style("stroke-width", 2)
            .attr("r", radius)
            .attr("cx", width / 2)
            .attr("cy", height / 2);
        let fontSizeValue: number = Math.min(width, height) / 5;
        this.textValue
            .text("Value")
            .attr("x", "50%")
            .attr("y", "50%")
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeValue + "px");
        let fontSizeLabel: number = fontSizeValue / 4;
        this.textLabel
            .text("Label")
            .attr("x", "50%")
            .attr("y", height / 2)
            .attr("dy", fontSizeValue / 1.2)
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeLabel + "px");
    }
}

A képességfájl módosítása

A körkártya vizualizáció egy egyszerű vizualizáció, amely nem hoz létre objektumokat a Formátum panelen. Ezért biztonságosan eltávolíthatja a fájl objektumszakaszát .

  1. Nyissa meg a projektet a VS Code-ban (fájlmegnyitási>mappában).

  2. Válassza ki a capabilities.json fájlt.

    Képernyőkép a capabilities.json fájl V S-kódban való eléréséről.

  3. Távolítsa el a teljes objektumtömböt .
    Ne hagyjon üres sorokat a dataRoles és a dataViewMappings között.

  4. Mentse a capabilities.json fájlt.

A körkártya vizualizációjának újraindítása

Állítsa le a vizualizáció futtatását, és indítsa újra.

  1. A Vizualizációt kezdő PowerShell-ablakban írja be a Ctrl C billentyűkombinációt+. Ha a rendszer kéri a kötegelt feladat leállítását, írja be az Y értéket, majd írja be az Enter billentyűt.

  2. A PowerShellben indítsa újra a vizualizációt.

    pbiviz start

Vizualizáció tesztelése a hozzáadott elemekkel

Ellenőrizze, hogy a vizualizáció megjeleníti-e az újonnan hozzáadott elemeket.

  1. A Power BI szolgáltatás nyissa meg a Power BI US Sales Analysis jelentést. Ha egy másik jelentést használ a körkártya-vizualizáció fejlesztéséhez, keresse meg a jelentést.

  2. Húzzon egy értéket a Mérték mezőbe, és győződjön meg arról, hogy a vizualizáció kör alakú.

    Kör alakú körkártya vizualizáció képernyőképe.

    Ha a vizualizáció nem jelenít meg semmit, a Mezők panelről húzza a Mennyiség mezőt a fejlesztői vizualizációba.

  3. Méretezze át a vizualizációt.

    Figyelje meg, hogy a kör és a szöveg mérete a vizualizáció méreteihez igazodik. A frissítési metódust a vizualizáció átméretezésekor hívjuk meg, és ennek eredményeképpen a vizualizáció elemei újraméretezhetők.

Automatikus újratöltés engedélyezése

Ezzel a beállítással biztosíthatja, hogy a vizualizáció automatikusan újratöltődjön a projekt módosításainak mentésekor.

  1. Lépjen a Power BI US Sales Analysis jelentésére (vagy a körkártya-vizualizációt tartalmazó projektre).

  2. Válassza ki a körkártya vizualizációját.

  3. A lebegő eszköztáron válassza az Automatikus újratöltés váltása lehetőséget.

    Képernyőkép a váltó automatikus újratöltési lehetőségről a körkártya vizualizáció lebegő eszköztárában.

Vizualizáció lekérése adatok feldolgozásához

Ebben a szakaszban adatszerepköröket és adatnézet-leképezéseket határoz meg. A vizualizációt úgy is módosíthatja, hogy megjelenítse a megjelenített érték nevét.

A képességek fájljának konfigurálása

Módosítsa a capabilities.json fájlt az adatszerepkör, az objektumok és az adatnézet-leképezések definiálásához.

  • Az adatszerepkör definiálása

    Adja meg a dataRoles tömböt a típusmérték egyetlen adatszerepkörével. Ezt az adatszerepkört mértéknek nevezzük, és mértékként jelenik meg. Lehetővé teszi egy mértékmező vagy egy összegzett mező átadását.

    1. Nyissa meg a capabilities.json fájlt a VS Code-ban.

    2. Távolítsa el az összes tartalmat a dataRoles tömbből.

    3. Szúrja be a következő kódot a dataRoles tömbbe.

      {
    "displayName": "Measure",
    "name": "measure",
    "kind": "Measure"
}

    4. Mentse a capabilities.json fájlt.

  • Az adatnézet-leképezés definiálása

    Definiáljon egy mérték nevű mezőt a dataViewMappings tömbben. Ez a mező átadható az adatszerepkörnek.

    1. Nyissa meg a capabilities.json fájlt a VS Code-ban.

    2. Távolítsa el az összes tartalmat a dataViewMappings tömbből.

    3. Szúrja be a következő kódot a dataViewMappings tömbbe.

      {
    "conditions": [
        { "measure": { "max": 1 } }
    ],
    "single": {
        "role": "measure"
    }
}

    4. Mentse a capabilities.json fájlt.

Győződjön meg arról, hogy a capabilities.json fájl a következőképpen néz ki:

{
    "dataRoles": [
        {
            "displayName": "Measure",
            "name": "measure",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "conditions": [
                { "measure": { "max": 1 } }
            ],
            "single": {
                "role": "measure"
            }
        }
    ],
    "privileges": []
}

(Nem kötelező) A funkciók fájlkódjának változásainak áttekintése

Ellenőrizze, hogy a körkártya vizualizációja megjeleníti-e a mértékmezőt , és tekintse át a Dataview megjelenítése beállítással végrehajtott módosításokat.

  1. A Power BI szolgáltatás nyissa meg a Power BI US Sales Analysis jelentést. Ha egy másik jelentést használ a körkártya-vizualizáció fejlesztéséhez, keresse meg a jelentést.

  2. Figyelje meg, hogy a körkártya vizualizációja mostantól konfigurálható mérték nevű mezővel. A Mezők panel elemeit a Mérték mezőbe húzhatja.

    Képernyőkép a körkártya mértékéről a Power BI szolgáltatás vizualizáció panelen.

    Feljegyzés

    A vizualizációs projekt még nem tartalmaz adatkötési logikát.

  3. A lebegő eszköztáron válassza a Dataview megjelenítése lehetőséget.

    Képernyőkép az adatnézet megjelenítése gombról, amely a körkártya lebegő eszköztárában található.

  4. Jelölje ki a három elemet a megjelenítés kibontásához, és válassza az egyetlen lehetőséget az érték megtekintéséhez.

    Képernyőkép az érték ábráról, ahogy az a körkártya adatnézeti beállításában látható.

  5. Bontsa ki a metaadatokat, majd az oszlopok tömbjét, és tekintse át a formátumot és a displayName értékeket.

    Képernyőkép a formátumról és a névértékek megjelenítéséről a körkártya adatnézeti beállításában látható módon.

  6. Ha vissza szeretne váltani a vizualizációra, a vizualizáció fölött lebegő eszköztáron válassza a Dataview megjelenítése lehetőséget.

A vizualizáció konfigurálása adatok felhasználására

A vizualizáció egyelőre renderel, de nem jelenít meg adatokat. Ebben a szakaszban módosítja a visual.ts fájlt, hogy a körkártya-vizualizáció adatokat használjon fel.

  1. Nyissa meg a visual.ts fájlt a VS Code-ban.

  2. A frissítési módszerben:

    • Adja hozzá az alábbi utasítást első utasításként. Az utasítás a dataView-t egy változóhoz rendeli a könnyű hozzáférés érdekében, és deklarálja a változót a dataView objektumra való hivatkozáshoz.

      let dataView: DataView = options.dataViews[0];

    • Cserélje le a .text("Value") elemet a következő kódsorra:

      .text(<string>dataView.single.value)

    • A .text("Label") helyére írja be a következő kódsort:

      .text(dataView.metadata.columns[0].displayName)

  3. Mentse a visual.ts fájlt.

  4. Tekintse át a vizualizációt a Power BI szolgáltatás.

A vizualizáció ekkor megjeleníti a kijelölt adatmező nevét és értékét.

Képernyőkép a mennyiségi értéket megjelenítő körkártya-vizualizációról.

Most létrehozott egy működő Power BI-vizualizációt. Hozzáadhat hozzá formázási beállításokat, vagy az azonnali használatnak megfelelően csomagolhatja be.

Kapcsolódó tartalom