Настройка цветов отчета и демонстрации режима

API темы Power BI embedded определяет и применяет цветовую палитру и другие стили к отчетам Power BI. Используйте функцию тем, чтобы применить настраиваемые темы для разных пользователей отчета или позволить пользователям выбирать свой внешний вид и чувствовать себя.

В настройка цветов отчетов и режима демонстрация в игровой площадке Power BI Embedded Analytics использует API темы, чтобы пользователи могут выбирать различные цвета и фоновые режимы при просмотре отчета встроенной аналитики Power BI.

В демонстрационном отчете используется функция темы для:

• Определите цветовые темы отчета и фоновые режимы.
• Примените определенную цветовую тему к загрузке отчета.
• Разрешить пользователям изменять темы и фоновые режимы во время сеансов просмотра отчета.

Дополнительные сведения о темах отчетов см. в разделе Использование тем отчетов в Power BI Desktop.

Демонстрация темы

В настройка цветов отчетов и режима демонстрации воображаемого конгломерата с именем Contoso использует внедренный отчет Power BI для отображения бизнес-данных заинтересованным лицам. Внедренный отчет загружается с примененной цветовой темой по умолчанию и режимом фона по умолчанию. Все визуальные элементы в отчете используют цвета темы.

Выбор темы и режима

Средства просмотра отчетов могут выбрать кнопку Выбрать тему, чтобы применить другую цветовую тему или режим. Откроется раскрывающееся окно выбор темы, в котором перечислены доступные имена тем и цветовая палитра, с выбранной текущей темой.

Средства просмотра могут выбрать другую тему из списка и увидеть немедленные изменения в данных, метках и других цветах элементов. Выбранная тема влияет на все внедренные визуальные элементы в отчете.

Средства просмотра также могут переключать темный режим для создания фона темного отчета с светло-цветным текстом, независимо от выделения цветовой темы.

Если выбрать выбрать тему, снова закрывает раскрывающийся список. Новая выбранная тема и фоновый режим остаются в силе во время сеанса просмотра отчета, если средство просмотра не изменит их снова.

Код демонстрации темы

Код реализации демонстрационного приложения находится в репозитории PowerBI-Embedded-Showcases GitHub.

• HTML-страница создает контейнер отчета и кнопку "Выбрать тему" и диалоговое окно, а также загружает объекты JSON тем.

• Отчет JavaScript внедряет отчет, загружает тему по умолчанию и реализует интерфейс переключения тем.

Определение тем с помощью объектов JSON темы отчета

Вы можете настроить почти все элементы форматирования Power BI с помощью объектов JSON темы отчета. В файле демонстрации themes.js определяются объекты jsonDataColors, указывающие доступные имена цветовой темы и свойства.

Следующий объект jsonDataColors определяет демонстрацию Tidal темы. Звездочка * применяет параметр глобально ко всем визуальным элементам отчета.

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

Дополнительные сведения о формате и свойствах файла объекта JSON темы отчета см. в формате JSON-файла отчета.

Определение фоновых режимов

Файл themes.js также определяет объекты themes, описывающие режимы фона "Свет" и "Темная". Чтобы определить режимы светлого и темного фона, объект themes задает одну тему с белым фоном, а другая тема с контрастным, темным цветом фона. Объект темного фона также задает значения для других структурных и текстовых цветов, чтобы они были видимы на темном фоне.

Применение тем с конфигурацией внедрения и применениемTheme

Демонстрация themeJson параметр определяет несколько цветовых тем. Внедренный отчет JavaScript использует класс отчетов применить метод Theme для применения тем к нагрузке отчета и во время выполнения отчета.

Чтобы включить темы, отчет внедрить конфигурацию задает атрибут theme с параметром themeJson, указывающим на объект JSON тем. Конфигурация внедрения демонстрации применяет тему Default, которая имеет идентификатор цвета данных 0при загрузке отчета:

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

Если средство просмотра выбирает другую тему или режим во время сеанса, функция applyTheme определяет и применяет новый объект темы на основе выбранного цвета данных и режима. В следующем коде показана функция демонстрации 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 });
}

Связанное содержимое

• Применить темы отчета
• игровой площадки Power BI Embedded Analytics