Personalizar as cores do relatório e a exibição do modo

A API de tema integrada do Power BI define e aplica paletas de cores e outros estilos a relatórios do Power BI. Use o recurso de temas para aplicar temas personalizados para diferentes usuários de relatório ou para permitir que os usuários escolham sua própria aparência.

O Personalizar cores de relatório e modo demonstração no playground de análise integrada do Power BI usa a API de tema para permitir que os usuários escolham diferentes cores e modos de tela de fundo ao exibir um relatório de análise integrada do Power BI.

O relatório de demonstração usa o recurso de tema para:

• Defina temas de cor do relatório e modos de plano de fundo.
• Aplique um tema de cor específico na carga do relatório.
• Permitir que os usuários alterem temas e modos em segundo plano durante as sessões de exibição de relatório.

Para obter mais informações sobre temas de relatório, consulte Usar temas de relatório no Power BI Desktop.

Experiência de demonstração de tema

No Personalizar cores de relatório e modo demonstração, um conglomerado imaginário chamado Contoso usa um relatório inserido do Power BI para mostrar dados de negócios para seus stakeholders. O relatório inserido é carregado com o tema de Padrão cor e o modo de plano de fundo padrão aplicados. Todos os visuais no relatório usam as cores do tema.

Selecionar um tema e um modo

Os visualizadores de relatório podem selecionar o botão Escolher tema para aplicar um tema ou modo de cor diferente. A caixa suspensa Escolher tema abre, listando os nomes de tema e paletas de cores disponíveis, com o tema atual selecionado.

Os visualizadores podem selecionar um tema diferente na lista e ver as alterações imediatas em dados, rótulo e outras cores de elemento. O tema selecionado afeta todos os visuais inseridos no relatório.

Os visualizadores também podem alternar modo escuro para produzir um plano de fundo de relatório escuro com texto de cor clara, independentemente da seleção de tema de cor.

Selecionar Escolher tema fecha novamente a caixa suspensa. O novo tema selecionado e o modo de tela de fundo permanecem em vigor durante a sessão de exibição do relatório, a menos que o visualizador os altere novamente.

Código de exibição de tema

O código para implementar o aplicativo de demonstração está no repositório PowerBI-Embedded-Showcases GitHub.

• A página HTML cria o contêiner de relatório e Escolher o tema botão e a caixa de diálogo e carrega os objetos JSON de temas .

• O relatório JavaScript inseri o relatório, carrega o tema padrão e implementa a experiência de alternância de tema.

Definir temas com objetos JSON de tema de relatório

Você pode personalizar quase todos os elementos de formatação do Power BI por meio de objetos JSON de tema de relatório . O arquivo de themes.js de exibição define jsonDataColors objetos que especificam nomes e propriedades de tema de cores disponíveis.

O objeto jsonDataColors a seguir define a exibição Tidal tema. O asterisco * aplica uma configuração globalmente a todos os visuais no relatório.

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

Para obter mais informações sobre o formato e as propriedades do arquivo de objeto JSON do tema do relatório, consulte formato de arquivo JSON do tema relatório.

Definir modos em segundo plano

O arquivo themes.js também define themes objetos que descrevem os modos de fundo Claro e Escuro. Para definir modos de fundo Claro e Escuro, o objeto themes especifica um tema com um plano de fundo branco e outro tema com um plano de fundo contrastante e de cor escura. O objeto de plano de fundo escuro também define os valores de outras cores estruturais e de texto para que fiquem visíveis no plano de fundo escuro.

Aplicar temas com a configuração de inserção e aplicarTheme

A demonstração themeJson parâmetro define vários temas de cor. O relatório inserido JavaScript usa a classe De relatório método applyTheme para aplicar temas na carga do relatório e durante o runtime do relatório.

Para habilitar temas, o relatório a configuração de inserção especifica um atributo theme, com um parâmetro themeJson apontando para o objeto JSON de temas. A configuração de inserção de demonstração aplica o tema Default, que tem 0de ID de cor de dados, na carga do relatório:

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

Se o visualizador selecionar um tema ou modo diferente durante a sessão, a função applyTheme definirá e aplicará um novo objeto de tema com base na cor e no modo de dados selecionados. O código a seguir mostra a função applyTheme de exibição:

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

Conteúdo relacionado

• Aplicar temas de relatório
• do Power BI Embedded Analytics Playground