แชร์ผ่าน

โครงสร้างของโครงการวิชวล 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 พิกเซลคูณ 20 พิกเซล

src

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

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

  • visual.ts - โค้ดแหล่งที่มาหลักของวิชวล อ่านเกี่ยวกับ 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 ไฟล์ที่มีชั้นหลักของวิชวลตั้งอยู่ ตามที่ระบุใน visualClassName คุณสมบัติ ใน pbiviz.json ไฟล์

tslint.json

ไฟล์นี้ประกอบด้วย การกําหนดค่า TSLint

รายการเมตาดาต้า

ข้อคิดเห็นในคําบรรยายโค้ดต่อไปนี้จากไฟล์อธิบาย pbiviz.json รายการเมตาดาต้า ต้องมีเมตาดาต้าบางอย่าง เช่น ชื่อและอีเมลของผู้เขียนก่อนที่คุณจะสามารถแพคเกจวิชวลได้

หมายเหตุ

  • จากเวอร์ชัน 3.x.x ของเครื่องมือexternalJS pbiviz ไม่ได้รับการรองรับ
  • หมายเลขเวอร์ชันควรประกอบด้วยตัวเลขสี่หลักในรูปแบบ x.x.x.xต่อไปนี้
  • สําหรับการสนับสนุนการแปลเป็นภาษาท้องถิ่น ให้ เพิ่มตําแหน่งที่ตั้ง Power BI ไปยังวิชวลของคุณ
{
  "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": []
}

เนื้อหาที่เกี่ยวข้อง