Dostosowywanie kolorów i prezentacji w trybie raportu

Osadzony interfejs API motywu usługi Power BI definiuje i stosuje palety kolorów oraz inne style do raportów usługi Power BI. Funkcja motywów umożliwia stosowanie niestandardowych motywów dla różnych użytkowników raportów lub umożliwianie użytkownikom wybierania własnego wyglądu i działania.

Dostosowywanie kolorów i trybu raportu prezentacji w osadzonej analizy usługi Power BI używa interfejsu API motywu, aby umożliwić użytkownikom wybieranie różnych kolorów i trybów tła podczas wyświetlania raportu osadzonej analizy usługi Power BI.

Raport prezentacji używa funkcji motywu do:

• Zdefiniuj motywy kolorów raportu i tryby tła.
• Zastosuj konkretny motyw kolorów podczas ładowania raportu.
• Zezwalaj użytkownikom na zmienianie motywów i trybów tła podczas sesji wyświetlania raportu.

Aby uzyskać więcej informacji na temat motywów raportów, zobacz Używanie motywów raportów w programie Power BI Desktop.

Pokaz motywów

W Dostosowywanie kolorów i trybu raportu prezentacji, wyimaginowany konglomerat o nazwie Contoso używa osadzonego raportu usługi Power BI do wyświetlania danych biznesowych uczestnikom projektu. Osadzony raport jest ładowany z domyślnym motywem kolorów i zastosowanym domyślnym trybem tła. Wszystkie wizualizacje w raporcie używają kolorów motywu.

Wybieranie motywu i trybu

Osoby przeglądające raport mogą wybrać przycisk Wybierz motyw, aby zastosować inny motyw lub tryb kolorów. Zostanie otwarte pole rozwijane Wybierz motyw z listą dostępnych nazw motywów i palet kolorów z wybranym bieżącym motywem.

Osoby przeglądające mogą wybrać inny motyw z listy i zobaczyć natychmiastowe zmiany w danych, etykiecie i innych kolorach elementów. Wybrany motyw ma wpływ na wszystkie osadzone wizualizacje w raporcie.

Osoby przeglądające mogą również przełączać tryb ciemny w celu utworzenia ciemnego tła raportu z jasnym tekstem, niezależnie od zaznaczenia motywu kolorów.

Wybranie Wybierz motyw ponownie zamyka pole listy rozwijanej. Nowy wybrany motyw i tryb tła pozostają w mocy podczas sesji wyświetlania raportu, chyba że osoba przeglądająca zmieni je ponownie.

Kod prezentacji motywu

Kod implementowania aplikacji pokazowej znajduje się w repozytorium PowerBI-Embedded-Showcases GitHub.

• Strona HTML kompiluje kontener raportu i Wybierz motyw i okno dialogowe oraz ładuje obiekty JSON motywów .

• Raport JavaScript osadza raport, ładuje motyw domyślny i implementuje środowisko przełączania motywu.

Definiowanie motywów za pomocą obiektów JSON motywu raportu

Możesz dostosować prawie wszystkie elementy formatowania usługi Power BI za pomocą obiektów JSON motywu raportu . Plik themes.js prezentacji definiuje obiekty jsonDataColors, które określają dostępne nazwy motywów kolorów i właściwości.

Poniższy obiekt jsonDataColors definiuje motyw Tidal prezentacji. Gwiazdka * stosuje ustawienie globalnie do wszystkich wizualizacji w raporcie.

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

Aby uzyskać więcej informacji na temat formatu i właściwości pliku obiektu JSON motywu raportu, zobacz Format pliku JSON motywu raportu.

Definiowanie trybów tła

Plik themes.js definiuje również obiekty themes opisujące tryby jasnego i ciemnego tła. Aby zdefiniować tryby jasnego i ciemnego tła, obiekt themes określa jeden motyw z białym tłem, a drugi motyw z kontrastowym, ciemnym tłem. Obiekt ciemnego tła ustawia również wartości dla innych kolorów strukturalnych i tekstowych, aby były widoczne na ciemnym tle.

Stosowanie motywów przy użyciu konfiguracji osadzania i zastosowaniaTheme

Parametr themeJson prezentacji definiuje kilka motywów kolorów. Osadzony raport JavaScript używa metody report class applyTheme do stosowania motywów podczas ładowania raportów i w czasie wykonywania raportu.

Aby włączyć motywy, raport osadzania konfiguracji określa atrybut theme z parametrem themeJson wskazującym obiekt JSON motywów. Konfiguracja osadzania pokazu stosuje motyw Default, który ma identyfikator koloru danych 0, podczas ładowania raportu:

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

Jeśli podczas sesji użytkownik wybierze inny motyw lub tryb, funkcja applyTheme definiuje i stosuje nowy obiekt motywu na podstawie wybranego koloru danych i trybu. Poniższy kod przedstawia funkcję applyTheme prezentacji:

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

Powiązana zawartość

• stosowanie motywów raportów
• usługi Power BI Embedded Analytics — plac zabaw