โครงสร้างของโครงการแสดงผล 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

ในการกำหนดค่าพื้นที่ทำงานของคุณ แก้ไขไฟล์ .vscode/settings.json

สำหรับข้อมูลเพิ่มเติม ดู การตั้งค่าผู้ใช้และพื้นที่ทำงาน

สินทรัพย์

โฟลเดอร์นี้ประกอบด้วยไฟล์ icon.png

เครื่องมือวิชวล Power BI ใช้ไฟล์นี้เป็นไอคอนวิชวล Power BI ใหม่ ในแผงการแสดงภาพของ Power BI ไอคอนนี้ต้องเป็นไฟล์ PNG, 20 พิกเซล โดย 20 พิกเซล

src

โฟลเดอร์นี้ประกอบด้วยโค้ดแหล่งที่มาของวิชวล

ในโฟลเดอร์นี้เครื่องมือวิชวล Power BI จะสร้างไฟล์ต่อไปนี้:

• visual.ts - โค้ดแหล่งที่มาหลักของวิชวล
• settings.ts - โค้ดการตั้งค่าของวิชวล คลาสในไฟล์มีอินเทอร์เฟซสำหรับการกำหนด คุณสมบัติของวิชวลของคุณ

ลักษณะ

โฟลเดอร์นี้ประกอบด้วยไฟล์ visual.less ซึ่งมีลักษณะของวิชวล

capabilities.json

ไฟล์นี้ประกอบด้วยคุณสมบัติและการตั้งค่าหลัก (หรือ ความสามารถ) สำหรับวิชวล อนุญาตให้วิชวลทำการสนับสนุนฟีเจอร์ วัตถุ คุณสมบัติ และ มุมมองการดูข้อมูล

package-lock.json

ไฟล์นี้สร้างขึ้นมาโดยอัตโนมัติสำหรับการดำเนินการใดๆ ที่ npm ปรับเปลี่ยน node_modules แผนผังต้นไม้หรือ package.json ไฟล์

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไฟล์นี้ ให้ดูเอกสารกำกับโปรแกรมทางการของ npm-package-lock.json

package.json

ไฟล์นี้อธิบายเกี่ยวกับแพคเกจโครงการ สิ่งนี้ประกอบด้วยข้อมูลเกี่ยวกับโครงการ เช่น ผู้เขียน คำอธิบายและการขึ้นต่อกันของโครงการ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไฟล์นี้ ให้ดูเอกสารกำกับโปรแกรมทางการของ npm-package-lock.json

pbiviz.json

ไฟล์นี้ประกอบด้วยเมตาดาต้าวิชวล

ในการดูตัวอย่าง pbiviz.json ไฟล์ที่มีข้อคิดเห็นที่อธิบายรายการเมตาดาต้า ให้ดูที่ส่วนรายการเมตาดาต้า

tsconfig.json

ไฟล์การกำหนดค่าสำหรับ TypeScript.

ไฟล์นี้ต้องประกอบด้วยเส้นทางไปยังแฟ้ม *.ts ที่มีชั้นหลักของวิชวลตั้งอยู่ ที่ระบุเฉพาะใน visualClassName คุณสมบัติใน pbiviz.json ไฟล์

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",
    
    // 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": []
}

ขั้นตอนถัดไป