외부 라이브러리 추가Adding external libraries

이 문서에서는 Power BI 시각적 개체에서 외부 라이브러리를 사용하는 방법을 설명합니다.This article describes how to use external libraries in Power BI visuals. 여기에는 Power BI 시각적 개체의 코드에서 외부 라이브러리를 설치하고, 가져오고, 호출하는 방법에 대한 정보가 포함되어 있습니다.It includes information about installing, importing, and calling external libraries from the Power BI visual's code.

JavaScript 라이브러리JavaScript libraries

  1. npm 또는 yarn과 같은 패키지 관리자를 사용하여 외부 JavaScript 라이브러리를 설치합니다.Install an external JavaScript library by using any package manager such as npm or yarn.
  2. 외부 라이브러리를 사용하여 필요한 모듈을 원본 파일로 가져옵니다.Import the required modules into the source files using the external library.

참고

입력한 내용을 JavaScript 라이브러리에 추가하고 intellisense 및 컴파일 타임 안전을 얻으려면 적절한 패키지를 설치해야 합니다.If you'd like to add typings to your JavaScript library, and get intellisense and compile-time safety, make sure that you install the appropriate package.

D3 라이브러리 설치Installing the d3 library

다음은 npm을 사용하여 d3 라이브러리@types/d3 패키지를 설치하는 예입니다.This is an example of installing the d3 library and the @types/d3 package, using npm.

전체 예제는 Power BI 시각화 코드를 참조하세요.For a full example, see the Power BI visualizations code.

  1. d3 패키지와 d3 형식 패키지를 설치합니다.Install the d3 package and the d3 types package.

    npm install d3@5 --save
    npm install @types/d3@5 --save
    
  2. d3 라이브러리가 사용되는 파일(예: visual.ts)로 이 라이브러리를 가져옵니다.Import the d3 library in the files that use it, such as visual.ts.

    import * as d3 from "d3";
    

CSS 프레임워크CSS framework

  1. npm 또는 yarn과 같은 패키지 관리자를 사용하여 외부 CSS 프레임워크를 설치합니다.Install an external CSS framework by using any package manager such as npm or yarn.
  2. 시각적 개체의 .less 파일에 import 문을 포함합니다.In the .less file of the visual, include the import statement.

부트스트랩 설치Installing bootstrap

npm을 사용하여 부트스트랩을 설치하는 예입니다.This is an example of installing bootstrap using npm.

전체 예제는 Power BI 시각화 코드를 참조하세요.For a full example, see the Power BI visualizations code.

  1. 부트스트랩 패키지를 설치합니다.Install the bootstrap package.

    npm install bootstrap --save
    
  2. visual.lessimport 문을 포함합니다.Include the import statement in visual.less.

    @import (less) "node_modules/bootstrap/dist/css/bootstrap.css";