Pridanie novej tably formátu do vlastného vizuálu pomocou rozhrania API
Dôležitý
Ak chcete pridať novú tablu Formát do vlastného vizuálu, odporúčame použiť pomôcky pre formattingmodel.
Napriek tomu, že odporúčame používať pomôcky formátovaniamodelu s novou tablou formátu, tento príklad ukazuje, ako vytvoriť model formátovania vlastného vizuálu s jednou kartou len pomocou rozhrania API.
Príklad: Formátovanie karty údajov
Karta má dve skupiny:
-
skupina Ovládací prvok písma s jednou zloženou vlastnosťou
- Ovládací prvok Písma
-
skupina návrhu údajov s dvoma jednoduchými vlastnosťami
- Farba písma
- Zarovnanie čiar
Najskôr pridajte objekty do súboru možností:
"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
}
}
}
}
}
}
Potom vytvorte 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;
}
Toto je výsledná tabla:
Obnovenie predvolených nastavení
Nová tabla formátu obsahuje možnosť obnoviť predvolené hodnoty všetkých vlastností karty formátovania kliknutím na Obnoviť predvolené tlačidlo, ktoré sa zobrazí na otvorenej karte.
Ak chcete povoliť túto funkciu, pridajte zoznam vlastností karty formátovania popisovačov na formátovanie karty revertToDefaultDescriptors.
Nasledujúci príklad ukazuje, ako pridať obnoviť predvolené tlačidlo:
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
]
};
Pridanie revertToDefaultDescriptors do formátovacích kariet tiež umožňuje obnoviť všetky vlastnosti kariet formátovania naraz kliknutím na obnoviť všetky nastavenia na predvolené tlačidlo v hornom paneli tably formátu:
Výber vlastností formátovania
Voliteľný selektor v popisovači vlastností formátovania určuje, kam sa každá vlastnosť v zobrazení údajov dataView viaže. K dispozícii sú štyri rôzne možnosti. Prečítajte si o nich v typoch selektorov objektov .
Lokalizácia
Ďalšie informácie o funkcii lokalizácie a nastavení lokalizačného prostredia nájdete Pridanie lokálneho jazyka do vizuálu Power BI Pomocou správcu lokalizácie môžete formátovať komponenty, ktoré chcete lokalizovať:
displayName: this.localization.getDisplayName("Font_Color_DisplayNameKey");
description: this.localization.getDisplayName("Font_Color_DescriptionKey");
Ak chcete lokalizovať pomôcky pre model formátovania lokalizáciu pomôcok formátovania.
Zdroje GitHubu
Všetky rozhrania modelu formátovania nájdete v službe GitHub – microsoft/powerbi-visuals-api: rozhranie API vlastných vizuálov služby Power BI v časti "formatting-model-api.d.ts".
Odporúčame používať nové pomôcky formátovania modelu na lokalite GitHub – microsoft/powerbi-visuals-utils-formattingmodel: Pomôcky pre pomocné pomôcky modelu pre vizuály služby Power BI
Môžete nájsť príklad vlastného vizuálu SampleBarChart, ktorý používa rozhranie API verzie 5.1.0 a implementuje
getFormattingModelpomocou nových pomôcok modelu formátovania na GitHub - microsoft/PowerBI-visuals-sampleBarChart: Vlastný vizuál pruhového grafu pre kurz.
Súvisiaci obsah
Máte ďalšie otázky? spýtajte sa komunity Power BI