Uuden muotoiluruudun lisääminen mukautettuun visualisointiin ohjelmointirajapinnan avulla

Tärkeä

Jos haluat lisätä uuden Muotoilu-ruudun mukautettuun visualisointiin, suosittelemme käyttämään formattingmodel-apuohjelmia.

Vaikka suosittelemme käyttämään formattingmodel-apuohjelmia uuden muotoiluruudun kanssa, tässä esimerkissä näytetään, miten voit luoda mukautetun visualisoinnin muotoilumallin, jossa on yksi kortti käyttämällä vain ohjelmointirajapintaa.

Esimerkki: Tietokortin muotoilu

Kortissa on kaksi ryhmää:

• Fontti-ohjausobjektiryhmän yhdellä yhdistelmäominaisuudella
  • Fonttiohjausobjekti
• tietojen suunnitteluryhmän kahdella yksinkertaisella ominaisuudella
  • Fontin väri
  • Rivin tasaus

Lisää ensin objekteja ominaisuustiedostoon:

"objects": {
        "dataCard": {
            "properties": {
                "displayUnitsProperty": {
                    "type":
                    {
                        "formatting": {
                            "labelDisplayUnits": true
                        }
                    }
                },
                "fontSize": { 
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "fontFamily": {
                    "type": {
                        "formatting": {
                            "fontFamily": true
                        }
                    }
                },
                "fontBold": {
                    "type": {
                        "bool": true
                    }
                },
                "fontUnderline": {
                    "type": {
                        "bool": true
                    }
                },
                "fontItalic": {
                    "type": {
                        "bool": true
                    }
                },
                "fontColor": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "lineAlignment": {
                    "type": {
                        "formatting": {
                            "alignment": true
                        }
                    }
                }
            }
        }
    }

Luo sitten getFormattingModel

    public getFormattingModel(): powerbi.visuals.FormattingModel {
        // Building data card, We are going to add two formatting groups "Font Control Group" and "Data Design Group"
        let dataCard: powerbi.visuals.FormattingCard = {
            description: "Data Card Description",
            displayName: "Data Card",
            uid: "dataCard_uid",
            groups: []
        }

        // Building formatting group "Font Control Group"
        // Notice that "descriptor" objectName and propertyName should match capabilities object and property names
        let group1_dataFont: powerbi.visuals.FormattingGroup = {
            displayName: "Font Control Group",
            uid: "dataCard_fontControl_group_uid",
            slices: [
                {
                    uid: "dataCard_fontControl_displayUnits_uid",
                    displayName:"display units",
                    control: {
                        type: powerbi.visuals.FormattingComponent.Dropdown,
                        properties: {
                            descriptor: {
                                objectName: "dataCard",
                                propertyName:"displayUnitsProperty"
                            },
                            value: 0
                        }
                    }
                },
                // FontControl slice is composite slice, It means it contain multiple properties inside it
                {
                    uid: "data_font_control_slice_uid",
                    displayName: "Font",
                    control: {
                        type: powerbi.visuals.FormattingComponent.FontControl,
                        properties: {
                            fontFamily: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontFamily"
                                },
                                value: "wf_standard-font, helvetica, arial, sans-serif"
                            },
                            fontSize: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontSize"
                                },
                                value: 16
                            },
                            bold: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontBold"
                                },
                                value: false
                            },
                            italic: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontItalic"
                                },
                                value: false
                            },
                            underline: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontUnderline"
                                },
                                value: false
                            }
                        }
                    }
                }
            ],
        };
        // Building formatting group "Font Control Group"
        // Notice that "descriptor" objectName and propertyName should match capabilities object and property names
        let group2_dataDesign: powerbi.visuals.FormattingGroup = {
            displayName: "Data Design Group",
            uid: "dataCard_dataDesign_group_uid",
            slices: [
                // Adding ColorPicker simple slice for font color
                {
                    displayName: "Font Color",
                    uid: "dataCard_dataDesign_fontColor_slice",
                    control: {
                        type: powerbi.visuals.FormattingComponent.ColorPicker,
                        properties: {
                            descriptor:
                            {
                                objectName: "dataCard",
                                propertyName: "fontColor"
                            },
                            value: { value: "#01B8AA" }
                        }
                    }
                },
                // Adding AlignmentGroup simple slice for line alignment
                {
                    displayName: "Line Alignment",
                    uid: "dataCard_dataDesign_lineAlignment_slice",
                    control: {
                        type: powerbi.visuals.FormattingComponent.AlignmentGroup,
                        properties: {
                            descriptor:
                            {
                                objectName: "dataCard",
                                propertyName: "lineAlignment"
                            },
                            mode: powerbi.visuals.AlignmentGroupMode.Horizonal,
                            value: "right"
                        }
                    }
                },
            ]
        };

        // Add formatting groups to data card
        dataCard.groups.push(group1_dataFont);
        dataCard.groups.push(group2_dataDesign);

        // Build and return formatting model with data card
        const formattingModel: powerbi.visuals.FormattingModel = { cards: [dataCard] };
        return formattingModel;
    }

Tässä on tuloksena saatava ruutu:

Palauta asetukset oletuksiin

Uudessa muotoiluruudussa on mahdollisuus palauttaa kaikkien muotoilukorttien ominaisuuksien arvot oletusarvoiksi napsauttamalla avoimessa kortissa näkyvää Palauta oletukset -painiketta.

Jos haluat ottaa tämän ominaisuuden käyttöön, lisää luettelo muotoilukortin ominaisuuksista, jotka kuvaavat kortin revertToDefaultDescriptors. Seuraavassa esimerkissä näytetään, miten voit lisätä palauta oletukset -painikkeen:

let dataCard: powerbi.visuals.FormattingCard = {
    displayName: "Data Card",
    // ... card parameters and groups list

    revertToDefaultDescriptors: [
        {
            objectName: "dataCard",
            propertyName:"displayUnitsProperty"
        },
        {
            objectName: "dataCard",
            propertyName: "fontFamily"
        },

        // ... the rest of properties descriptors 
    ]
};

Lisäämällä revertToDefaultDescriptors muotoilukortteihin voit myös palauttaa kaikki muotoilukorttien ominaisuudet kerralla napsauttamalla palauta kaikki asetukset oletusasetuksiin -painike muotoiluruudun yläpalkissa:

Muotoiluominaisuuden valitsin

Muotoiluominaisuudet-kuvaajan valinnainen valitsin määrittää, mihin kukin ominaisuus sidotaan dataView-kohteessa. Eri vaihtoehtoja on neljä. Lue lisää objektien valitsintyypeistä.

Lokalisointi

Lisätietoja lokalisointiominaisuudesta ja lokalisointiympäristön määrittämisestä on ohjeaiheessa Paikallisen kielen lisääminen Power BI -visualisointiin Lokalisointien hallinnan käyttäminen lokalisoitaviin osiin:

displayName: this.localization.getDisplayName("Font_Color_DisplayNameKey");
description: this.localization.getDisplayName("Font_Color_DescriptionKey");

Muotoilumallin apuohjelmien lokalisoinnin.

GitHub-resurssit

• Kaikki muotoilumallien käyttöliittymät löytyvät GitHub – microsoft/powerbi-visuals-api: Power BI:n mukautettujen visualisointien ohjelmointirajapinta kohteessa formatting-model-api.d.ts.

• Suosittelemme käyttämään uutta muotoilumallin apuohjelmaa osoitteessa GitHub – microsoft/powerbi-visuals-utils-formattingmodel: Power BI -visualisointien muotoilumallin apuohjelmat

• Löydät esimerkin mukautetusta visualisoinnista, SampleBarChart-, joka käyttää ohjelmointirajapinnan versiota 5.1.0 ja toteuttaa getFormattingModel uuden muotoilumallin apuohjelmien avulla osoitteessa GitHub – microsoft/PowerBI-visuals-sampleBarChart: Palkkikaavion mukautettu visualisointi opetusohjelmaa varten.

Aiheeseen liittyvä sisältö

Onko sinulla kysyttävää? Kysy Power BI -yhteisöltä -