共用方式為


Power BI 視覺效果專案結構

開始建立新 Power BI 視覺效果的最佳方式,就是使用 Power BI 視覺效果的 pbiviz 工具。

若要建立新的視覺效果,請瀏覽至您想要放置 Power BI 視覺效果的目錄,然後執行命令:

pbiviz new <visual project name>

執行此命令會建立包含下列檔案的 Power BI 視覺效果資料夾:

project
├───.vscode
│   ├───launch.json
│   └───settings.json
├───assets
│   └───icon.png
├───node_modules
├───src
│   ├───settings.ts
│   └───visual.ts
├───style
│   └───visual.less
├───capabilities.json
├───package-lock.json
├───package.json
├───pbiviz.json
├───tsconfig.json
└───tslint.json

資料夾和檔案描述

本節會針對 Power BI 視覺效果 pbiviz 工具所建立的目錄,提供其中每個資料夾和檔案的資訊。

.vscode

此資料夾包含 VS Code 專案設定。

若要設定您的工作區,請編輯 .vscode/settings.json 檔案。

如需詳細資訊,請參閱 使用者和工作區設定

assets

此資料夾包含 icon.png 檔案。

Power BI 視覺效果工具會使用此檔案作為 [Power BI 視覺效果] 窗格中的新 Power BI 視覺效果圖示。 此圖示必須是 PNG 檔案,且維度為 20 x 20 像素

src

此資料夾包含視覺效果的原始程式碼。

在此資料夾中,Power BI 視覺效果工具會建立下列檔案:

  • visual.ts - 視覺效果的主要原始程式碼。 閱讀關於 Visual API 的資訊。
  • settings.ts - 視覺效果設定的程式碼。 檔案中的類別會提供用來定義視覺效果屬性的介面。

style

此資料夾包含會保存視覺效果樣式的 visual.less 檔案。

capabilities.json

此檔案包含視覺效果的主要屬性和設定 (或功能)。 此檔案允許視覺效果宣告支援的功能、物件、屬性和資料檢視對應

package-lock.json

此檔案會針對 npm 修改 node_modules 樹狀結構或 package.json 檔案的任何作業自動產生。

如需此檔案的詳細資訊,請參閱官方 npm-package-lock.json 文件。

package.json

此檔案會描述專案套件。 其中包含專案的相關資訊,例如作者、描述和專案相依性。

如需此檔案的詳細資訊,請參閱官方 npm-package.json 文件。

pbiviz.json

此檔案包含視覺效果中繼資料。

若要檢視 pbiviz.json 範例檔案及其中描述中繼資料項目的註解,請參閱中繼資料項目一節。

tsconfig.json

TypeScript 的組態檔。

此檔案必須包含到 .ts 檔案的路徑,也就是視覺效果主要類別的所在位置 (在 pbiviz.json 檔案中的 visualClassName 屬性中指定)。

tslint.json

此檔案包含 TSLint 設定

中繼資料項目

pbiviz.json 檔案中下列程式碼標題中的註解,會描述中繼資料項目。 您需要某些中繼資料 (例如作者的名稱和電子郵件) 才能封裝視覺效果。

注意

{
  "visual": {
     // The visual's internal name.
    "name": "<visual project name>",

    // The visual's display name.
    "displayName": "<visual project name>",

    // The visual's unique ID.
    "guid": "<visual project name>23D8B823CF134D3AA7CC0A5D63B20B7F",

    // The name of the visual's main class. Power BI creates the instance of this class to start using the visual in a Power BI report.
    "visualClassName": "Visual",

    // The visual's version number.
    "version": "1.0.0.0",
    
    // The visual's description (optional)
    "description": "",

    // A URL linking to the visual's support page (optional).
    "supportUrl": "",

    // A link to the source code available from GitHub (optional).
    "gitHubUrl": ""
  },
  // The version of the Power BI API the visual is using.
  "apiVersion": "2.6.0",

  // The name of the visual's author and email.
  "author": { "name": "", "email": "" },

  // 'icon' holds the path to the icon file in the assets folder; the visual's display icon.
  "assets": { "icon": "assets/icon.png" },

  // Contains the paths for JS libraries used in the visual.
  // Note: externalJS' isn't used in the Power BI visuals tool version 3.x.x or higher.
  "externalJS": null,

  // The path to the 'visual.less' style file.
  "style": "style/visual.less",

  // The path to the `capabilities.json` file.
  "capabilities": "capabilities.json",

  // The path to the `dependencies.json` file which contains information about R packages used in R based visuals.
  "dependencies": null,

  // An array of paths to files with localizations.
  "stringResources": []
}