Jaa

Opetusohjelma: Power BI:n pyöreän kortin visualisoinnin kehittäminen

  • Artikkeli

Tässä opetusohjelmassa kehität Power BI :n pyöreä kortti -visualisoinnin, joka näyttää muotoillun mittariarvon ympyrän sisällä. Pyöreä kortti -visualisointi tukee täyttövärin ja ääriviivan paksuuden mukauttamista.

Tässä opetusohjelmassa opit:

  • Luo visualisoinnille kehitysprojekti.
  • Kehitä visualisointi D3:n visuaalisilla elementeillä.
  • Määritä visualisointi käsittelemään tietoja.
  • Määritä visualisointi sopeutumaan kokomuutoksiin.
  • Määritä visualisoinnin mukautuvan värin ja reunan asetukset.

Muistiinpano

Tämän visualisoinnin koko lähdekoodi on kohdassa pyöreä kortti -Power BI -visualisointi.

Edellytykset

Ennen kuin aloitat Power BI -visualisoinnin kehittämisen, varmista, että sinulla on kaikki tässä osiossa lueteltu.

Kehitysprojektin luominen

Tässä osiossa luot projektin pyöreä kortti -visualisoinnille.

Muistiinpano

Tässä opetusohjelmassa Visual Studio Codea (VS Code) käytetään Power BI -visualisoinnin kehittämiseen.

  1. Avaa uusi pääte VS Codessa ja siirry kansioon, johon haluat luoda projektisi.

  2. Anna seuraava komento PowerShell-päätteessä:

    pbiviz new CircleCard

  3. Avaa CircleCard-kansio VS Code Explorerissa. (Tiedosto>avaa kansio).

    Näyttökuva VS Code -ikkunasta avattuna pyöreä kortti -kansioon.

    Yksityiskohtainen kuvaus kunkin tiedoston toiminnosta on kohdassa Power BI -visualisoinnin projektirakenne.

  4. Tarkista pääteikkuna ja varmista, että olet circleCard-hakemistossa. Asenna Power BI -visualisointityökalujen riippuvuudet.

    npm install

    Vihje

    Jos haluat nähdä, mitkä riippuvuudet visualisointiin on asennettu, tarkista package.json tiedosto.

  5. Aloita pyöreä kortti -visualisointi.

    pbiviz start

    Visualisointi on nyt käynnissä, ja sitä isännöidään parhaillaan tietokoneessasi.

    Tärkeä

    Sulje PowerShell-ikkuna vasta opetusohjelman lopussa. Jos haluat pysäyttää visualisoinnin suorittamisen, paina Ctrl+C ja jos sinua kehotetaan lopettamaan eräajo, anna Y ja sitten Enter.

Visualisoinnin tarkasteleminen Power BI -palvelussa

Käytämme Yhdysvaltain myyntianalyysi -raporttia visualisoinnin testaamiseen Power BI -palvelussa. Voit ladata tämän raportin ja ladata sen Power BI -palveluun.

Voit myös käyttää omaa raporttiasi visualisoinnin testaamiseen.

Muistiinpano

Ennen kuin jatkat, varmista, että olet ottanut käyttöön visualisointien kehittäjätilan.

  1. Kirjaudu sisään ja PowerBI.com ja avaa Yhdysvaltain myyntianalyysi - raportti.

  2. Valitse Muokkaa.

    Näyttökuva Power BI -palvelun muokkausvaihtoehdosta.

  3. Luo uusi sivu testausta varten napsauttamalla Uusi sivu -painiketta Power BI -palveluliittymän alareunassa.

    Näyttökuva Power BI -palvelun uusi sivu -painikkeesta.

  4. Valitse Visualisoinnit-ruudusta Kehittäjän visualisointi.

    Näyttökuva kehittäjän visualisoinnista Visualisoinnit-ruudussa.

    Tämä visualisointi edustaa mukautettua visualisointia, jota tietokoneessasi suoritetaan. Se on käytettävissä vain, kun mukautetun visualisoinnin virheenkorjaus -asetus on käytössä.

  5. Varmista, että visualisointi lisättiin raporttipohjaan.

    Näyttökuva raporttiin lisätystä uudesta visualisoinnista.

    Tämä on yksinkertainen visualisointi, joka näyttää, kuinka monta kertaa sen päivitysmenetelmää on kutsuttu. Tässä vaiheessa visualisointi ei nouda mitään tietoja.

    Muistiinpano

    Jos visualisointi näyttää yhteyden virhesanoman, avaa uusi selainvälilehti, siirry osoitteeseen https://localhost:8080/assetsja anna selaimelle käyttöoikeus käyttää tätä osoitetta.

    Näyttökuva uudesta visualisoinnista, joka näyttää yhteysvirheen.

  6. Kun uusi visualisointi on valittuna, siirry Tiedot-ruutuun, laajenna Myynti ja valitse Määrä.

    Näyttökuva Power BI -palvelun Määrä-kentästä Yhdysvaltain myyntianalyysiraportin myyntitaulukosta.

  7. Jos haluat testata, miten visualisointi reagoi, muuta sen kokoa. Huomaa, että Päivitä määrä -arvo kasvaa aina, kun muutat visualisoinnin kokoa.

    Näyttökuva uudesta visualisoinnista, joka näyttää eri päivitysmäärämäärän koon muuttaminen jälkeen.

Visuaalisten elementtien ja tekstin lisääminen

Tässä osiossa opit muuttamaan visualisoinnin ympyräksi ja näyttämään tekstiä.

Visualisointitiedoston muokkaaminen

Määritä visual.ts tiedosto.

Vihje

Luettavuuden parantamiseksi asiakirja kannattaa muotoilla aina, kun kopioit koodikatkelmia projektiin. Napsauta hiiren kakkospainikkeella mitä tahansa VS Coden kohtaa ja valitse Muotoile asiakirjaa (tai kirjoita Alt+Shift+F).

  1. Laajenna Src-kansio VS Codessa resurssienhallintaruudussa ja valitse tiedosto, visual.ts.

    Näyttökuva visual.ts tiedoston käyttämisestä VPN-koodissa.

  2. Poista kaikki koodi MIT-käyttöoikeuden kommentista.

    Tärkeä

    Huomaa kommentit visual.ts-tiedoston yläosassa. Power BI:n visualisointien pakettien käyttöoikeus myönnetään maksutta Massachusetts Institute of Technologyn (MIT) käyttöoikeussopimuksen ehtojen mukaisesti. Osana sopimusta sinun on jätettävä kommentit tiedoston yläosaan.

  3. Tuo tarvittavat kirjastot ja moduulit ja määritä d3-kirjaston tyyppivalinta:

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

    Muistiinpano

    Jos D3:n JavaScript-kirjastoa ei ole asennettu osana asennustasi, asenna se nyt. Suorita PowerShellistä npm i d3@latest --save

    Huomaa, että tuomiesi kohteiden joukossa ovat muun muassa seuraavat:

    • IVisualHost – kokoelma ominaisuuksia ja palveluja, joita käytetään vuorovaikutuksessa visualisoinnin isännän (Power BI) kanssa.
    • D3-kirjasto : JavaScript-kirjasto tietopohjaisten asiakirjojen luomiseen.

  4. Luo tuonnin alla tyhjä visualisointiluokka . Visualisointiluokka toteuttaa IVisual-käyttöliittymän, josta kaikki visualisoinnit alkavat:

    export class Visual implements IVisual {

}

    Lisätietoja siitä, mitä visualisointiluokkaan kuuluu, on artikkelissa Visualisoinnin ohjelmointirajapinta. Määritämme tämän luokan seuraavissa kolmessa vaiheessa.

  5. Lisää luokkatason yksityisiä menetelmiä visualisointiluokan alkuun:

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

    Huomaa, että jotkin näistä yksityisistä menetelmistä käyttävät Valinta-tyyppiä.

  6. Määritä ympyrä- ja tekstielementit konstruktorimenetelmässä. Tätä menetelmää kutsutaan, kun visualisoinnin esiintymä luodaan. D3:n skaalattava vektorigrafiikka (SVG) mahdollistaa kolmen muodon luomisen: ympyrän ja kaksi tekstielementtiä:

    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. Määritä leveys ja korkeus päivitysmenetelmässä. Tätä menetelmää kutsutaan aina, kun tiedoissa tai isäntäympäristössä tapahtuu muutos, kuten uusi arvo tai koon muuttaminen.

    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. Tallenna visual.ts tiedosto.

(Valinnainen) Tarkista koodi visualisoinnit-tiedostossa

Varmista, että visual.ts tiedoston lopullinen koodi näyttää tältä:

/*
*  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");
    }
}

Ominaisuustiedoston muokkaaminen

Pyöreä kortti -visualisointi on yksinkertainen visualisointi, joka ei luo objekteja Muotoilu-ruudussa. Siksi voit turvallisesti poistaa tiedoston objektit-osan .

  1. Avaa projekti VS Codessa (Tiedoston>avaa kansio).

  2. Valitse capabilities.json tiedosto.

    Näyttökuva capabilities.json-tiedoston käyttämisestä VPN-koodissa.

  3. Poista koko objektien matriisi.
    Älä jätä tyhjiä rivejä dataRoles- ja dataViewMappings-kohteiden väliin.

  4. Tallenna capabilities.json tiedosto.

Pyöreä kortti -visualisoinnin käynnistäminen uudelleen

Pysäytä visualisoinnin suorittaminen ja käynnistä se uudelleen.

  1. Paina PowerShell-ikkunassa, jossa käynnistit visualisoinnin, Ctrl+C. Jos erätyön lopettamiseen pyydetään eräajoa, syötä Y ja sitten Enter.

  2. Käynnistä visualisointi uudelleen PowerShellissä.

    pbiviz start

Lisättyjä elementtejä sisältävän visualisoinnin testaaminen

Varmista, että visualisointi näyttää juuri lisätyt elementit.

  1. Avaa Power BI -palvelussa Power BI:n Yhdysvaltain myyntianalyysi - raportti. Jos käytät eri raporttia pyöreä kortti -visualisoinnin kehittämiseen, siirry kyseiseen raporttiin.

  2. Vedä arvo Mittayksikkö-ruutuun ja varmista, että visualisointi on ympyrän muotoinen.

    Näyttökuva ympyrän muotoisesta pyöreä kortti -visualisoinnista.

    Jos visualisoinnissa ei näy mitään, vedä Kentät-ruudusta Määrä-kenttä kehittäjän visualisointiin.

  3. Muuta visualisoinnin kokoa.

    Huomaa, että ympyrä ja teksti skaalautuvat visualisoinnin mittojen mukaan. Päivitysmenetelmää kutsutaan, kun muutat visualisoinnin kokoa, minkä seurauksena visuaaliset elementit skaalataan uudelleen.

Automaattisen uudelleenlatauksen ottaminen käyttöön

Tämän asetuksen avulla voit varmistaa, että visualisointi ladataan automaattisesti uudelleen aina, kun tallennat projektin muutokset.

  1. Siirry Power BI:n Yhdysvaltain myyntianalyysi -raporttiin (tai projektiin, jossa on pyöreä kortti -visualisointisi).

  2. Valitse pyöreä kortti -visualisointi.

  3. Valitse kelluvalta työkalurivillä Automaattinen uudelleenlataus käytössä tai ei käytössä.

    Näyttökuva automaattisen uudelleenlatauksen vaihtopainikkeen napsauttamisesta pyöreä kortti -visualisoinnin kelluvasta työkalurivistä.

Visualisoinnin hankkiminen tietojen käsittelyyn

Tässä osiossa määrität tietoroolit ja tietonäkymän yhdistämismääritykset. Voit myös muokata visualisointia niin, että se näyttää näytettävän arvon nimen.

Ominaisuustiedoston määrittäminen

Muokkaa capabilities.json tiedostoa tietoroolin, objektien ja tietonäkymän yhdistämismääritysten määrittämiseksi.

  • Tietoroolin määrittäminen

    Määritä dataRoles-matriisi, jolla on yksi mittayksikkö-tyyppinen tietorooli. Tätä tietoroolia kutsutaan mittayksiköksi, ja se näytetään mittayksikkönä. Se sallii joko mittarikentän tai yhteenvetokentän välittämisen.

    1. Avaa capabilities.json-tiedosto VS Codessa.

    2. Poista kaikki dataRoles-matriisin sisältö.

    3. Lisää seuraava koodi dataRoles-matriisiin.

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

    4. Tallenna capabilities.json tiedosto.

  • Tietonäkymän yhdistämismääritysten määrittäminen

    Määritä mittayksikkö-kenttä dataViewMappings-matriisissa. Tämä kenttä voidaan välittää tietorooliin.

    1. Avaa capabilities.json-tiedosto VS Codessa.

    2. Poista kaikki dataViewMappings-matriisin sisältö.

    3. Lisää seuraava koodi dataViewMappings-matriisiin .

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

    4. Tallenna capabilities.json tiedosto.

Vahvista, että capabilities.json tiedosto näyttää tältä:

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

(Valinnainen) Tarkista tiedostokoodin muutosten ominaisuudet

Varmista, että pyöreä kortti -visualisoinnissa näkyy mittarikenttä, ja tarkista Näytä tietonäkymä -kohdassa tekemäsi muutokset.

  1. Avaa Power BI -palvelussa Power BI:n Yhdysvaltain myyntianalyysi - raportti. Jos käytät eri raporttia pyöreä kortti -visualisoinnin kehittämiseen, siirry kyseiseen raporttiin.

  2. Huomaa, että pyöreä kortti -visualisointiin voidaan nyt määrittää kenttä nimeltä Mittayksikkö. Voit vetää ja pudottaa elementtejä Tiedot-ruudusta Mittayksikkö-kenttään.

    Näyttökuva pyöreän kortin mittayksityistoiminnosta Power BI -palvelun visualisointiruudussa.

    Muistiinpano

    Visualisointiprojekti ei vielä sisällä tietojen sidontalogiikkaa.

  3. Valitse kelluvalta työkalurivillä Näytä tietonäkymä.

    Näyttökuva Näytä tietonäkymä -painikkeesta, joka sijaitsee pyöreän kortin kelluvalla työkalurivillä.

  4. Laajenna näyttö valitsemalla kolme pistettä ja tarkastele arvoa valitsemalla yksittäinen .

    Näyttökuva arvosta, kun se näytetään pyöreän kortin Näytä tietonäkymä -kohdassa.

  5. Laajenna metatiedot ja sitten sarakkeet-matriisi. Tarkista sitten format- ja displayName-arvot.

    Näyttökuva format- ja display name -arvoista, jotka näytetään pyöreän kortin Näytä tietonäkymä -kohdassa.

  6. Vaihda takaisin visualisointiin. Valitse visualisoinnin päällä olevalta irrallpuolelta Näytä tietonäkymä.

Visualisoinnin määrittäminen tietojen käsittelyä varten

Toistaiseksi visualisointi hahmontaa, mutta ei näytä mitään tietoja. Tässä osiossa teet muutoksia visual.ts-tiedostoon , jotta pyöreä kortti -visualisointi voi kuluttaa tietoja.

  1. Avaa visual.ts tiedosto VS Codessa.

  2. Päivitysmenetelmässä:

    • Lisää seuraava lauseke ensimmäiseksi lausekkeeksi. Lauseke määrittää dataView'n muuttujaan käytön helpottamiseksi ja määrittää muuttujan viittaamaan dataView-objektiin .

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

    • Korvaa .text("Value") tällä koodirivillä:

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

    • Korvaa .text("Label") tällä koodirivillä:

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

  3. Tallenna visual.ts tiedosto.

  4. Tarkastele visualisointia Power BI -palvelussa.

Visualisointi näyttää nyt valitun tietokentän nimen ja arvon.

Näyttökuva pyöreä kortti -visualisoinnista, joka näyttää määräarvon.

Olet luonut toimivan Power BI -visualisoinnin. Voit lisätä siihen muotoiluasetuksia tai pakata sen välittömään käyttöön.

Liittyvä sisältö