Jaa

Opetusohjelma: Muotoiluasetusten lisääminen Circle Card -visualisointiin

  • Artikkeli

Kun luot visualisoinnin, voit lisätä vaihtoehtoja sen ominaisuuksien mukauttamiseen. Seuraavassa on joitakin mukautettavia kohteita:

  • Title
  • Tausta
  • Border
  • Varjostus
  • Värit

Tässä opetusohjelmassa opit:

  • Lisää muotoiluominaisuudet visualisointiin.
  • Visualisoinnin pakkaaminen
  • Mukautetun visualisoinnin tuominen Power BI Desktop- tai Service-raporttiin

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 pyöreä kortti -projektikansiota, jonka loit tässä opetusohjelmassa, tee opetusohjelma uudelleen ennen jatkamista.

Muotoiluasetusten lisääminen

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

    pbiviz start

  2. Valitse Power BI:ssä Muotoilu-ruutu.

    Sinun pitäisi nähdä yleiset muotoiluasetukset, mutta et visualisoinnin muotoiluasetuksia.

    Screenshot of formatting panel with only general formatting options.

  3. Avaa tiedosto Visual Studio Codessacapabilities.json.

  4. Lisää objektit ennen dataViewMappings-matriisia.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. capabilities.json Tallenna tiedosto.

  6. Tarkista Power BI:ssä muotoiluasetukset uudelleen.

    Muistiinpano

    Jos et näe muotoiluasetusten muuttuvan, valitse Lataa mukautettu visualisointi uudelleen.

    Screenshot of general and visual formatting options on the formatting pane.

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

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Mukautettujen muotoiluasetusten lisääminen

Nyt lisätään uusi ryhmä nimeltä Väri , jonka avulla määritetään ympyrän ääriviivan ympyrän väri ja paksuus.

  1. Pysäytä mukautettu visualisointi painamalla PowerShellissä Ctrl C-näppäinyhdistelmää+.

  2. Lisää Visual Studio Codessa -tiedostoon capabilities.json seuraava JSON-koodiosa objekteihin merkittyihin objekteihin.

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

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

  3. capabilities.json Tallenna tiedosto.

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

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

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

    Tämä moduuli määrittää kaksi luokkaa. Circle Asetukset-luokka määrittää kaksi ominaisuutta, joiden nimet vastaavat capabilities.json-tiedostossa määritettyjä objekteja (circleColor ja circleThickness), ja asettaa oletusarvot. Visualisointi Asetukset luokka määrittää ympyräobjektin tiedostossa capabilities.json kuvattujen ominaisuuksien mukaan.

  6. settings.ts Tallenna tiedosto.

  7. Avaa visual.ts-tiedosto.

  8. visual.ts Tuo tiedostoon :

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

    ja lisää Visual-luokkaan seuraavat ominaisuudet:

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Tämä ominaisuus sisältää viittauksen visualisointi Asetukset objektiin, joka kuvaa visualisoinnin asetuksia.

  9. Lisää Visual-luokkaan seuraava konstruktorin ensimmäisenä rivinä:

    this.formattingSettingsService = new FormattingSettingsService();

  10. Lisää Visual-luokkaan seuraava menetelmä päivitysmenetelmän jälkeen.

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

    Tätä funktiota kutsutaan jokaisen muotoiluruudun hahmonnon kohdalla. Sen avulla voit valita, mitkä objektit ja ominaisuudet haluat näyttää käyttäjille ominaisuusruudussa.

  11. Lisää seuraava koodi päivitysmenetelmään sädemuuttujan esittelyn jälkeen.

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

    Tämä koodi noutaa muotoiluasetukset. Se säätää mitä tahansa circleThickness-ominaisuuteen välitettyä arvoa ja muuntaa sen luvuksi nollan ja 10 välillä.

    Screenshot of setting circle thickness to between zero and 10.

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

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

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

    Screenshot of circle elements.

  13. visual.ts Tallenna tiedosto.

  14. Käynnistä visualisointi PowerShellissä.

    pbiviz start

  15. Valitse Power BI:ssä visualisoinnin päällä olevalta irrallvalta työkalurivilta Automaattinen uudelleenlataus käytössä tai ei käytössä.

    Screenshot of Toggle Auto Reload icon.

  16. Laajenna Ympyrä-kohta visualisoinnin muotoiluasetuksissa.

    Screenshot of the final circle card visuals format pane elements.

    Muokkaa väri- ja paksuusasetusta.

Muokkaa paksuusasetuksen arvoksi on pienempi kuin nolla ja arvo, joka on suurempi kuin 10. Huomaa, että visualisointi päivittää arvon sietämättömään vähimmäis- tai enimmäisarvoon.

Virheenkorjaus

Lisätietoja mukautetun visualisoinnin virheenkorjauksesta on virheenkorjauksen oppaassa.

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.

Kun visualisointi on valmis, noudata ohjeita kohdassa Power BI -visualisoinnin pakkaaminen ja voit halutessasi jakaa sen muiden kanssa, jotta he voivat tuoda sen ja nauttia siitä.

Liittyvä sisältö