Power BI 임베디드 애플리케이션을 소개하기 개인 설정된 시각적 개체를 빠르게 만들면 사용자는 이전 Power BI 환경이 없더라도 기존 보고서 시각적 개체를 편집하고 고유한 개인 설정된 시각적 개체를 만들 수 있습니다. 쇼케이스 코드는 Power BI 보고서 작성 API를 사용하여 런타임에 여러 유형의 시각화를 만들고 편집하는 방법을 보여 줍니다. 보고서 작성 API 사용에 대한 자세한 내용은 보고서 작성 개요참조하세요.
개인 설정된 시각적 개체 쇼케이스 환경을 빠르게 만들기
가상의 회사인 Contoso는 신속하게 개인 설정된 시각적 개체 쇼케이스 사용하여 판매 데이터의 여러 시각화가 포함된 Power BI 임베디드 보고서를 제공합니다. 세로 막대형 차트, 영역 그래프, 가로 막대형 차트, 원형 차트 및 꺾은선형 그래프는 수익과 기회를 산업 유형, 영업 사원 및 영업 기회 상태의 함수로 표시합니다.
포함된 보고서에는 사용자가 데이터를 기반으로 새 시각적 개체를 만들기 위해 선택할 수 있는 빠른 시각적 개체 만들기 단추가 있습니다.
빠른 시각적 개체 만들기 단추가 있는 Power BI 포함된 보고서를 보여 주는 빠른 시각적 개체 작성자를 보여 주는 
새 빠른 시각적 개체 만들기
보고서 사용자는 보기 세션 중에 언제든지 빠른 시각적 만들기 단추를 선택하여 Contoso 판매 데이터를 기반으로 새 시각적 개체를 만들 수 있습니다.
예를 들어 사용자가 기회 상태에 따라 실제 수익을 표시하는 세로 막대형 차트를 보려면 빠른 시각적 개체 만들기 선택하여 빠른 시각적 개체 만들기 대화 상자를 엽니다. 애플리케이션 코드에 정의된 대화 상자에는 오른쪽에 포함된 보고서 시각적 미리 보기가 포함되어 있습니다.
빠른 시각적 개체 만들기 대화 상자의 시각적 유형선택에서 사용자가 세로 막대형 차트선택합니다. 사용자가 선택한 시각적 개체 유형에 따라 다른 필드와 값을 사용할 수 있습니다. 세로 막대형 차트의 경우 사용자는
대화 상자의 포함된 보고서 미리 보기에는 사용자가 시각화를 빌드할 때 시각화가 표시됩니다.
시각적 개체가 완료되면 사용자는만들기
사용자가 시각화의 데이터 요소 위로 마우스를 가져가면 도구 설명이 나타납니다. 사용자가 시각적 개체를 만들 때 도구 설명예상 수익 지정했기 때문에 해당 필드의 데이터가 도구 설명에 표시됩니다. 사용자가 도구 설명을 지정하지 않으면 축 및 값 데이터만 도구 설명에 표시됩니다.
기존 시각적 개체 변경
보고서 사용자는 시각적 개체의 오른쪽 위에 있는 줄임표(
예를 들어 보고서 사용자는 데이터가 연속되지 않으므로 인더스트리별 기회 영역형 차트를 세로 막대형 차트로 변경할 수 있습니다. 사용자가 시각적변경
이 예제에서 사용자는 시각적 개체 유형을
개인 설정된 시각적 개체 쇼케이스 코드 빠르게 만들기
쇼케이스를 구현하기 위한 코드는 PowerBI-Embedded-Showcases GitHub 리포지토리에 있습니다.
애플리케이션 HTML 코드 포함된 보고서 컨테이너 및 요소, 대화 상자, 텍스트 필드 및 단추를 빌드합니다.
보고서 JavaScript 코드 시각화 유형을 정의하고 명령 및 이벤트를 처리하며 모든 보고서 포함 및 상호 작용을 수행합니다.
Power BI 클라이언트 라이브러리에 대한 powerbi-report-authoring 확장을 사용하여 보고서 및 시각적 개체를 쉽고 빠르게 작성할 수 있습니다. 자세한 내용은 보고서 작성 개요참조하세요.
시각적 개체를 만들고 데이터에 바인딩하는 방법에 대한 자세한 내용은 시각적 개체만들기를 참조하세요. 시각적 속성에 대한 자세한 내용은 서식 시각적 속성참조하세요.
시각적 개체 만들기 및 구성
createVisual 사용하고 barChart 또는 pieChart같은 시각적 개체 유형을 지정하여 Power BI 시각적 개체를 만듭니다. 그런 다음 시각적 개체 형식을 속성, 역할, 필드 및 데이터에 바인딩합니다. 쇼케이스 visuals.js 파일은 이 애플리케이션에서 지원하는 시각적 형식의 속성, 데이터 역할, 데이터 필드 및 대상을 정의합니다.
index.js 파일에서 다음 코드는 빠른 시각적 개체 만들기 대화 상자 내에 포함된 시각적 개체를 만들고 해당 속성을 설정하고 적용합니다. 예를 들어 legend 속성은 원형 차트 시각적 개체에 대해 사용하도록 설정되지만 가로 막대형 및 세로 막대형 차트에는 사용할 수 없습니다.
// Based on the state object, create a visual inside the modal
async function createVisualInsideTheModalInEditMode(visualType, dataRoles) {
// Create visual inside the modal
const newVisual = await visualCreatorShowcaseState.page.createVisual(visualType, getVisualLayout());
// Update state
visualCreatorShowcaseState.newVisual = newVisual.visual;
visualCreatorShowcaseState.visualType = newVisual.visual.type;
const visual = newVisual.visual;
const newVisualType = visual.type;
// Enable the legend property for pie chart
if (visualCreatorShowcaseState.visualType === "pieChart") {
visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: true });
}
// Add properties to the created visual
Object.entries(visualCreatorShowcaseState.properties).forEach(property => {
let [propertyName, propertyValue] = property;
...
// Check the validity of the given property for the given visual-type and apply it to the visual
applyValidPropertiesToTheVisual(visual, newVisualType, propertyName, propertyValue);
});
// Disable the legend for the column and bar charts
if (visualCreatorShowcaseState.visualType === "columnChart" || visualCreatorShowcaseState.visualType === "barChart") {
visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: false });
}
시각적 개체 유형 변경
빠른 시각적 개체 만들기 대화 상자에서 선택한 시각적 개체 유형이 변경되지 않는 한 모든 기존 편집 필드를 사용할 수 있습니다. 새 시각적 개체를 만들거나 시각적 개체 유형을 변경할 때 사용자가 새 시각적 개체 유형을 선택한 후 관련 편집 필드를 사용할 수 있게 됩니다.
다음은 사용자가 시각적 개체를 편집하여 형식을 변경하는 경우(예: 영역형 차트에서 세로 막대형 차트로) 시각적 개체 유형을 변경하는 코드입니다. 시각적 유형 변경에 대한 자세한 내용은 시각적 형식 변경 을 참조하세요.
const oldVisualType = selectedVisual.visual.type;
const oldVisual = selectedVisual.visual;
if (oldVisualType !== visualCreatorShowcaseState.visualType) {
// If visual-type is changed, remove all active data-fields on the visual
await removeAllActiveDataRoles(oldVisual, oldVisualType);
// Change the visual type
await oldVisual.changeType(visualCreatorShowcaseState.visualType);
}
기타 옵션 메뉴에 시각적 개체 변경 명령 추가
보고서 embedConfiguration확장 메뉴 명령 API를 사용하여 각 시각화의 기타 옵션 메뉴에 표시되는 changeVisual 명령을 보고서에 추가합니다.
let config = {
...
settings: {
...
extensions: [
{
command: {
name: "changeVisual",
title: "Change visual",
extend: {
visualOptionsMenu: {
title: "Change visual",
menuLocation: models.MenuLocation.Top,
또한 구성은
시각적 개체 변경 및 빠른 시각적 개체 선택 이벤트 만들기 처리
다음 코드는 시각적 명령 선택
// Listen for the commandTriggered event
baseReportState.report.on("commandTriggered", function (event) {
// Open the modal and set the fields, properties and title for the visual
openModalAndFillState(event.detail);
});
baseReportState.report.on("buttonClicked", function () {
// Show the modal to create the visual
openModalAndFillState();
});