Opetusohjelma: Muotoiluasetusten lisääminen Circle Card -visualisointiin

Kun luot visualisoinnin, voit lisätä asetuksia sen ominaisuuksien mukauttamiseen. Joitain mukautettavia kohteita ovat esimerkiksi seuraavat:

  • Otsikko
  • Tausta
  • Reunus
  • Varjo
  • Värit

Tässä opetusohjelmassa opit:

  • Muotoiluominaisuuksien lisääminen visualisointiin
  • Visualisoinnin pakkaaminen
  • Mukautetun visualisoinnin tuominen Power BI Desktop tai palveluraporttiin

Edellytys

Tässä opetusohjelmassa kerrotaan, miten voit lisätä visualisointiin yleisiä muotoiluominaisuuksia. Käytämme esimerkkinä Circle Card - visualisointia. Lisäämme mahdollisuuden muuttaa ympyrän väriä ja paksuutta. Jos sinulla ei ole circle card - projektikansiota, jonka loit tässä opetusohjelmassa, tee opetusohjelma uudelleen ennen jatkamista.

Muotoiluasetusten lisääminen

  1. Siirry PowerShellissä pyöreä kortti -projektikansioon ja käynnistä pyöreä kortti -visualisointi. Visualisointi on nyt käynnissä, ja sitä isännöidään samanaikaisesti tietokoneessasi.

    pbiviz start
    
  2. Valitse Power BI:ssäMuoto-sivu.

    Sinun tulisi nähdä viesti Muotoiluasetukset eivät ole käytettävissä tälle visualisoinnille.

    Formatting paintbrush

    Jos näet muotoiluasetuksia tässä, mutta et voi muuttaa niitä, voit siirtyä mukautettujen muotoiluasetusten lisäämiseen niiden mukauttamiseksi.

  3. Avaa Visual Studio Codessa -capabilities.jsontiedosto.

  4. Lisää objektit rivin 8 jälkeen ennen dataViewMappings-matriisia.

    "objects": {},
    

    Add objects

  5. capabilities.json Tallenna tiedosto.

  6. Tarkista Power BI:ssä muotoilun asetukset uudelleen.

    Huomautus

    Jos et näe muotoiluasetukset eivät ole muuttuneet, valitse Lataa mukautettu visualisointi uudelleen.

    View formatting options

  7. Valitse Otsikko-asetukseksi Ei käytössä. Huomaa, että visualisointi ei enää näytä mittarin nimeä vasemmassa yläkulmassa.

    Tile option is off

    No name tile

Mukautettujen muotoiluasetusten lisääminen

Seuraavaksi lisäämme uuden väri-nimisen ryhmän, jonka avulla määritetään ympyrän väri ja leveys.

  1. Pysäytä mukautettu visualisointi kirjoittamalla PowerShellissäCtrl+C .

  2. Lisää Visual Studio Code -tiedostoon capabilities.json seuraava JSON-koodiosa objektiin, johon on merkitty objektit.

        {
            "circle": {
                "displayName": "Circle",
                "properties": {
                    "circleColor": {
                        "displayName": "Color",
                        "description": "The fill color of the circle.",
                        "type": {
                            "fill": {
                                "solid": {
                                    "color": true
                                }
                            }
                        }
                    },
                    "circleThickness": {
                        "displayName": "Thickness",
                        "description": "The circle thickness.",
                        "type": {
                            "numeric": true
                        }
                    }
                }
            }
        }
    

    JSON-koodiosa kuvaa ympyrä-nimistä ryhmää, joka koostuu kahdesta muuttujasta: circleColor ja circleThickness.

    Circle thickness code

  3. capabilities.json Tallenna tiedosto.

  4. Siirry resurssienhallintaruudussasrc-kansioon ja valitse settings.ts. Tämä tiedosto edustaa aloitusvisualisoinnin asetuksia.

  5. Korvaa tiedostossa settings.ts kaksi luokkaa seuraavalla koodilla.

    export class CircleSettings {
        public circleColor: string = "white";
        public circleThickness: number = 2;
    }
    export class VisualSettings extends DataViewObjectsParser {
        public circle: CircleSettings = new CircleSettings();
    }
    

    Module classes

    Tämä moduuli määrittää kaksi luokkaa. CircleSettings-luokka määrittää kaksi ominaisuutta, joiden nimet vastaavat tiedostossa capabilities.json määritettyjä objekteja (circleColor ja circleThickness), ja asettaa myös oletusarvot. VisualSettings-luokka perii DataViewObjectParser-luokan ja lisää ominaisuuden nimeltä circle, joka vastaa tiedostossa capabilities.json määritettyä objektia, ja palauttaa CircleSettings-esiintymän.

  6. settings.ts Tallenna tiedosto.

  7. visual.ts Avaa tiedosto.

  8. Tuo tiedostoon visual.tsVisualSettings, VisualObjectInstanceEnumeration ja EnumerateVisualObjectInstancesOptions:

    import { VisualSettings } from "./settings";
    import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
    import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
    

    ja lisää seuraava ominaisuus Visual-luokkaan:

    private visualSettings: VisualSettings;
    

    Tämä ominaisuus sisältää viittauksen VisualSettings-objektiin, joka kuvaa visualisoinnin asetuksia.

    Add visual class

  9. Lisää Visual-luokassa seuraava menetelmä ennen päivitysmenetelmää. Tätä menetelmää käytetään muotoiluasetusten täyttämiseen.

    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        const settings: VisualSettings = this.visualSettings || <VisualSettings>VisualSettings.getDefault();
        return VisualSettings.enumerateObjectInstances(settings, options);
    }
    

    Tätä menetelmää käytetään muotoiluasetusten täyttämiseen.

    Visual settings object

  10. Lisää seuraava koodi päivitysmenetelmäänradius-sädemuuttujan esittelyn jälkeen.

    this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);
    
    this.visualSettings.circle.circleThickness = Math.max(0, this.visualSettings.circle.circleThickness);
    this.visualSettings.circle.circleThickness = Math.min(10, this.visualSettings.circle.circleThickness);
    

    Tämä koodi noutaa muotoiluasetukset. Se säätää mitä tahansa circleThickness-ominaisuuteen välitettyä arvoa. Se muuttaa sen arvoksi 0, jos se on negatiivinen, tai arvoksi 10, jos se on suurempi kuin 10.

    Radius variable

  11. Muokkaa täyttötyyliin ja viivanleveystyyliin välitettyjä arvoja ympyräelementissä seuraavasti:

    this.visualSettings.circle.circleColor
    
    this.visualSettings.circle.circleThickness
    

    Fills the circle element

  12. visual.ts Tallenna tiedosto.

  13. Käynnistä visualisointi PowerShellissä.

    pbiviz start
    
  14. Valitse Power BI:ssä visualisoinnin päällä olevalta irralliselta työkaluriviltä Automaattinen uudelleenlataus käytössä tai ei käytössä.

    Toggle Auto Reload

  15. Laajenna Ympyrä-kohta visualisoinnin muotoiluasetuksissa.

    Circle format

    Muokkaa väri- ja paksuusasetuksia.

    Anna paksuusasetuksen arvoksi on pienempi kuin nolla ja arvo, joka on suurempi kuin 10. Huomaa, että visualisointi päivittää arvon toteutettavaksi enimmäis- tai vähimmäisarvoksi.

Mukautetun visualisoinnin pakkaaminen

Nyt kun visualisointi on valmis ja valmis käytettäväksi, on aika pakata se. Pakattu visualisointi voidaan tuoda Power BI raportteihin tai palveluun muiden käytettäväksi ja nautittavaksi.

Tässä osiossa opit

Visualisoinnin ominaisuusarvojen muokkaaminen

  1. Pysäytä mukautettu visualisointi kirjoittamalla PowerShellissäCtrl+C .

  2. pbiviz.json Avaa tiedosto kohdassa Visual Studio Code.

  3. Vaihda visual-objektiin displayName-ominaisuudeksi Circle Card.

    Näet näyttönimen viemällä hiiren Visualisoinnit-ruudussa kuvakkeen päälle.

    Display Name visual

  4. Kirjoita seuraava teksti description-ominaisuutta varten.

    Näyttää muotoillun mittariarvon ympyrän sisällä

  5. Täytä visualisoinnille kohdat supportUrl ja gitHubUrl.

    Esimerkki:

    {
        "supportUrl": "https://community.powerbi.com",
        "gitHubUrl": "https://github.com/microsoft/PowerBI-visuals-circlecard"
    }
    
  6. Anna omat tietosi author-objektiin.

  7. pbiviz.json Tallenna tiedosto.

Päivitä kuvake

  1. Huomaa, että tiedoston assets-objektissa pbiviz.json asiakirja määrittää polun kuvakkeeseen. Kuvake on kuva, joka näkyy Visualisoinnit-ruudussa. Sen on oltava PNG-tiedosto, jonka koko on 20 × 20 kuvapistettä.

  2. Kopioi icon.png Windows Explorerissa tiedosto ja korvaa sillä assets-kansiossa oleva oletustiedosto.

  3. Laajenna assets-kansioVisual Studio Coden Resurssienhallinta-ruudussa ja valitse sitten icon.png tiedosto.

  4. Tarkista kuvake.

    Viz pane image

Visualisoinnin pakkaaminen

  1. Varmista Visual Studio Codessa, että kaikki tiedostot on tallennettu.

  2. Pakkaa mukautettu visualisointi PowerShellissä seuraavalla komennolla.

    pbiviz package
    

Tämä komento luo pbiviz-tiedoston visualisointiprojektisi dist/ -hakemistoon ja korvaa mahdollisesti olemassa olevan aiemman pbiviz-tiedoston .

Dist folder

Paketti sisältää kaiken tarvittavan mukautetun visualisoinnin tuomiseen joko Power BI -palveluun tai Power BI Desktopin raporttiin. Olet nyt paketoinut mukautetun visualisoinnin, ja se on valmis käytettäväksi.

Mukautetun visualisoinnin tuominen

Nyt olet valmis tuomaan Circle Card -visualisoinnin, jotta voit käyttää sitä Power BI raporteissasi. Tuo visualisointitiedosto Power BI visualisointiruutuun noudattamalla ohjeita paikallisesta tietokoneesta Power BIcircleCard.pbiviz:hin.

Virheenkorjaus

Katso vihjeitä mukautetun visualisoinnin virheenkorjauksesta virheenkorjauksen oppaasta.

Seuraavat vaiheet