자습서: Power BI 원 카드 시각적 개체 개발Tutorial: Develop a Power BI circle card visual

개발자는 Power BI 시각적 개체를 직접 만들 수 있습니다.As a developer you can create your own Power BI visuals. 이러한 시각적 개체는 개발자 본인, 본인이 속한 조직 또는 제3자가 사용할 수 있습니다.These visuals can be used by you, your organization or by third parties.

이 자습서에서는 원 안에 서식이 지정된 측정값을 표시하는 원 카드라는 Power BI 시각적 개체를 개발합니다.In this tutorial, you'll develop a Power BI visual named circle card that displays a formatted measure value inside a circle. 원 카드 시각적 개체는 채우기 색 및 윤곽선 두께를 사용자 지정할 수 있습니다.The circle card visual supports customization of fill color and outline thickness.

이 자습서에서는 다음 작업 방법을 알아봅니다.In this tutorial, you learn how to:

  • 시각적 개체에 대한 개발 프로젝트 만들기Create a development project for your visual.
  • D3 시각적 개체 요소를 사용하여 시각적 개체 개발Develop your visual with D3 visual elements.
  • 데이터를 처리하도록 시각적 개체 구성Configure your visual to process data.

전제 조건Prerequisites

Power BI 시각적 개체 개발을 시작하기 전에, 이 섹션에 나열된 모든 것이 준비되어 있는지 확인합니다.Before you start developing your Power BI visual, verify that you have everything listed in this section.

개발 프로젝트 만들기Create a development project

이 섹션에서는 원 카드 시각적 개체에 대한 프로젝트를 만듭니다.In this section you'll create a project for the circle card visual.

  1. PowerShell을 열고 프로젝트를 만들려는 폴더로 이동합니다.Open PowerShell and navigate to the folder you want to create your project in.

  2. 다음 명령을 입력합니다.Enter the following command:

    pbiviz new CircleCard
    
  3. 프로젝트의 폴더로 이동합니다.Navigate to the project's folder.

    cd CircleCard
    
  4. 원 카드 시각적 개체를 시작합니다.Start the circle card visual. 시각적 개체는 컴퓨터에서 호스트되는 동안 실행됩니다.Your visual is now running while being hosted on your computer.

    pbiviz start
    

    중요

    자습서를 마칠 때까지 PowerSell 창을 닫지 마세요.Do not close the PowerSell window until the end of the tutorial. 시각적 개체의 실행을 중지하려면 Ctrl+C를 입력하고, 일괄 처리 작업을 종료하라는 메시지가 표시되면 Y를 입력하고 Enter 키를 누릅니다.To stop the visual from running, enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

Power BI 서비스에서 원 카드 보기View the circle card in Power BI service

Power BI 서비스에서 원 카드 시각적 개체를 테스트하기 위해 미국 영업 분석 보고서를 사용하겠습니다.To test the circle card visual in Power BI service, we'll use the US Sales Analysis report. 이 보고서를 다운로드하여 Power BI 서비스에 업로드할 수 있습니다.You can download this report and upload it to Power BI service.

자체 보고서를 사용하여 원 카드 시각적 개체를 테스트할 수도 있습니다.You can also use your own report to test the circle card visuals.

참고

계속하기 전에, 시각적 개체 개발자 설정을 활성화했는지 확인합니다.Before you continue, verify that you enabled the visuals developer settings.

  1. PowerBI.com에 로그인하여 미국 영업 분석 보고서를 엽니다.Sign in to PowerBI.com and open the US Sales Analysis report.

  2. 추가 옵션 > 편집 을 선택합니다.Select More options > Edit.

    Power BI 서비스의 편집 옵션 스크린샷Screenshot of the edit option in Power B I service.

  3. Power BI 서비스 인터페이스 아래쪽에서 새 페이지 단추를 클릭하여 테스트할 새 페이지를 만듭니다.Create a new page for testing, by clicking on the New page button at the bottom of the Power BI service interface.

    Power BI 서비스의 [새 페이지] 단추 스크린샷Screenshot of the new page button in Power B I service.

  4. 시각화 창에서 개발자 시각적 개체 를 선택합니다.From the Visualizations pane, select the Developer Visual.

    [시각화] 창의 [개발자 시각적 개체] 스크린샷Screenshot of the developer visual in the visualizations pane.

    이 시각적 개체는 컴퓨터에서 실행하는 사용자 지정 시각적 개체를 나타냅니다.This visual represents the custom visual that you're running on your computer. 사용자 지정 시각적 개체 디버깅 설정이 활성화된 경우에만 사용할 수 있습니다.It's only available when the custom visual debugging setting is enabled.

  5. 시각적 개체가 보고서 캔버스에 추가되었는지 확인합니다.Verify that a visual was added to the report canvas.

    보고서에 추가된 새 시각적 개체의 스크린샷Screenshot of the new visual added to the report.

    update 메서드가 호출된 횟수를 표시하는 간단한 시각적 개체입니다.This is a simple visual that displays the number of times its update method has been called. 이 단계에서는 시각적 개체가 아직 데이터를 검색하지 않습니다.At this stage, the visual does not retrieve any data.

    참고

    시각적 개체가 연결 오류 메시지를 표시하면 브라우저에서 새 탭을 열고 https://localhost:8080/assets/status로 이동한 다음, 이 주소를 사용하도록 브라우저에 권한을 부여합니다.If the visual displays a connection error message, open a new tab in your browser, navigate to https://localhost:8080/assets/status, and authorize your browser to use this address.

    연결 오류를 표시하는 새 시각적 개체의 스크린샷

  6. 새로운 시각적 개체를 선택한 상태에서 필드 창으로 이동하고, 영업 을 확장하고, 수량 을 선택합니다.While the new visual is selected, go to the Fields pane, expand Sales, and select Quantity.

    미국 영업 분석 보고서의 sales 테이블에 있는 Power BI 서비스 수량 필드의 스크린샷Screenshot of the Power B I service quantity field in the sales table in the U S sales analysis report.

  7. 시각적 개체가 어떻게 응답하는지 테스트하려면 시각적 개체의 크기를 조정합니다. 시각적 개체의 크기를 조정할 때마다 업데이트 횟수 값이 증가합니다.To test how the visual is responding, resize it and notice that the Update count value increments every time you resize the visual.

    크기를 조정한 후 다른 업데이트 횟수를 표시하는 새로운 시각적 개체의 스크린샷Screenshot of the new visual displaying a different update count number, after being resized.

시각적 요소 및 텍스트 추가Add visual elements and text

이 섹션에서는 시각적 개체를 원으로 바꾸고 텍스트를 표시하는 방법을 배웁니다.In this section you'll learn how to turn your visual into a circle, and make it display text.

참고

이 자습서에서는 VS Code(Visual Studio Code)를 사용하여 Power BI 시각적 개체를 개발합니다.In this tutorial, Visual Studio Code (VS Code) is used for developing the Power BI visual.

시각적 개체 파일 수정Modify the visuals file

코드 줄을 삭제하고 추가하여 visual.ts 파일을 설정합니다.Set up the visual.ts file by deleting and adding a few lines of code.

  1. VS Code에서 프로젝트를 엽니다(파일 > 폴더 열기).Open your project in VS Code (File > Open Folder).

  2. 탐색기 창 에서 src 폴더를 확장한 다음, visual.ts 파일을 선택합니다.In the Explorer pane, expand the src folder, and select the file visual.ts.

    VS 코드에서 visual.ts 파일에 액세스하는 스크린샷Screenshot of accessing the visual.ts file in V S code.

    중요

    visual.ts 파일의 맨 위에 있는 설명을 확인합니다.Notice the comments at the top of the visual.ts file. Power BI 시각적 개체 패키지를 사용할 권한은 MIT(매사추세츠공과대학교) 라이선스의 약관에 따라 무료로 부여됩니다.Permission to use the Power BI visual packages is granted free of charge under the terms of the Massachusetts Institute of Technology (MIT) License. 계약의 일부로 파일 맨 위에 설명을 남겨 두어야 합니다.As part of the agreement, you must leave the comments at the top of the file.

  3. visual.ts 파일에서 다음 코드 줄을 제거합니다.Remove the following code lines from the visual.ts file.

    • VisualSettings 가져오기:The VisualSettings import:

      import { VisualSettings } from "./settings";
      
    • 네 개의 클래스 수준 private 변수 선언.The four class-level private variable declarations.

    • 생성자 내부의 모든 코드 줄All the lines of code inside the constructor.

    • update 메서드 내부의 모든 코드 줄All the lines of code inside the update method.

    • parseSettingsenumerateObjectInstances 메서드를 포함하여 update 메서드 아래의 나머지 코드 줄All the remaining code lines below the update method, including the parseSettings and enumerateObjectInstances methods.

  4. 가져오기 섹션의 끝에 다음 코드 줄을 추가합니다.Add the following lines of code at the end of the import section:

    • IVisualHost - 시각적 개체 호스트(Power BI)와 상호 작용하는 데 사용되는 속성 및 서비스 컬렉션입니다.IVisualHost - A collection of properties and services used to interact with the visual host (Power BI).

      import IVisualHost = powerbi.extensibility.IVisualHost;
      
    • D3 라이브러리D3 library

      import * as d3 from "d3";
      type Selection<T extends d3.BaseType> = d3.Selection<T, any,any, any>;
      

      참고

      설치 과정에서 이 라이브러리를 설치하지 않은 경우 D3 JavaScript 라이브러리를 설치합니다.If you didn't install this library as part of your setup, install the D3 JavaScript library.

  5. Visual 클래스 선언 아래에 다음 클래스 수준 속성을 삽입합니다.Below the Visual class declaration, insert the following class level properties. private으로 시작하는 코드 줄을 추가하기만 하면 됩니다.You only need to add the code lines starting with private.

    export class Visual implements IVisual {
        // ...
        private host: IVisualHost;
        private svg: Selection<SVGElement>;
        private container: Selection<SVGElement>;
        private circle: Selection<SVGElement>;
        private textValue: Selection<SVGElement>;
        private textLabel: Selection<SVGElement>;
        // ...
    }
    
  6. visual.ts 파일을 저장합니다.Save the visual.ts file.

원 및 텍스트 요소 추가Add a circle and text elements

D3 SVG(Scalable Vector Graphics)를 추가합니다.Add D3 Scalable Vector Graphics (SVG). 이렇게 하면 3개의 셰이프(원 1개와 텍스트 요소 2개)를 만들 수 있습니다.This enables creating three shapes: a circle, and two text elements.

  1. VS Code에서 visual.ts 를 엽니다.Open visual.ts in VS code.

  2. 다음 코드를 ‘생성자’에 추가합니다.Add the following code to the constructor.

    this.svg = d3.select(options.element)
        .append('svg')
        .classed('circleCard', true);
    this.container = this.svg.append("g")
        .classed('container', true);
    this.circle = this.container.append("circle")
        .classed('circle', true);
    this.textValue = this.container.append("text")
        .classed("textValue", true);
    this.textLabel = this.container.append("text")
        .classed("textLabel", true);
    

    가독성을 개선하기 위해, 코드 조각을 프로젝트에 복사할 때마다 문서의 서식을 지정하는 것이 좋습니다.To improve readability, it's recommended that you format the document every time you copy code snippets into your project. VS Code에서 아무 곳이나 마우스 오른쪽 단추로 클릭하고 문서 서식 지정(Alt+Shift+F)을 선택합니다.Right-click anywhere in VS code, and select Format Document (Alt+Shift+F).

  3. visual.ts 파일을 저장합니다.Save the visual.ts file.

너비 및 높이 설정Set the width and height

시각적 개체의 너비와 높이를 설정하고, 시각적 요소의 특성과 스타일을 초기화합니다.Set the width and height of the visual, and initialize the attributes and styles of the visual's elements.

  1. VS Code에서 visual.ts 를 엽니다.Open visual.ts in VS Code.

  2. 다음 코드를 update 메서드에 추가합니다.Add the following code to the update method.

    let width: number = options.viewport.width;
    let height: number = options.viewport.height;
    this.svg.attr("width", width);
    this.svg.attr("height", height);
    let radius: number = Math.min(width, height) / 2.2;
    this.circle
        .style("fill", "white")
        .style("fill-opacity", 0.5)
        .style("stroke", "black")
        .style("stroke-width", 2)
        .attr("r", radius)
        .attr("cx", width / 2)
        .attr("cy", height / 2);
    let fontSizeValue: number = Math.min(width, height) / 5;
    this.textValue
        .text("Value")
        .attr("x", "50%")
        .attr("y", "50%")
        .attr("dy", "0.35em")
        .attr("text-anchor", "middle")
        .style("font-size", fontSizeValue + "px");
    let fontSizeLabel: number = fontSizeValue / 4;
    this.textLabel
        .text("Label")
        .attr("x", "50%")
        .attr("y", height / 2)
        .attr("dy", fontSizeValue / 1.2)
        .attr("text-anchor", "middle")
        .style("font-size", fontSizeLabel + "px");
    
  3. visual.ts 파일을 저장합니다.Save the visual.ts file.

(선택 사항) 시각적 개체 파일의 코드를 검토합니다.(Optional) Review the code in the visuals file

visuals.ts 파일의 코드가 다음과 비슷한지 확인합니다.Verify that the code in the visuals.ts file looks like this:

/*
*  Power BI Visual CLI
*
*  Copyright (c) Microsoft Corporation
*  All rights reserved.
*  MIT License
*
*  Permission is hereby granted, free of charge, to any person obtaining a copy
*  of this software and associated documentation files (the ""Software""), to deal
*  in the Software without restriction, including without limitation the rights
*  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*  copies of the Software, and to permit persons to whom the Software is
*  furnished to do so, subject to the following conditions:
*
*  The above copyright notice and this permission notice shall be included in
*  all copies or substantial portions of the Software.
*
*  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*  THE SOFTWARE.
*/
"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;

export class Visual implements IVisual {
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private circle: Selection<SVGElement>;
    private textValue: Selection<SVGElement>;
    private textLabel: Selection<SVGElement>;

    constructor(options: VisualConstructorOptions) {
        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circleCard', true);
        this.container = this.svg.append("g")
            .classed('container', true);
        this.circle = this.container.append("circle")
            .classed('circle', true);
        this.textValue = this.container.append("text")
            .classed("textValue", true);
        this.textLabel = this.container.append("text")
            .classed("textLabel", true);
    }

    public update(options: VisualUpdateOptions) {
        let width: number = options.viewport.width;
        let height: number = options.viewport.height;
        this.svg.attr("width", width);
        this.svg.attr("height", height);
        let radius: number = Math.min(width, height) / 2.2;
        this.circle
            .style("fill", "white")
            .style("fill-opacity", 0.5)
            .style("stroke", "black")
            .style("stroke-width", 2)
            .attr("r", radius)
            .attr("cx", width / 2)
            .attr("cy", height / 2);
        let fontSizeValue: number = Math.min(width, height) / 5;
        this.textValue
            .text("Value")
            .attr("x", "50%")
            .attr("y", "50%")
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeValue + "px");
        let fontSizeLabel: number = fontSizeValue / 4;
        this.textLabel
            .text("Label")
            .attr("x", "50%")
            .attr("y", height / 2)
            .attr("dy", fontSizeValue / 1.2)
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeLabel + "px");
    }
}

기능 파일 수정Modify the capabilities file

기능 파일에서 불필요한 코드 줄을 삭제합니다.Delete unneeded lines of code from the capabilities file.

  1. VS Code에서 프로젝트를 엽니다(파일 > 폴더 열기).Open your project in VS Code (File > Open Folder).

  2. capabilities.json 파일을 선택합니다.Select the capabilities.json file.

    VS 코드에서 capabilities.json 파일에 액세스하는 스크린샷Screenshot of accessing the capabilities.json file in V S code.

  3. 모든 개체 요소(줄 14-60)를 제거합니다.Remove all the objects elements (lines 14-60).

  4. capabilities.json 파일을 저장합니다.Save the capabilities.json file.

원 카드 시각적 개체를 다시 시작합니다.Restart the circle card visual

시각적 개체의 실행을 중지했다가 다시 시작합니다.Stop the visual from running and restart it.

  1. 시각적 개체가 실행 중인 PowerShell 창에서 Ctrl+C를 입력하고, 일괄 처리 작업을 종료하라는 메시지가 표시되면 Y를 입력하고 Enter 키를 누릅니다.In the PowerShell window running the visual, enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

  2. PowerShell에서 시각적 개체를 시작합니다.In PowerShell, start the visual.

    pbiviz start
    

추가된 요소를 사용하여 시각적 개체 테스트Test the visual with the added elements

시각적 개체가 새로 추가된 요소를 표시하는지 확인합니다.Verify that the visual displays the newly added elements.

  1. Power BI 서비스에서 Power BI 미국 영업 분석 보고서를 엽니다.In Power BI service, open the Power BI US Sales Analysis report. 다른 보고서를 사용하여 원 카드 시각적 개체를 개발하는 경우 해당 보고서로 이동합니다.If you're using a different report to develop the circle card visual, navigate to that report.

  2. 시각적 개체의 모양이 원형인지 확인합니다.Make sure that the visual is shaped as a circle.

    원형으로 생긴 원 카드 시각적 개체의 스크린샷Screenshot of the circle card visual shaped as a circle.

    참고

    시각적 개체가 아무 것도 표시하지 않는 경우 필드 창에서 수량 필드를 개발자 시각적 개체로 끌어옵니다.If the visual isn't displaying anything, from the Fields pane, drag the Quantity field into the developer visual.

  3. 시각적 개체 크기를 조정합니다.Resize the visual.

    원 및 텍스트가 시각적 개체의 크기에 맞게 스케일링됩니다.Notice that the circle and text scale to fit the dimensions of the visual. update 메서드는 시각적 개체의 크기를 조정할 때 호출되며, 호출의 결과로 시각적 요소가 다시 스케일링됩니다.The update method is called when you resize the visual, and as a result the visual elements get rescaled.

자동 다시 로드 사용Enable auto reload

프로젝트 변경 내용을 저장할 때마다 시각적 개체가 자동으로 다시 로드되도록 이 설정을 사용하세요.Use this setting to ensure that the visual is automatically reloaded each time you save project changes.

  1. Power BI 미국 영업 분석 보고서(또는 원 카드 시각적 개체가 들어 있는 프로젝트)로 이동합니다.Navigate to the Power BI US Sales Analysis report (or to the project that has your circle card visual).

  2. 원 카드 시각적 개체를 선택합니다.Select the circle card visual.

  3. 부동 도구 모음에서 자동 다시 로드 설정/해제 를 선택합니다.In the floating toolbar, select Toggle Auto Reload.

    원 카드 시각적 개체 부동 도구 모음에서 [자동 다시 로드 설정/해제] 옵션을 클릭하는 스크린샷Screenshot of clicking the toggle auto reload option, in the circle card visual floating toolbar.

데이터를 처리하는 시각적 개체 가져오기Get the visual to process data

이 섹션에서는 데이터 역할 및 데이터 보기 매핑을 정의합니다.In this section, you'll define data roles and data view mappings. 또한 시각적 개체에서 표시하는 값의 이름을 표시하도록 시각적 개체를 수정합니다.You'll also modify the visual to display the name of the value it's displaying.

기능 파일 구성Configure the capabilities file

capabilities.json 파일을 수정하여 데이터 역할 및 데이터 보기 매핑을 정의합니다.Modify the capabilities.json file to define the data role and data view mappings.

  • 데이터 역할 정의Defining the data role

    측정값 형식의 단일 데이터 역할을 사용하여 dataRoles 배열을 정의합니다.Define the dataRoles array with a single data role of the type measure. 이 데이터 역할을 측정값 이라고 하며 측정값 으로 표시됩니다.This data role is called measure, and is displayed as Measure. 이 데이터 역할은 측정값 필드 또는 합계 필드를 전달할 수 있습니다.It allows passing either a measure field, or a field that's summed up.

    1. VS Code에서 capabilities.json 파일을 엽니다.Open the capabilities.json file in VS Code.

    2. dataRoles 배열(줄 3-12) 내부의 모든 콘텐츠를 제거합니다.Remove all the content inside the dataRoles array (lines 3-12).

    3. 다음 코드를 dataRoles 배열에 삽입합니다.Insert the following code to the dataRoles array.

      {
          "displayName": "Measure",
          "name": "measure",
          "kind": "Measure"
      }
      
    4. capabilities.json 파일을 저장합니다.Save the capabilities.json file.

  • 데이터 보기 매핑 정의Defining the data view mapping

    dataViewMappings 배열에서 측정값 이라는 필드를 정의합니다.Define a filed called measure in the dataViewMappings array. 이 필드를 데이터 역할에 전달할 수 있습니다.This field can be passed to the data role.

    1. VS Code에서 capabilities.json 파일을 엽니다.Open the capabilities.json file in VS Code.

    2. dataViewMappings 배열(줄 10-30) 내부의 모든 콘텐츠를 제거합니다.Remove all the content inside the dataViewMappings array (lines 10-30).

    3. 다음 코드를 dataViewMappings 배열에 삽입합니다.Insert the following code to the dataViewMappings array.

      {
          "conditions": [
              { "measure": { "max": 1 } }
          ],
          "single": {
              "role": "measure"
          }
      }
      
    4. capabilities.json 파일을 저장합니다.Save the capabilities.json file.

(선택 사항) 기능 파일 코드 변경 내용 검토(Optional) Review the capabilities file code changes

원 카드 시각적 개체가 측정값 필드를 표시하는지 확인하고, 데이터 보기 표시 옵션을 사용하여 변경한 내용을 검토합니다.Verify that the circle card visual displays the measure field, and review the changes you made using the Show Dataview option.

  1. Power BI 서비스에서 Power BI 미국 영업 분석 보고서를 엽니다.In Power BI service, open the Power BI US Sales Analysis report. 다른 보고서를 사용하여 원 카드 시각적 개체를 개발하는 경우 해당 보고서로 이동합니다.If you're using a different report to develop the circle card visual, navigate to that report.

  2. 이제 측정값 이라는 필드를 사용하여 원 카드 시각적 개체를 구성할 수 있습니다.Notice that the circle card visual can now be configured with a field titled Measure. 필드 창의 요소를 측정값 필드로 끌어 놓을 수 있습니다.You can drag and drop elements from the Fields pane into the Measure field.

    Power BI 서비스 시각화 창에 있는 원 카드 측정값 필드의 스크린샷Screenshot of the circle card measure filed, in the Power BI service visualization pane.

    참고

    시각적 개체 프로젝트에는 아직 데이터 바인딩 논리가 포함되지 않습니다.The visual project does not yet include data binding logic.

  3. 부동 도구 모음에서 데이터 보기 표시 를 선택합니다.In the floating toolbar, select Show Dataview.

    원 카드 부동 도구 모음에 있는 데이터 보기 표시 단추의 스크린샷Screenshot of the show dataview button, located in the circle card floating toolbar.

  4. 세 점을 선택하여 표시를 확장하고, 단일 을 선택하여 값을 확인합니다.Select the three dots to expand the display, and select single to view the value.

    원 카드 데이터 보기 표시 옵션에 표시되는 값 그림의 스크린샷Screenshot of the value figure as it's displayed in the circle card show dataview option.

  5. 메타데이터 를 확장하고 배열을 확장한 다음, 형식displayName 값을 검토합니다.Expand metadata, then the columns array, and review the format and displayName values.

    원 카드 데이터 보기 표시 옵션에 표시되는 형식 및 표시 이름 값의 스크린샷Screenshot of the format and display name values as displayed in the circle card show dataview option.

  6. 시각적 개체로 다시 토글하려면 시각적 개체 위에서 움직이는 도구 모음에서 데이터 보기 표시 를 선택합니다.To toggle back to the visual, in the toolbar floating above the visual, select Show Dataview.

데이터를 사용하도록 시각적 개체 구성Configure the visual to consume data

원 카드 시각적 개체에서 데이터를 사용할 수 있도록 visual.ts 파일을 변경합니다.Make changes to the visual.ts file, so that the circle card visual will be able to consume data.

  1. VS Code에서 visual.ts 파일을 엽니다.Open the visual.ts file in VS Code.

  2. 다음 줄을 추가하여 powerbi 모듈에서 DataView 인터페이스를 가져옵니다.Add the following line to import the DataView interface from the powerbi module.

    import DataView = powerbi.DataView;
    
  3. update 메서드에서 다음을 수행합니다.In the update method, do the following:

    • 다음 명령문을 첫 번째 명령문으로 추가합니다.Add the following statement as the first statement. 이 명령문은 쉽게 액세스할 수 있도록 변수에 dataView 를 할당하고, dataView 개체를 참조하는 변수를 선언합니다.The statement assigns dataView to a variable for easy access, and declares the variable to reference the dataView object.

      let dataView: DataView = options.dataViews[0];
      
    • .text("Value") 를 다음 코드 줄로 바꿉니다.Replace .text("Value") with this line of code:

      .text(<string>dataView.single.value)
      
    • .text("Label") 를 다음 코드 줄로 바꿉니다.Replace .text("Label") with this line of code:

      .text(dataView.metadata.columns[0].displayName)
      
  4. visual.ts 파일을 저장합니다.Save the visual.ts file.

  5. Power BI 서비스에서 시각적 개체를 검토합니다.Review the visual in Power BI service. 이제 시각적 개체가 값 및 표시 이름을 표시합니다.The visual now displays the value and the display name.

다음 단계Next steps