다음을 통해 공유

보고서 색 및 모드 쇼케이스 사용자 지정

  • 아티클

Power BI 포함된 테마 API 색 팔레트 및 기타 스타일을 정의하고 Power BI 보고서에 적용합니다. 테마 기능을 사용하여 다른 보고서 사용자에 대해 사용자 지정된 테마를 적용하거나 사용자가 자신의 모양과 느낌을 선택할 수 있도록 합니다.

보고서 색 및 모드 사용자 지정Power BI 임베디드 분석 플레이그라운드 테마 API를 사용하여 사용자가 Power BI 임베디드 분석 보고서를 볼 때 다른 색과 배경 모드를 선택할 수 있도록 합니다.

쇼케이스 보고서는 테마 기능을 사용하여 다음을 수행합니다.

  • 보고서 색 테마 및 배경 모드를 정의합니다.
  • 보고서 로드 시 특정 색 테마를 적용합니다.
  • 사용자가 보고서 보기 세션 중에 테마 및 배경 모드를 변경할 수 있도록 합니다.

보고서 테마에 대한 자세한 내용은 Power BI Desktop보고서 테마 사용을 참조하세요.

테마 쇼케이스 환경

보고서 색 및 모드 사용자 지정 쇼케이스에서 Contoso라는 가상의 대기업은 Power BI 임베디드 보고서를 사용하여 관련자에게 비즈니스 데이터를 표시합니다. 포함된 보고서는 기본 색 테마 및 기본 배경 모드가 적용된 상태에서 로드됩니다. 보고서의 모든 시각적 개체는 테마 색을 사용합니다.

기본 테마가 적용된 Contoso 포함된 보고서 시각적 개체를 보여 주는 스크린샷

테마 및 모드 선택

보고서 뷰어는 테마 선택 단추를 선택하여 다른 색 테마 또는 모드를 적용할 수 있습니다. 테마 선택 드롭다운 상자가 열리고 사용 가능한 테마 이름과 색상표가 나열되고 현재 테마가 선택되어 있습니다.

뷰어는 목록에서 다른 테마를 선택하고 데이터, 레이블 및 기타 요소 색의 즉각적인 변경 내용을 볼 수 있습니다. 선택한 테마는 보고서의 모든 포함된 시각적 개체에 영향을 줍니다.

조석 테마가 선택된 테마 선택 대화 상자를 보여 주는 스크린샷

또한 뷰어는 어두운 모드 전환하여 색 테마 선택과 관계없이 밝은 색 텍스트로 어두운 보고서 배경을 생성할 수 있습니다.

어두운 모드가 켜져 있는 테마 선택 대화 상자를 보여 주는 스크린샷

테마 선택하면 드롭다운 상자가 다시 닫힙니다. 새로 선택한 테마 및 배경 모드는 뷰어가 다시 변경하지 않는 한 보고서 보기 세션 중에 계속 적용됩니다.

테마 쇼케이스 코드

쇼케이스 애플리케이션을 구현하기 위한 코드는 PowerBI-Embedded-Showcases GitHub 리포지토리에 있습니다.

  • HTML 페이지 보고서 컨테이너를 빌드하고 테마 선택 단추와 대화 상자를 JSON 개체가테마를 로드합니다.

  • 보고서 JavaScript 보고서를 포함하고, 기본 테마를 로드하고, 테마 전환 환경을 구현합니다.

보고서 테마 JSON 개체를 사용하여 테마 정의

보고서 테마 JSON 개체통해 거의 모든 Power BI 서식 요소를 사용자 지정할 수 있습니다. 쇼케이스 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 개체는 흰색 배경이 있는 테마와 대비되는 어두운 배경의 다른 테마를 지정합니다. 어두운 배경 개체는 어두운 배경에 대해 표시되도록 다른 구조 및 텍스트 색의 값도 설정합니다.

embed 구성을 사용하여 테마 적용 및 applyTheme

쇼케이스 themeJson 매개 변수는 여러 가지 색 테마를 정의합니다. 포함된 보고서 JavaScript 보고서 클래스 applyTheme 메서드를 사용하여 보고서 로드 및 보고서 런타임 중에 테마를 적용합니다.

테마를 사용하도록 설정하기 위해 보고서 포함 구성 테마 JSON 개체를 가리키는 themeJson 매개 변수와 함께 theme 특성을 지정합니다. 쇼케이스 포함 구성은 보고서 로드에 데이터 색 ID 0있는 Default 테마를 적용합니다.

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

관련 콘텐츠