Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
La API de tema insertada de Power BI define y aplica paletas de colores y otros estilos a informes de Power BI. Use la característica de temas para aplicar temas personalizados para distintos usuarios del informe o para permitir que los usuarios elijan su propia apariencia.
El
El informe de presentación usa la característica de tema para:
- Defina los temas de color de informe y los modos de fondo.
- Aplique un tema de color específico en la carga del informe.
- Permitir que los usuarios cambien los temas y los modos en segundo plano durante sus sesiones de visualización de informes.
Para obtener más información sobre los temas de informe, consulte Uso de temas de informe en Power BI Desktop.
Experiencia de presentación de temas
En la Personalizar los colores y el modo de informe presentación, un grupo imaginario denominado Contoso usa un informe insertado de Power BI para mostrar los datos empresariales a sus partes interesadas. El informe incrustado se carga con el tema de color predeterminado y el modo de fondo predeterminado aplicado. Todos los objetos visuales del informe usan los colores del tema.
Seleccionar un tema y un modo
Los visores de informes pueden seleccionar el botón Elegir tema para aplicar un tema o modo de color diferente. Se abre el cuadro desplegable Elegir tema, enumerando los nombres de tema disponibles y las paletas de colores, con el tema actual seleccionado.
Los visores pueden seleccionar un tema diferente de la lista y ver los cambios inmediatos en los datos, la etiqueta y otros colores de elementos. El tema seleccionado afecta a todos los objetos visuales incrustados del informe.
Los visores también pueden alternar modo oscuro para generar un fondo de informe oscuro con texto de color claro, independientemente de la selección del tema de color.
Al seleccionar Elija tema de nuevo, se cierra el cuadro desplegable. El nuevo tema seleccionado y el modo de fondo permanecen en vigor durante la sesión de visualización de informes, a menos que el visor los cambie de nuevo.
Código de presentación de temas
El código para implementar la aplicación de presentación se encuentra en el repositorio PowerBI-Embedded-Showcases GitHub.
La página HTML de compila el contenedor de informes y el botón Elegir tema y el cuadro de diálogo, y carga los objetos JSON temas.
El informe de JavaScript inserta el informe, carga el tema predeterminado e implementa la experiencia de cambio de tema.
Definición de temas con objetos JSON de tema de informe
Puede personalizar casi todos los elementos de formato de Power BI a través de objetos JSON del tema de informe. El archivo themes.js presentación define jsonDataColors objetos que especifican propiedades y nombres de tema de color disponibles.
El siguiente objeto jsonDataColors define el tema Tidal presentación. El asterisco * aplica una configuración global a todos los objetos visuales del informe.
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 obtener más información sobre el formato y las propiedades del archivo JSON del tema de informe, consulte formato de archivo JSON del tema de informe.
Definir modos de fondo
El archivo themes.js también define themes objetos que describen los modos de fondo Claro y Oscuro. Para definir los modos de fondo Claro y Oscuro, el objeto themes especifica un tema con un fondo blanco y otro tema con un fondo de color oscuro contrastante. El objeto de fondo oscuro también establece los valores de otros colores estructurales y de texto para que sean visibles en el fondo oscuro.
Aplicar temas con la configuración de inserción y aplicarTheme
El parámetro themeJson de presentación define varios temas de color. El informe incrustado javaScript usa la clase Report método applyTheme para aplicar temas en la carga del informe y durante el tiempo de ejecución del informe.
Para habilitar temas, el informe insertar la configuración especifica un atributo theme, con un parámetro themeJson que apunta al objeto JSON de temas. La configuración de inserción de presentación aplica el tema Default, que tiene el identificador de color de datos 0, en la carga del informe:
let config = {
...
theme: { themeJson: jsonDataColors[0] },
};
Si el visor selecciona un tema o modo diferente durante su sesión, la función applyTheme define y aplica un nuevo objeto de tema basado en el color y el modo de datos seleccionados. En el código siguiente se muestra la función applyTheme de presentación:
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 });
}
Contenido relacionado
- Aplicar temas de informe
- de
área de juegos de Análisis insertado de Power BI