다음을 통해 공유


Visual API

모든 시각적 개체는 IVisual 인터페이스를 구현하는 클래스로 시작합니다. IVisual 인터페이스를 구현하는 클래스가 정확히 하나만 있다면 클래스 이름은 무엇이든 지정할 수 있습니다.

참고 항목

시각적 개체 클래스 이름은 visualClassName 파일의 pbiviz.json과 동일해야 합니다.

시각적 개체 클래스는 다음 샘플과 같이 다음 메서드를 구현해야 합니다.

  • constructor - 시각적 개체의 상태를 초기화하는 표준 생성자입니다.
  • update - 시각적 개체의 데이터 업데이트
  • getFormattingModel - 필요에 따라 속성을 수정할 수 있는 속성 창(서식 옵션)을 채우는 서식 지정 모델을 반환합니다.
  • destroy - 정리를 위한 표준 소멸자
class MyVisual implements IVisual {
    
    constructor(options: VisualConstructorOptions) {
        //one time setup code goes here (called once)
    }
    
    public update(options: VisualUpdateOptions): void {
        //code to update your visual goes here (called on all view or data changes)
    }

    public getFormattingModel(): FormattingModel {
        // returns modern format pane formatting model that contain all format pane components and properties (called on opening format and analytics pane or on editing format properties)
    }
    
    public destroy(): void {
        //one time cleanup code goes here (called once)
    }
}

생성자

시각적 개체 클래스의 constructor는 시각적 개체를 인스턴스화할 때 호출됩니다. 시각적 요구 사항이 있는 모든 설정 작업에 사용할 수 있습니다.

constructor(options: VisualConstructorOptions)

VisualConstructorOptions

이러한 인터페이스는 각 새 API 버전으로 업데이트됩니다. 가장 최신 업데이트된 인터페이스 형식은 GitHub 리포지토리로 이동하세요.

다음 목록에서는 VisualConstructorOptions 인터페이스의 일부 속성을 설명합니다.

  • element: HTMLElement - 시각적 개체를 포함하는 DOM 요소에 대한 참조

  • host: IVisualHost - 시각적 호스트와 상호 작용하는 데 사용할 수 있는 속성 및 서비스 컬렉션(Power BI)

    IVisualHost - 다음 서비스를 포함합니다.

    • createSelectionIdBuilder - 시각적 개체에서 선택 가능한 항목에 대한 메타데이터를 생성하고 저장.
    • createSelectionManager - 선택 상태의 변경 내용을 시각적 개체의 호스트에 알리는 데 사용되는 통신 브리지를 만듭니다. 선택 API참조하세요.
    • hostCapabilities
    • refreshHostData
    • downloadService - 다운로드의 확장된 결과 정보를 반환.
    • eventService - 렌더링 이벤트에 대한 정보를 반환.
    • hostEnv
    • displayWarningIcon - 오류 또는 경고 메시지를 반환.
    • licenseManager - 라이선스 정보를 반환.
    • createLocalizationManager - 지역화에 도움이 되는 관리자 생성.
    • applyJsonFilter - 특정 필터 형식 적용. 필터 API 참조
    • applyCustomSort - 사용자 지정 정렬 옵션 허용.
    • acquireAADTokenService - Microsoft Entra ID 인증 정보 반환.
    • webAccessService - 원격 리소스에 액세스에 대한 사용 권한 상태 반환.
    • openModalDialog - 대화 상자 반환.
    • persistProperties - 사용자가 영구 설정을 만들고 시각적 정의와 함께 저장할 수 있으므로 다음 다시 로드에서 사용할 수 있습니다.
    • eventService - Render 이벤트를 지원하는 이벤트 서비스 반환
    • storageService - 시각적 개체에서 로컬 스토리지를 사용하는 데 도움이 되는 서비스 반환
    • storageV2Service - 시각적 개체에서 로컬 스토리지 버전 2를 사용하는 데 도움이 되는 서비스 반환
    • tooltipService - 시각적 개체에서 도구 설명을 사용하는 데 도움이 되는 도구 설명 서비스 반환
    • telemetry
    • drill
    • launchUrl - 다음 탭에서 URL 시작에 도움
    • authenticationService - Microsoft Entra ID 토큰 반환.
    • locale - 로캘 문자열을 반환하고 지역화 참조
    • instanceId - 현재 시각적 개체 인스턴스를 식별하는 문자열 반환
    • colorPalette - 데이터에 색을 적용하는 데 필요한 colorPalette 반환
    • fetchMoreData - 표준 제한(1,000개 행)보다 많은 데이터 사용 지원. 더 많은 데이터 가져오기 참조
    • switchFocusModeState - 포커스 모드 상태를 변경하는 데 도움이 됩니다.

업데이트

모든 시각적 개체는 데이터 또는 호스트 환경이 변경될 때마다 호출되는 공용 업데이트 메서드를 구현해야 합니다.

public update(options: VisualUpdateOptions): void

VisualUpdateOptions

  • viewport: IViewport - 시각적 개체를 렌더링해야 하는 뷰포트의 차원
  • dataViews: DataView[] - 시각적 개체를 렌더링하는 데 필요한 모든 데이터를 포함하는 데이터 뷰 개체입니다(시각적 개체는 일반적으로 DataView 아래의 범주 속성을 사용합니다)
  • type: VisualUpdateType - 업데이트되는 데이터 형식을 나타내는 플래그(데이터 | 크기 조정 | ViewMode | 스타일 | ResizeEnd)
  • viewMode: ViewMode - 시각적 개체의 보기 모드를 나타내는 플래그(보기 | 편집 | InFocusEdit)
  • editMode: EditMode - 시각적 개체의 편집 모드를 나타내는 플래그(기본 | 고급)(시각적 개체가 advancedEditMode를 지원하는 경우 editMode고급으로 설정된 경우에만 고급 UI 컨트롤을 렌더링해야 합니다. AdvancedEditMode참조)
  • operationKind?: VisualDataChangeOperationKind - 데이터 변경 유형을 나타내는 플래그(만들기 | Append)
  • jsonFilters?: IFilter[] - 적용된 json 필터 컬렉션
  • isInFocus?: boolean - 시각적 개체가 포커스 모드인지 여부를 나타내는 플래그

getFormattingModel (선택 사항)

이 메서드는 속성 창을 열거나 사용자가 창의 속성을 편집할 때마다 호출됩니다. 속성 창 디자인, 계층 구조, 속성 및 최신 서식 값에 대한 모든 정보가 포함된 FormattingModel(을)를 반환합니다.

getFormattingModel(): visuals.FormattingModel;

destroy(선택 사항)

소멸 함수는 시각적 개체를 언로드할 때 호출되며 이벤트 수신기 제거와 같은 정리 작업에 사용될 수 있습니다.

public destroy(): void

Power BI는 일반적으로 destroy를 호출하지 않습니다. 시각적 개체를 포함하는 전체 IFrame을 제거하는 것이 더 빠르기 때문입니다.