Anpassen von Berichtsfarben und -modus-Showcase

Die eingebettete Power BI--Design-API definiert und wendet Farbpaletten und andere Formatvorlagen auf Power BI-Berichte an. Verwenden Sie das Designfeature, um benutzerdefinierte Designs für unterschiedliche Berichtsbenutzer anzuwenden oder Benutzern das eigene Aussehen und Verhalten zu ermöglichen.

Die Anpassen von Berichtsfarben und -modus Präsentation im Power BI Embedded Analytics Playground verwendet die Design-API, damit Benutzer beim Anzeigen eines eingebetteten Power BI-Analyseberichts unterschiedliche Farben und Hintergrundmodi auswählen können.

Der Showcase-Bericht verwendet das Designfeature, um:

• Definieren von Berichtsfarbdesigns und Hintergrundmodi.
• Wenden Sie ein bestimmtes Farbdesign beim Laden des Berichts an.
• Ermöglichen Sie Benutzern das Ändern von Designs und Hintergrundmodi während ihrer Berichtsanzeigesitzungen.

Weitere Informationen zu Berichtsdesigns finden Sie unter Verwenden von Berichtsdesigns in Power BI Desktop.

Design-Showcase-Erfahrung

Im Berichtsfarben und -modus anpassen Showcase verwendet ein imaginäres Konglomerat namens Contoso einen eingebetteten Power BI-Bericht, um Geschäftsdaten ihren Projektbeteiligten anzuzeigen. Der eingebettete Bericht wird mit dem Standardfarbendesign und dem angewendeten Standardhintergrundmodus geladen. Alle visuellen Elemente im Bericht verwenden die Designfarben.

Auswählen eines Designs und Modus

Berichtsanzeigen können die Schaltfläche Design auswählen Schaltfläche auswählen, um ein anderes Farbdesign oder einen anderen Modus anzuwenden. Das Design auswählen Dropdownfeld wird geöffnet, wobei die verfügbaren Designnamen und Farbpaletten aufgelistet werden, wobei das aktuelle Design ausgewählt ist.

Viewer können ein anderes Design aus der Liste auswählen und die unmittelbaren Änderungen an Daten, Bezeichnungen und anderen Elementfarben anzeigen. Das ausgewählte Design wirkt sich auf alle eingebetteten visuellen Elemente im Bericht aus.

Viewer können auch dunklen Modus umschalten, um einen dunklen Berichtshintergrund mit hellfarbigem Text zu erzeugen, unabhängig von der Farbdesignauswahl.

Wenn Sie Design auswählen, wird das Dropdownfeld erneut geschlossen, auswählen. Das neue ausgewählte Design und der Hintergrundmodus bleiben während der Berichtsanzeigesitzung wirksam, es sei denn, der Viewer ändert sie erneut.

Design-Showcase-Code

Der Code für die Implementierung der Showcase-Anwendung befindet sich im PowerBI-Embedded-Showcases GitHub-Repository.

• Die HTML-Seite erstellt den Berichtscontainer und Design Schaltfläche und Dialogfeld auswählen und lädt die Designs JSON-Objekte.

• Der Bericht JavaScript den Bericht einbettet, das Standarddesign lädt und die Designwechselerfahrung implementiert.

Definieren von Designs mit JSON-Objekten des Berichtsdesigns

Sie können fast alle Power BI-Formatierungselemente über Berichtsdesign-JSON-Objekteanpassen. Die Showcase-themes.js Datei definiert jsonDataColors Objekte, die verfügbare Farbdesignnamen und -eigenschaften angeben.

Das folgende jsonDataColors-Objekt definiert das Showcase-Tidal Design. Das Sternchen * wendet eine Einstellung global auf alle visuellen Elemente im Bericht an.

const jsonDataColors = [
    ...
{
    "name": "Tidal",
    "dataColors": ["#094782", "#0B72D7", "#098BF5", "#54B5FB", "#71C0A7", "#57B956", "#478F48", "#326633"],
    "tableAccent": "#094782",
    "visualStyles": {
        "*": {
            "*": {
                "background": [{ "show": true, "transparency": 3 }],
                "visualHeader": [{
                    "foreground": { "solid": { "color": "#094782" } },
                    "transparency": 3
                }]
            }
        },
        "group": { "*": { "background": [{ "show": false }] } },
        "basicShape": { "*": { "background": [{ "show": false }] } },
        "image": { "*": { "background": [{ "show": false }] } },
        "page": {
            "*": {
                "background": [{ "transparency": 100 }],
            }
        }
    }
}
    ...
]

Weitere Informationen zum JSON-Objektdateiformat und eigenschaften des Berichtsdesigns finden Sie im JSON-Dateiformat des Berichtsdesigns.

Definieren von Hintergrundmodi

Die themes.js Datei definiert auch themes Objekte, die die Modi "Hell" und "Dunkel" beschreiben. Zum Definieren der Modi "Hell" und "Dunkel", gibt das themes Objekt ein Design mit weißem Hintergrund und ein anderes Design mit kontrastierendem, dunkelfarbigem Hintergrund an. Das Dunkle Hintergrundobjekt legt auch die Werte für andere Struktur- und Textfarben fest, sodass sie vor dem dunklen Hintergrund sichtbar sind.

Anwenden von Designs mit Einbettungskonfiguration und applyTheme

Der Showcase-themeJson Parameter definiert mehrere Farbdesigns. Der eingebettete Bericht JavaScript- verwendet die Report-Klasse applyTheme--Methode, um Designs beim Laden des Berichts und während der Berichtslaufzeit anzuwenden.

Um Designs zu aktivieren, gibt der Bericht Einbettungskonfiguration ein theme Attribut an, wobei ein themeJson Parameter auf das JSON-Objekt des Designs verweist. Die Showcase-Einbettungskonfiguration wendet das design Default an, das datenfarbene ID 0hat, beim Laden des Berichts:

let config = {
    ...
    theme: { themeJson: jsonDataColors[0] },
    };

Wenn der Viewer während der Sitzung ein anderes Design oder einen anderen Modus auswählt, definiert und wendet die applyTheme--Funktion ein neues Designobjekt basierend auf der ausgewählten Datenfarbe und dem ausgewählten Modus an. Der folgende Code zeigt die Showcase-applyTheme Funktion:

async function applyTheme() {

    // Get active data-color ID
    activeDataColorId = Number($("input[name=data-color]:checked", "#theme-dropdown")[0].getAttribute("id").slice(-1));

    // Get the theme state from the slider toggle
    let activeThemeSlider = $("#theme-slider").get(0);

    // Get the index of the theme based on the state of the slider
    // 1 => Dark theme
    // 0 => Light theme
    const themeId = (activeThemeSlider.checked) ? 1 : 0;

    // Create new theme object
    let newTheme = {};

    // Append the data colors and the mode
    $.extend(newTheme, jsonDataColors[activeDataColorId], themes[themeId]);

    // Apply the theme to the report
    await themesShowcaseState.themesReport.applyTheme({ themeJson: newTheme });
}

Verwandte Inhalte

• Anwenden von Berichtsdesigns
• Power BI Embedded Analytics Playground