Visuelle Eigenschaften formatieren
Wenn Sie einen Bericht in Power BI bearbeiten, können Sie jedes visuelle Element im Bericht mithilfe der Option Formatieren im Bereich Visualisierungen anpassen. Sie können viele Elemente jeder Visualisierung anpassen, z. B. Titel, Legende, Hintergrund und QuickInfo. Mit Power BI-Berichtserstellungs-APIs können Sie visuelle Eigenschaften programmgesteuert abrufen, festlegen oder zurücksetzen, ohne dass Power BI Bearbeitungsmodus erforderlich ist.
Um ein visuelles Element mithilfe der VISUELLEn Eigenschaften-APIs zu formatieren, müssen Sie das visuelle Element abrufen, das Sie formatieren möchten. Um eine Liste aller visuellen Elemente in einem Bericht abzurufen, verwenden Sie die getVisuals Methode der Page Klasse.
Auswählen des Formatobjekts und der Eigenschaft
Um die Eigenschaft auszuwählen, die Sie abrufen, festlegen oder zurücksetzen möchten, müssen Sie eine IVisualPropertySelector Instanz definieren, die eine objectName und eine propertyNameenthält.
export interface IVisualPropertySelector {
objectName: string;
propertyName: string;
}
- objectName: der Name des Objekts (z. B. "title").
- propertyName: der Name der Eigenschaft innerhalb des Objekts (z. B. "titleText").
Verfügbare Eigenschaften für out-of-the-box visuals
Vordefinierte visuelle Elemente sind Power BI-Visualisierungen, die standardmäßig im Bereich Visualisierung angezeigt werden.
| Objektname | Eigenschaftenname | Art |
|---|---|---|
| Quickinfo | ||
| sichtbar | Boolesch | |
| valueColor | Hexfarbe, IThemeColorProperty | |
| labelColor | Hexfarbe, IThemeColorProperty | |
| textSize | Zahl | |
| fontFamily | Schnur | |
| backgroundColor | Hexfarbe, IThemeColorProperty | |
| Transparenz | Zahl | |
| Hintergrund | ||
| sichtbar | Boolesch | |
| Farbe | Hexfarbe, IThemeColorProperty | |
| Transparenz | Zahl | |
| visualHeader | ||
| sichtbar | Boolesch | |
| backgroundColor | Hexfarbe, IThemeColorProperty | |
| Grenze | Hexfarbe, IThemeColorProperty | |
| Transparenz | Zahl | |
| iconColor | Hexfarbe, IThemeColorProperty | |
| Grenze | ||
| sichtbar | Boolesch | |
| Farbe | Hexfarbe, IThemeColorProperty | |
| Radius | Zahl | |
| lockAspect | ||
| ermöglichte | Boolesch | |
| Titel | ||
| sichtbar | Boolesch | |
| Ausrichtung | Zeichenfolge (TextAlignment) | |
| fontColor | Hexfarbe, IThemeColorProperty | |
| textSize | Zahl | |
| fontFamily | Schnur | |
| backgroundColor | Hexfarbe, IThemeColorProperty | |
| titleText | Schnur | |
| Legende | ||
| sichtbar | Boolesch | |
| Position | Zeichenfolge (LegendPosition) | |
| dataLabels | ||
| sichtbar | Boolesch | |
| categoryAxis | ||
| sichtbar | Boolesch | |
| valueAxis | ||
| sichtbar | Boolesch |
Verfügbare Eigenschaften für benutzerdefinierte visuelle Elemente
Benutzerdefinierte visuelle Ersteller definieren daher ihre Eigenschaften, um die objectName und propertyNamezu finden, sollten Sie den benutzerdefinierten visuellen Quellcode überprüfen.
Benutzerdefinierter visueller Code ist open sourced, und ihre Repositorys finden Sie auf GitHub.
Beispiel: Wenn Sie sich das benutzerdefinierte visuelle Mekko Chartansehen, finden Sie das Open Source-Repository hier.
In der datei src/visual.ts können Sie die definierten Eigenschaftensehen.
Die Mekko Chart definierten Eigenschaften des benutzerdefinierten visuellen Elements sind unten aufgeführt.
Anmerkung
Diese Liste wurde im Januar 2021 aus dem Mekko Chart Quellcode des benutzerdefinierten visuellen Elements kopiert.
public static Properties: MekkoChartProperties = <MekkoChartProperties>{
dataPoint: {
defaultColor: { objectName: "dataPoint", propertyName: "defaultColor" },
fill: { objectName: "dataPoint", propertyName: "fill" },
showAllDataPoints: { objectName: "dataPoint", propertyName: "showAllDataPoints" },
categoryGradient: { objectName: "dataPoint", propertyName: "categoryGradient" },
colorGradientEndColor: { objectName: "dataPoint", propertyName: "colorGradientEndColor" },
colorDistribution: { objectName: "dataPoint", propertyName: "colorDistribution" }
},
columnBorder: {
show: { objectName: "columnBorder", propertyName: "show", },
color: { objectName: "columnBorder", propertyName: "color" },
width: { objectName: "columnBorder", propertyName: "width" }
},
sortSeries: {
enabled: { objectName: "sortSeries", propertyName: "enabled", },
direction: { objectName: "sortSeries", propertyName: "direction" },
displayPercents: { objectName: "sortSeries", propertyName: "displayPercents" }
},
sortLegend: {
enabled: { objectName: "sortLegend", propertyName: "enabled", },
direction: { objectName: "sortLegend", propertyName: "direction" },
groupByCategory: { objectName: "sortLegend", propertyName: "groupByCategory" },
groupByCategoryDirection: { objectName: "sortLegend", propertyName: "groupByCategoryDirection" }
},
xAxisLabels: {
enableRotataion: { objectName: "xAxisLabels", propertyName: "enableRotataion", },
},
categoryColors: {
color: { objectName: "categoryColors", propertyName: "color" },
}
};
Anmerkung
Das dataPoint-Objekt wird nicht unterstützt.
Definieren des Eigenschaftswerts
Der Eigenschaftswert wird durch ein IVisualPropertyValue-Objekt dargestellt.
export interface IVisualPropertyValue {
schema?: string;
value: any;
}
Schema- – Definiert den Typ des Werts. Es stehen zwei Schemas zur Verfügung:
Eigenschaftenschema:
"http://powerbi.com/product/schema#property"verwendet, um eine Eigenschaft zu definieren.Standardschema:
"http://powerbi.com/product/schema#default"verwendet, um einen Standardwert zu definieren.
Wert - Der Wert, den Sie der Eigenschaft zuweisen möchten.
Eigenschaftswerttypen
In diesem Abschnitt werden die Eigenschaftswerttypen aufgeführt, die Sie konfigurieren können.
Color-Eigenschaftswert
Ein Farbeigenschaftswert kann entweder eine Hexadetailfarbe (Zeichenfolge) sein, z. B. #0000FF für die Farbe Blau, oder ein IThemeColorProperty, um ein Berichtsdesign Farbe festzulegen.
interface IThemeColorProperty {
id: number;
shade: number;
}
- ID – Die ID der Designfarbe
- Shade – Definiert den Prozentsatz der Farbschattierung, die Werte können zwischen -1 und 1 liegen.
Um z. B. Designfarbe 2, 50% dunklerenzu definieren, sollte das IThemeColorProperty-Objekt wie folgt definiert werden:
let themeColorProperty = {
id: 2,
shade: -0.5
};
Wert der Textausrichtungseigenschaft
Definiert die Textausrichtung.
const TextAlignment = {
Left: 'left',
Center: 'center',
Right: 'right',
};
Legendenposition-Eigenschaftswert
Definiert die Legendenposition des visuellen Elements.
const LegendPosition = {
Top: 'Top',
Bottom: 'Bottom',
Right: 'Right',
Left: 'Left',
TopCenter: 'TopCenter',
BottomCenter: 'BottomCenter',
RightCenter: 'RightCenter',
LeftCenter: 'LeftCenter',
};
Standardwert der Eigenschaft
Ein Wert, der zum Definieren des Standardwerts der Eigenschaft verwendet wird. Sie können beispielsweise den Titel auf den automatisch generierten Titel des visuellen Elements festlegen.
interface IDefaultProperty {
}
Wenn eine Eigenschaft nicht geändert wurde (entweder mithilfe der Benutzeroberfläche oder der API), wird der Wert als IDefaultPropertydefiniert , sowohl für die getProperty als auch für die setProperty Methoden.
Der Standardwert der Eigenschaft sollte wie folgt definiert werden:
const defaultValue = {
schema: "http://powerbi.com/product/schema#default",
value: {}
};
Eigenschaften-APIs
In diesem Abschnitt werden die APIs aufgeführt, die zum Formatieren visueller Eigenschaften verwendet werden.
Abrufen einer Eigenschaft
Dient zum Abrufen eines Eigenschaftswerts eines visuellen Elements gemäß der Eigenschaftsauswahl.
getProperty(selector: IVisualPropertySelector): Promise<IVisualPropertyValue>
Zum Beispiel:
const selector = { ... };
let propertyValue = await visual.getProperty(selector);
Festlegen einer Eigenschaft
Legen Sie einen Eigenschaftswert entsprechend der Eigenschaftsauswahl auf ein visuelles Element fest.
setProperty(selector: IVisualPropertySelector, value: IVisualPropertyValue): Promise<void>
Zum Beispiel:
const selector = { ... };
const propertyValue = { ... };
await visual.setProperty(selector, propertyValue);
Zurücksetzen einer Eigenschaft
Setzen Sie einen Eigenschaftswert eines visuellen Elements entsprechend der Eigenschaftsauswahl zurück. Dadurch wird die Eigenschaft auf den Standardwert zurückgegeben, z. B. können Sie den Titel auf den automatisch generierten Titel des visuellen Elements festlegen.
resetProperty(selector: IVisualPropertySelector): Promise<void>
Zum Beispiel:
const selector = { ... };
await visual.resetProperty(selector);
Vollständiges Beispiel
Unten sehen Sie ein Beispiel für die Ausrichtung an der Mitte des Titels des visuellen Elements mit dem Namen VisualContainer1 (eindeutiger Identifer).
let pages = await report.getPages()
// Retrieve the active page.
let activePage = pages.find(function (page) {
return page.isActive
});
let visuals = await activePage.getVisuals();
// Retrieve the wanted visual. (replace "VisualContainer1" with the requested visual name)
let visual = visuals.find(function (visual) {
return visual.name === "VisualContainer1";
});
// Build a selector for title alignment
const selector = {
objectName: "title",
propertyName: "alignment"
};
// Build the property value
const propertyValue = {
schema: "http://powerbi.com/product/schema#property",
value: models.TextAlignment.Center
};
await visual.setProperty(selector, propertyValue);