Condividi tramite

Personalizzare i colori del report e la presentazione in modalità

L'API del tema incorporata di Power BI definisce e applica tavolozze dei colori e altri stili ai report di Power BI. Usare la funzionalità temi per applicare temi personalizzati per utenti del report diversi o per consentire agli utenti di scegliere il proprio aspetto.

La Personalizzare i colori e la modalità del report presentazione nel playground di analisi incorporata di Power BI usa l'API del tema per consentire agli utenti di scegliere colori e modalità di sfondo diverse quando si visualizza un report di analisi incorporata di Power BI.

Il report di presentazione usa la funzionalità del tema per:

  • Definire i temi dei colori del report e le modalità di sfondo.
  • Applicare un tema colore specifico al caricamento del report.
  • Consentire agli utenti di modificare i temi e le modalità in background durante le sessioni di visualizzazione dei report.

Per altre informazioni sui temi dei report, vedere Usare i temi dei report in Power BI Desktop.

Esperienza di presentazione dei temi

Nella Personalizzare i colori e la modalità report presentazione, un conglomerato immaginario denominato Contoso usa un report incorporato di Power BI per mostrare i dati aziendali agli stakeholder. Il report incorporato viene caricato con il Tema colore predefinito e la modalità di sfondo predefinita applicata. Tutti gli oggetti visivi nel report usano i colori del tema.

Screenshot che mostra gli oggetti visivi del report incorporati contoso con il tema predefinito applicato.

Selezionare un tema e una modalità

I visualizzatori di report possono selezionare il pulsante Scegliere il tema per applicare un tema o una modalità colore diversi. Viene visualizzata casella di riepilogo a discesa Scegli tema, che elenca i nomi dei temi e le tavolozze dei colori disponibili, con il tema corrente selezionato.

I visualizzatori possono selezionare un tema diverso dall'elenco e visualizzare le modifiche immediate apportate a dati, etichette e altri colori degli elementi. Il tema selezionato influisce su tutti gli oggetti visivi incorporati nel report.

Screenshot che mostra la finestra di dialogo Scegli tema con il tema tidal selezionato.

I visualizzatori possono anche attivare o disattivare modalità Scura per produrre uno sfondo del report scuro con testo chiaro, indipendentemente dalla selezione del tema colore.

Screenshot che mostra la finestra di dialogo Scegli tema con la modalità scura attivata.

Selezionando Scegliere il tema chiude nuovamente la casella di riepilogo a discesa. Il nuovo tema selezionato e la modalità di sfondo rimangono attivi durante la sessione di visualizzazione del report, a meno che il visualizzatore non li cambi di nuovo.

Codice di presentazione dei temi

Il codice per l'implementazione dell'applicazione showcase si trova nel repository PowerBI-Embedded-Showcases GitHub.

  • La pagina HTML compila il contenitore di report e scegliere il pulsante tema e la finestra di dialogo e carica gli oggetti JSON dei temi .

  • Il report JavaScript incorpora il report, carica il tema predefinito e implementa l'esperienza di cambio del tema.

Definire i temi con oggetti JSON del tema del report

È possibile personalizzare quasi tutti gli elementi di formattazione di Power BI tramite oggetti JSON del tema del report. Il file di themes.js showcase definisce jsonDataColors oggetti che specificano i nomi e le proprietà dei temi dei colori disponibili.

L'oggetto jsonDataColors seguente definisce il tema della vetrina Tidal. L'asterisco * applica un'impostazione a livello globale a tutti gli oggetti visivi del report.

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

Per altre informazioni sul formato e sulle proprietà del file di oggetti JSON del tema del report, vedere formato di file JSON del tema del report.

Definire le modalità in background

Il file themes.js definisce anche themes oggetti che descrivono le modalità di sfondo Chiaro e Scuro. Per definire le modalità di sfondo Chiaro e Scuro, l'oggetto themes specifica un tema con uno sfondo bianco e un altro tema con sfondo scuro a contrasto. L'oggetto sfondo scuro imposta anche i valori per altri colori strutturali e di testo in modo che siano visibili sullo sfondo scuro.

Applicare temi con la configurazione di incorporamento e applicareTheme

Il parametro showcase themeJson definisce diversi temi di colore. Il report incorporato JavaScript usa la classe Report applyTheme metodo per applicare i temi al caricamento del report e durante il runtime del report.

Per abilitare i temi, il report incorporare la configurazione specifica un attributo theme, con un parametro themeJson che punta all'oggetto JSON dei temi. La configurazione di incorporamento della vetrina applica il tema Default, con ID colore dati 0, al caricamento del report:

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

Se il visualizzatore seleziona un tema o una modalità diversa durante la sessione, la funzione applyTheme definisce e applica un nuovo oggetto tema in base al colore e alla modalità dati selezionati. Il codice seguente mostra la funzione showcase 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 });
}

Contenuto correlato

  • Last updated on