Rapor renklerini ve mod vitrini özelleştirme

Power BI embedded tema API', renk paletlerini ve diğer stilleri Power BI raporlarına tanımlar ve uygular. Farklı rapor kullanıcıları için özelleştirilmiş temalar uygulamak veya kullanıcıların kendi genel görünüm ve görünümlerini seçmesine izin vermek için temalar özelliğini kullanın.

Rapor renklerini ve modunu özelleştirPower BI tümleşik analiz oyun alanında, kullanıcıların Power BI tümleşik analiz raporunu görüntülerken farklı renkler ve arka plan modları seçmesine olanak sağlamak için tema API'sini kullanır.

Vitrin raporu aşağıdakiler için tema özelliğini kullanır:

• Rapor rengi temalarını ve arka plan modlarını tanımlayın.
• Rapor yüküne belirli bir renk teması uygulayın.
• Kullanıcıların rapor görüntüleme oturumları sırasında temaları ve arka plan modlarını değiştirmesine izin verin.

Rapor temaları hakkında daha fazla bilgi için bkz. Power BI Desktop'ta rapor temalarını kullanma.

Tema vitrini deneyimi

Rapor renklerini ve modunu özelleştirme Contoso adlı hayali bir grup, proje katılımcılarına iş verilerini göstermek için Power BI tümleşik raporunu kullanır. Katıştırılmış rapor, Varsayılan renk teması ve varsayılan arka plan modu uygulanmış olarak yüklenir. Rapordaki tüm görseller tema renklerini kullanır.

Tema ve mod seçme

Rapor görüntüleyicileri farklı bir renk teması veya modu uygulamak için Tema seç düğmesini seçebilir. Tema seçin açılan kutusu açılır ve mevcut tema seçili durumdayken kullanılabilir tema adları ve renk paletleri listelenir.

Görüntüleyiciler listeden farklı bir tema seçebilir ve veri, etiket ve diğer öğe renklerindeki anında değişiklikleri görebilir. Seçili tema rapordaki tüm eklenmiş görselleri etkiler.

İzleyiciler, renk teması seçiminden bağımsız olarak açık renkli metin içeren koyu renkli bir rapor arka planı oluşturmak için Koyu mod de geçiş yapabilir.

Tema seçin seçildiğinde açılan kutu kapatılmaya devam eder. Yeni seçilen tema ve arka plan modu, görüntüleyici bunları yeniden değiştirmediği sürece rapor görüntüleme oturumu sırasında etkin kalır.

Tema vitrini kodu

Vitrin uygulamasını uygulamaya yönelik kod, PowerBI-Embedded-Showcases GitHub deposundadır.

• HTML sayfası rapor kapsayıcısını oluşturur ve Tema seç düğmesini ve iletişim kutusunu ve tema JSON nesneleriniyükler.

• raporu JavaScript raporu ekler, varsayılan temayı yükler ve tema değiştirme deneyimini uygular.

Rapor teması JSON nesneleriyle tema tanımlama

rapor teması JSON nesneleri aracılığıyla hemen hemen tüm Power BI biçimlendirme öğelerini özelleştirebilirsiniz. Vitrin themes.js dosyası, kullanılabilir renk teması adlarını ve özelliklerini belirten jsonDataColors nesneleri tanımlar.

Aşağıdaki jsonDataColors nesnesi vitrin Tidal temasını tanımlar. Yıldız işareti *, rapordaki tüm görsellere genel olarak bir ayar uygular.

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

Rapor teması JSON nesne dosyası biçimi ve özellikleri hakkında daha fazla bilgi için bkz. Rapor teması JSON dosya biçimi.

Arka plan modlarını tanımlama

themes.js dosyası, Açık ve Koyu arka plan modlarını açıklayan themes nesneleri de tanımlar. Açık ve Koyu arka plan modlarını tanımlamak için, themes nesnesi beyaz arka planlı bir tema ve karşıtlıklı, koyu renkli arka plan içeren başka bir tema belirtir. Koyu arka plan nesnesi, diğer yapısal ve metin renklerinin değerlerini de koyu arka planda görünür olacak şekilde ayarlar.

Ekleme yapılandırmasıyla tema uygulama ve applyTheme

Vitrin themeJson parametresi çeşitli renk temalarını tanımlar. JavaScript eklenmiş rapor, rapor yükünde ve rapor çalışma zamanı sırasında temaları uygulamak için Report sınıfını applyTheme yöntemini kullanır.

Temaları etkinleştirmek için, rapor ekleme yapılandırması temalar JSON nesnesine işaret eden bir themeJson parametresiyle bir theme özniteliği belirtir. Vitrin ekleme yapılandırması, rapor yükünde 0veri rengi kimliğine sahip Default temasını uygular:

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

Görüntüleyici oturumu sırasında farklı bir tema veya mod seçerse, applyTheme işlevi seçili veri rengine ve moduna göre yeni bir tema nesnesi tanımlar ve uygular. Aşağıdaki kod vitrin applyTheme işlevini gösterir:

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

İlgili içerik

• Rapor temalarını uygulama
• Power BI Embedded Analytics Playground