Personnaliser les couleurs et la présentation du mode de rapport

L’API de thème power BI incorporée définit et applique des palettes de couleurs et d’autres styles aux rapports Power BI. Utilisez la fonctionnalité thèmes pour appliquer des thèmes personnalisés à différents utilisateurs de rapports ou laisser les utilisateurs choisir leur propre apparence.

Le Personnaliser les couleurs et le mode de rapport présentation dans le terrain de jeu d’analytique incorporée Power BI utilise l’API de thème pour permettre aux utilisateurs de choisir différentes couleurs et modes d’arrière-plan lors de l’affichage d’un rapport d’analytique incorporée Power BI.

Le rapport de présentation utilise la fonctionnalité de thème pour :

• Définissez les thèmes de couleur de rapport et les modes d’arrière-plan.
• Appliquez un thème de couleur spécifique au chargement du rapport.
• Permettre aux utilisateurs de modifier les thèmes et les modes d’arrière-plan pendant leurs sessions d’affichage de rapport.

Pour plus d’informations sur les thèmes de rapport, consultez Utiliser des thèmes de rapport dans Power BI Desktop.

Expérience de présentation de thème

Dans le Personnaliser les couleurs et le mode de rapport présentation, un groupe imaginaire nommé Contoso utilise un rapport incorporé Power BI pour afficher les données métier à leurs parties prenantes. Le rapport incorporé se charge avec le thème de couleur par défaut et le mode d’arrière-plan par défaut appliqués. Tous les visuels du rapport utilisent les couleurs de thème.

Sélectionner un thème et un mode

Les visionneuses de rapports peuvent sélectionner le bouton Choisir un thème pour appliquer un autre thème ou mode de couleur. La Choisir un thème zone de liste déroulante s’ouvre, répertoriant les noms de thème disponibles et les palettes de couleurs, avec le thème actuel sélectionné.

Les visionneuses peuvent sélectionner un thème différent dans la liste et voir les modifications immédiates des données, des étiquettes et d’autres couleurs d’élément. Le thème sélectionné affecte tous les visuels incorporés dans le rapport.

Les visionneuses peuvent également basculer mode Sombre pour produire un arrière-plan de rapport foncé avec du texte de couleur claire, indépendamment de la sélection du thème de couleur.

La sélection de Choisir un thème ferme à nouveau la zone de liste déroulante. Le nouveau thème sélectionné et le mode d’arrière-plan restent en vigueur pendant la session d’affichage du rapport, sauf si la visionneuse les modifie à nouveau.

Code de présentation de thème

Le code d’implémentation de l’application de présentation se trouve dans le dépôt PowerBI-Embedded-Showcases GitHub.

• La page HTML génère le conteneur de rapports et Choisir un thème bouton et une boîte de dialogue, puis charge les objets JSON thèmes.

• Le rapport JavaScript incorpore le rapport, charge le thème par défaut et implémente l’expérience de basculement de thème.

Définir des thèmes avec des objets JSON de thème de rapport

Vous pouvez personnaliser presque tous les éléments de mise en forme Power BI via des objets JSON de thème de rapport . Le fichier de présentation themes.js définit jsonDataColors objets qui spécifient les noms et propriétés de thème de couleur disponibles.

L’objet jsonDataColors suivant définit le thème Tidal de présentation. L’astérisque * applique un paramètre globalement à tous les visuels du rapport.

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 }],
            }
        }
    }
}
    ...
]

Pour plus d’informations sur le format et les propriétés du fichier objet JSON du thème de rapport, consultez format de fichier JSON du thème de rapport.

Définir des modes d’arrière-plan

Le fichier themes.js définit également themes objets qui décrivent les modes d’arrière-plan clair et sombre. Pour définir des modes d’arrière-plan clair et sombre, l’objet themes spécifie un thème avec un arrière-plan blanc et un autre thème avec un arrière-plan contrasté, couleur foncée. L’objet d’arrière-plan foncé définit également les valeurs d’autres couleurs structurelles et textuelles afin qu’elles soient visibles sur l’arrière-plan sombre.

Appliquer des thèmes avec la configuration incorporée et appliquerTheme

Le paramètre de présentation themeJson définit plusieurs thèmes de couleur. Le rapport incorporé javaScript utilise la classe Report applyTheme méthode pour appliquer des thèmes sur la charge du rapport et pendant l’exécution du rapport.

Pour activer les thèmes, le rapport incorporer la configuration spécifie un attribut theme, avec un paramètre themeJson pointant vers l’objet JSON de thèmes. La configuration d’incorporation de la vitrine applique le thème Default, qui a un ID de couleur de données 0, lors du chargement du rapport :

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

Si la visionneuse sélectionne un thème ou un mode différent pendant sa session, la fonction applyTheme définit et applique un nouvel objet de thème en fonction de la couleur et du mode de données sélectionnés. Le code suivant montre la fonction de présentation applyTheme :

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 });
}

Contenu connexe

• Appliquer des thèmes de rapport
• De terrain de jeu Power BI Embedded Analytics