Προσθήκη του τμήματος παραθύρου νέας μορφοποίησης σε μια προσαρμοσμένη απεικόνιση με χρήση API
Σημαντικός
Για να προσθέσετε το νέο τμήμα παραθύρου Μορφοποίηση σε μια προσαρμοσμένη απεικόνιση, συνιστούμε να χρησιμοποιήσετε τα βοηθητικά προγράμματα μορφοποίησης .
Παρόλο που συνιστούμε τη χρήση του formattingmodel utils με το νέο τμήμα παραθύρου μορφοποίησης, αυτό το παράδειγμα παρουσιάζει πώς μπορείτε να δημιουργήσετε ένα μοντέλο μορφοποίησης προσαρμοσμένης απεικόνισης με μία κάρτα που χρησιμοποιεί μόνο το API.
Παράδειγμα: Μορφοποίηση κάρτας δεδομένων
Η κάρτα έχει δύο ομάδες:
-
ελέγχου γραμματοσειράς με μία σύνθετη ιδιότητα
- Στοιχείο ελέγχου "Γραμματοσειρά"
- ομάδας σχεδίασης δεδομένων
με δύο απλές ιδιότητες - Χρώμα γραμματοσειράς
- Στοίχιση γραμμής
Πρώτα, προσθέστε αντικείμενα στο αρχείο δυνατοτήτων:
"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
}
}
}
}
}
}
Στη συνέχεια, δημιουργήστε το 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;
}
Ακολουθεί το τμήμα παραθύρου που προκύπτει:
Επαναφορά προεπιλογών ρυθμίσεων
Το τμήμα παραθύρου νέας μορφής έχει την επιλογή επαναφοράς όλων των τιμών ιδιοτήτων κάρτας μορφοποίησης στην προεπιλογή, κάνοντας κλικ στο κουμπί Επαναφορά προεπιλογών που εμφανίζεται στην ανοιχτή κάρτα.
Για να ενεργοποιήσετε αυτήν τη δυνατότητα, προσθέστε μια λίστα με περιγραφές ιδιοτήτων κάρτας μορφοποίησης σε revertToDefaultDescriptorsκάρτας μορφοποίησης .
Το παρακάτω παράδειγμα δείχνει πώς μπορείτε να προσθέσετε το επαναφοράς στην προεπιλεγμένη κουμπί:
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
]
};
Η προσθήκη revertToDefaultDescriptors σε κάρτες μορφοποίησης επιτρέπει επίσης την επαναφορά όλων των ιδιοτήτων καρτών μορφοποίησης ταυτόχρονα, κάνοντας κλικ στο επαναφορά όλων των ρυθμίσεων στο προεπιλεγμένο κουμπί στην επάνω γραμμή του παραθύρου μορφοποίησης:
Επιλογέας ιδιοτήτων μορφοποίησης
Ο προαιρετικός επιλογέας στην περιγραφή ιδιοτήτων μορφοποίησης προσδιορίζει το σημείο σύνδεσης κάθε ιδιότητας στο dataView. Υπάρχουν τέσσερις ξεχωριστές επιλογές. Διαβάστε σχετικά με αυτές στους τύπους επιλογέων αντικειμένων .
Εντοπισμός
Για περισσότερες πληροφορίες σχετικά με τη δυνατότητα τοπικής προσαρμογής και για να ρυθμίσετε ένα περιβάλλον τοπικής προσαρμογής, ανατρέξτε στο θέμα Προσθήκη τοπικής γλώσσας στην απεικόνισή σας Power BI Χρησιμοποιήστε τη διαχείριση τοπικής προσαρμογής για να μορφοποιήσετε τα στοιχεία που θέλετε να μεταφρασετε:
displayName: this.localization.getDisplayName("Font_Color_DisplayNameKey");
description: this.localization.getDisplayName("Font_Color_DescriptionKey");
Για να τοπικοποιήσετε βοηθητικά προγράμματα μοντέλου μορφοποίησης τοπική προσαρμογή βοηθητικών προγραμμάτων μορφοποίησης.
Πόροι GitHub
Μπορείτε να βρείτε όλες τις διασυνδέσεις μοντέλου μορφοποίησης σε GitHub - microsoft/powerbi-visuals-api: API προσαρμοσμένων απεικονίσεων Power BI στο "formatting-model-api.d.ts"
Συνιστούμε τη χρήση των νέων βοηθητικών προγραμμάτων μοντέλου μορφοποίησης στο GitHub - microsoft/powerbi-visuals-utils-formattingmodel: Απεικονίσεις Power BI που μορφοποιούν βοηθητικά προγράμματα
Μπορείτε να βρείτε ένα παράδειγμα προσαρμοσμένης απεικόνισης SampleBarChart που χρησιμοποιεί την έκδοση API 5.1.0 και υλοποιεί
getFormattingModelχρησιμοποιώντας τα νέα βοηθητικά προγράμματα μοντέλου μορφοποίησης στο GitHub - microsoft/PowerBI-visuals-sampleBarChart: Προσαρμοσμένη απεικόνιση γραφήματος ράβδων για εκπαιδευτικό βοήθημα.
Σχετικό περιεχόμενο
Έχετε περισσότερες ερωτήσεις; Ρωτήστε το της κοινότητας του Power BI