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

Kehittäjänä voit luoda omia Power BI -visualisointeja. Sinä, organisaatiosi ja kolmannet osapuolet voivat käyttää kyseisiä visualisointeja.

Tässä opetusohjelmassa kehität Power BI:n pyöreä kortti -visualisoinnin. Sen avulla voi näyttää muotoillun mittariarvon ympyrän sisällä. Pyöreä kortti -visualisointi tukee täytevä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 koon muutoksiin.
  • Määritä visualisoinnille mukautuvan värin ja reunan asetukset.

Huomautus

Katso tämän visualisoinnin koko lähdekoodi kohdasta Circle Card Power BI visualisointi.

Edellytykset

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

Kehitysprojektin luominen

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

  1. Avaa PowerShell ja siirry kansioon, johon haluat luoda projektin.

  2. Syötä seuraava komento:

    pbiviz new CircleCard
    
  3. Siirry projektin kansioon.

    cd CircleCard
    
  4. Aloita pyöreä kortti -visualisointi. Visualisointi on nyt käynnissä, ja sitä isännöidään samanaikaisesti tietokoneessasi.

    pbiviz start
    

    Tärkeä

    Älä sulje PowerShell-ikkunaa ennen opetusohjelman loppua. Voit lopettaa visualisoinnin suorittamisen painamalla Ctrl + C. Jos erätyön lopettamiseen pyydetään, syötä Y ja paina Enter.

Visualisoinnin tarkasteleminen Power BI palvelussa

Testaamme visualisoinnin Power BI palvelussa käyttämällä Yhdysvaltojen myyntianalyysiraporttia. Voit ladata kyseisen raportin ja ladata sen Power BI -palveluun.

Voit myös testata visualisointia käyttämällä omaa raporttiasi.

Huomautus

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

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

  2. Valitse Lisää vaihtoehtoja > Muokkaa.

    Näyttökuva muokkausvaihtoehdosta Power BI -palvelussa.

  3. Luo uusi sivu kokeilemista varten napsauttamalla Uusi sivu -painiketta Power BI -palvelun käyttöliittymän alareunasta.

    Näyttökuva Uusi sivu -painikkeesta Power BI -palvelussa.

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

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

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

  5. Vahvista, 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 tietoja.

    Huomautus

    Jos visualisointi näyttää yhteyden virheilmoituksen, avaa uusi selainvälilehti, siirry https://localhost:8080/assets/status-kohtaan ja anna selaimelle oikeus käyttää tätä osoitetta.

    Näyttö kuva uudesta visualisoinnista, joka ilmoittaa yhteysvirheestä.

  6. Kun uusi visualisointi on valittu, siirry Kentät-ruutuun, laajenna Myynti ja valitse Määrä.

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

  7. Jos haluat kokeilla, miten visualisointi reagoi, muuta sen kokoa niin näet, että Päivitetty määrä -arvo kasvaa aina, kun muutat visualisoinnin kokoa.

    Näyttökuva uudesta visualisoinnista, jossa näytetään päivitetty määrä koon muuttamisen jälkeen.

Visuaalisten elementtien ja tekstin lisääminen

Tässä osiossa opit määrittämään visualisoinnin niin, että se on ympyrä ja näyttää tekstiä.

Huomautus

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

Visualisoinnit-tiedoston muokkaaminen

Määritä visual.ts-tiedosto poistamalla ja lisäämällä muutamia koodirivejä.

  1. Avaa projekti VS Codessa (Tiedosto > Avaa kansio).

  2. Laajenna src-kansio Resurssienhallinta-ruudussa ja valitse visual.ts-tiedosto.

    Näyttökuva visual.ts-tiedoston käyttämisestä VS Codessa.

    Tärkeä

    Pane merkille 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 kirjoitettava kommentti tiedoston yläosaan.

  3. Poista seuraavat koodirivit visual.ts-tiedostosta.

    • VisualSettings-tuominen:

      import { VisualSettings } from "./settings";
      
    • Neljä luokkatason yksityistä muuttujaesittelyä.

    • Kaikki konstruktorin sisäiset koodirivit.

    • Kaikki päivitä-menetelmän sisäiset koodirivit.

    • Kaikki päivitä-menetelmän alla olevat jäljelle jääneet koodirivit, mukaan lukien parseSettings- ja enumerateObjectInstances-menetelmät.

  4. Lisää seuraavat koodirivit tuontiosion loppuun:

    • IVisualHost – kokoelma ominaisuuksia ja palveluja, joita käytetään vuorovaikutuksessa visualisoinnin isännän (Power BI) kanssa.

      import IVisualHost = powerbi.extensibility.IVisualHost;
      
    • D3-kirjasto

      import * as d3 from "d3";
      type Selection<T extends d3.BaseType> = d3.Selection<T, any,any, any>;
      

      Huomautus

      Jos et asentanut tätä kirjastoa asennusohjelman yhteydessä, asenna D3:n JavaScript-kirjasto.

  5. Lisää Visual-luokan esittelyn alle seuraavat luokkatason ominaisuudet. Sinun tarvitsee lisätä vain ne koodirivit, jotka alkavat private.

    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>;
        // ...
    }
    
  6. Tallenna visual.ts-tiedosto.

Ympyrä- ja tekstielementtien lisääminen

Lisää D3:n skaalattava vektorigrafiikka (SVG). Näin voit luoda kolme muotoa: ympyrän ja kaksi tekstielementtiä.

  1. Avaa visual.ts VS Codessa.

  2. Lisää seuraava koodi konstruktoriin.

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

    Vihje

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

  3. Tallenna visual.ts-tiedosto.

Leveyden ja korkeuden määrittäminen

Määritä visualisoinnin leveys ja korkeus sekä alusta visualisoinnin elementtien määritteet ja tyylit.

  1. Avaa visual.ts VS Codessa.

  2. Lisää seuraava koodi päivitysmenetelmään.

    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");
    
  3. Tallenna visual.ts-tiedosto.

(Valinnainen) Tarkista koodi visualisoinnit-tiedostossa

Varmista, että koodi näyttää tältä visuals.ts-tiedostossa:

/*
*  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 "core-js/stable";
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 EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
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

Poista tarpeettomat koodirivit ominaisuustiedostosta.

  1. Avaa projekti VS Codessa (Tiedosto > Avaa kansio).

  2. Valitse capabilities.json-tiedosto.

    Näyttökuva capabilities.json-tiedoston käyttämisestä VS Codessa.

  3. Poista kaikki objektielementit (rivit 14–60).

  4. Tallenna capabilities.json-tiedosto.

Pyöreä kortti -visualisoinnin aloittaminen uudelleen

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

  1. Paina visualisointia suorittavan PowerShell-ikkunan ctrl+C.C. Jos erätyön lopettamiseen pyydetään, paina Y ja paina Enter.

  2. Käynnistä visualisointi PowerShellissä.

    pbiviz start
    

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

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. Varmista, että visualisointi on ympyrän muotoinen.

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

    Huomautus

    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 vaihtoehdon avulla varmistat, että visualisointi ladataan automaattisesti uudelleen aina, kun tallennat projektin muutokset.

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

  2. Valitse pyöreä kortti -visualisointi.

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

    Näyttökuva automaattisen uudelleenlatauksen päälle/pois -vaihtoehdon napsauttamisesta pyöreä kortti -visualisoinnin kelluvasta työkalurivistä.

Visualisoinnin määrittäminen tietojen käsittelyyn

Tässä osiossa määritetään tietoroolit ja tietonäkymän yhdistämismääritykset. Lisäksi muokkaat visualisointia niin, että se näyttää näytettävän arvon nimen.

Ominaisuustiedoston määrittäminen

Muokkaa capabilities.json-tiedostoa tietoroolien 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ö (rivit 3–12).

    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ä mittari-niminen kenttä dataViewMappings-matriisissa. Tämä kenttä voidaan välittää tietorooliin.

    1. Avaa capabilities.json-tiedosto VS Codessa.

    2. Poista kaikki sisältö dataViewMappings-matriisista (rivit 10–30).

    3. Lisää seuraava koodi dataViewMappings-matriisiin.

      {
          "conditions": [
              { "measure": { "max": 1 } }
          ],
          "single": {
              "role": "measure"
          }
      }
      
    4. Tallenna capabilities.json-tiedosto.

(Valinnainen) Tarkista tiedoston koodinmuutosten ominaisuudet

Varmista, että pyöreä kortti -visualisoinnissa näkyy mittayksikkö-kenttä, 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 voi nyt määrittää kentän nimeltä Mittayksikkö. Voit vetää ja pudottaa elementtejä Kentät-ruudusta Mittayksikkö-kenttään.

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

    Huomautus

    Visualisointiprojekti ei vielä sisällä tietojen sidontalogiikkaa.

  3. Valitse kelluvalta työkaluriviltä 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 displayName-arvoista, kun ne näytetään pyöreän kortin Näytä tietonäkymä -kohdassa.

  6. Vaihda takaisin visualisointiin. Valitse visualisoinnin päällä olevalta irralliselta työkaluriviltä Näytä tietonäkymä.

<a name="configure-the-visual-to-consume-data">Visualisoinnin määrittäminen tietojen käsittelyä varten

Tee visual.ts-tiedostoon muutokset niin, että pyöreä kortti -visualisointi pystyy käyttämään tietoja.

  1. Avaa visual.ts-tiedosto VS Codessa.

  2. Varmista, että tiedostoon tulee seuraava rivi, jotta voit tuoda DataView liittymän powerbi moduulista. Jos sitä ei ole tiedostossa, lisää se.

    import DataView = powerbi.DataView;
    
  3. Tee seuraava 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") seuraavalla koodirivillä:

      .text(<string>dataView.single.value)
      
    • Korvaa .text(Label") seuraavalla koodirivillä:

      .text(dataView.metadata.columns[0].displayName)
      
  4. Tallenna visual.ts-tiedosto.

  5. Tarkastele visualisointia Power BI -palvelussa.

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

Olet nyt luonut toimivan Power BI visualisoinnin. Voit lisätä siihen muotoiluasetuksia, tai voit pakata sen sellaisenaan välittömästi käytettäväksi.

Seuraavat vaiheet