บทช่วยสอน: สร้างวิชวล Power BI โดยใช้ React

ในฐานะนักพัฒนา คุณสามารถสร้างวิชวล Power BI ของคุณเองได้ วิชวลเหล่านี้สามารถใช้ได้โดยคุณ องค์กรของคุณ หรือบุคคลที่สาม

ในบทช่วยสอนนี้ คุณพัฒนาวิชวล Power BI โดยใช้ React วิชวลแสดงค่าหน่วยวัดที่จัดรูปแบบแล้วภายในวงกลม วิชวลมีขนาดที่ปรับเปลี่ยนได้และช่วยให้คุณสามารถกําหนดค่าได้

ในบทช่วยสอนนี้ คุณจะเรียนรู้วิธีการ:

• สร้างโครงการการพัฒนาสําหรับวิชวลของคุณ
• พัฒนาวิชวลของคุณโดยใช้ React
• กําหนดค่าวิชวลของคุณเพื่อประมวลผลข้อมูล
• กําหนดค่าวิชวลของคุณเพื่อปรับให้เข้ากับการเปลี่ยนแปลงขนาด
• กําหนดค่าการตั้งค่าสีและเส้นขอบที่ปรับเปลี่ยนได้สําหรับวิชวลของคุณ

หมายเหตุ

สําหรับรหัสแหล่งที่มาแบบเต็มของวิชวลนี้ โปรดดู การแสดงผลด้วยภาพของ Power BI ของการ์ดวงกลม React

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะเริ่มพัฒนาวิชวล Power BI ของคุณ ให้ตรวจสอบว่าคุณมีทุกอย่างที่แสดงอยู่ในส่วนนี้

• บัญชี Power BI Pro หรือ Premium Per User (PPU) ถ้าคุณยังไม่มี ลงทะเบียน สําหรับรุ่นทดลองใช้ฟรี

• รหัส Visual Studio (VS Code) VS Code คือสภาพแวดล้อมการพัฒนาแบบบูรณาการที่เหมาะสม (IDE) สําหรับการพัฒนาแอปพลิเคชัน JavaScript และ TypeScript

• Windows PowerShell เวอร์ชัน 4 หรือใหม่กว่า (สําหรับ Windows) Terminal (สําหรับ Mac)

• สภาพแวดล้อมที่พร้อมสําหรับการพัฒนาวิชวล Power BI ตั้งค่าสภาพแวดล้อมของคุณสําหรับการพัฒนาวิชวล Power BI

• บทช่วยสอนนี้ใช้รายงาน การวิเคราะห์การขายของสหรัฐอเมริกา คุณสามารถดาวน์โหลดรายงานนี้และอัปโหลดไปยังบริการของ Power BI หรือใช้รายงานของคุณเอง ถ้าคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับบริการของ Power BI และการอัปโหลดไฟล์ โปรดดูที่ เริ่มต้นใช้งานที่สร้างในบทช่วยสอน บริการของ Power BI

สร้างโครงการการพัฒนา

ในส่วนนี้ คุณสร้างโครงการสําหรับวิชวลการ์ดวงกลม React

1. เปิด PowerShell และนําทางไปยังโฟลเดอร์ที่คุณต้องการสร้างโครงการของคุณ

2. ป้อนคําสั่งต่อไปนี้:

   pbiviz new ReactCircleCard
   

3. นําทางไปยังโฟลเดอร์ของโครงการ

   cd ReactCircleCard
   

4. เริ่มวิชวลการ์ดวงกลม React ขณะนี้วิชวลของคุณกําลังทํางานอยู่ในขณะที่โฮสต์บนคอมพิวเตอร์ของคุณ

   pbiviz start
   

   สำคัญ

   เมื่อต้องการหยุดวิชวลจากการเรียกใช้ ใน PowerShell ให้ป้อน +C และถ้าได้รับพร้อมท์ให้ยุติชุดงาน ให้ป้อน Y แล้วกด Enter

ดูการ์ดวงกลม React ในบริการของ Power BI

ในการทดสอบวิชวลใน บริการของ Power BI เราจะใช้รายงาน การวิเคราะห์การขาย ของสหรัฐอเมริกา คุณสามารถดาวน์โหลดรายงานนี้และอัปโหลดไปยังบริการของ Power BI ได้

คุณยังสามารถใช้รายงานของคุณเองเพื่อทดสอบวิชวลได้

หมายเหตุ

ก่อนที่คุณจะดําเนินการต่อ ให้ตรวจสอบว่าคุณ เปิดใช้งานโหมดนักพัฒนาวิชวล

1. ลงชื่อเข้าใช้ PowerBI.com และเปิดรายงาน การวิเคราะห์การขายของสหรัฐอเมริกา

2. เลือก แก้ไข

   

3. สร้างหน้าใหม่สําหรับการทดสอบโดยการคลิกที่ปุ่ม หน้าใหม่ ที่ด้านล่างของส่วนติดต่อบริการของ Power BI

   

4. จากบานหน้าต่างการแสดงภาพ เลือกวิชวลนักพัฒนา

   

   วิชวลนี้แสดงวิชวลแบบกําหนดเองที่คุณกําลังใช้งานบนคอมพิวเตอร์ของคุณ ซึ่งจะพร้อมใช้งานเฉพาะเมื่อ เปิดใช้งานการตั้งค่าการดีบักวิ ชวลแบบกําหนดเอง

5. ตรวจสอบว่ามีการเพิ่มวิชวลไปยังพื้นที่รายงาน

   

   นี่คือวิชวลแบบง่าย ๆ ที่แสดงจํานวนครั้งที่มีการเรียกใช้วิธีการอัปเดต ในขั้นตอนนี้ วิชวลจะไม่เรียกใช้ข้อมูลใด ๆ

   หมายเหตุ

   ถ้าวิชวลแสดงข้อความแสดงข้อผิดพลาดในการเชื่อมต่อ ให้เปิดแท็บใหม่ในเบราว์เซอร์ของคุณ ไปที่ https://localhost:8080/assetsและอนุญาตให้เบราว์เซอร์ของคุณใช้ที่อยู่นี้

   

6. ในขณะที่เลือกวิชวลใหม่ให้ไปที่บานหน้าต่าง ข้อมูล ขยาย ยอดขาย และเลือก ปริมาณ

   

7. หากต้องการทดสอบการตอบสนองของวิชวลให้ปรับขนาดและสังเกตว่า ค่า อัปเดตจํานวน จะเพิ่มขึ้นทุกครั้งที่คุณปรับขนาดวิชวล

   

ตั้งค่า React ในโครงการของคุณ

ในส่วนนี้ คุณจะได้เรียนรู้วิธีการตั้งค่า React สําหรับโครงการวิชวล Power BI ของคุณ

เปิด PowerShell และหยุดวิชวลไม่ให้ทํางานโดยการใส่ Ctrl + C หากได้รับแจ้งให้ยุติชุดงาน ให้ป้อน Y แล้วกด Enter

ติดตั้ง React

หากต้องการติดตั้งการอ้างอิง React ที่จําเป็น ให้เปิด PowerShell ใน โฟลเดอร์ ReactCircleCard ของคุณและเรียกใช้คําสั่งต่อไปนี้:

npm i react react-dom

ติดตั้งข้อกําหนดชนิด React

หากต้องการติดตั้งข้อกําหนดประเภทสําหรับ React ให้เปิด PowerShell ใน โฟลเดอร์ reactCircleCard ของคุณและเรียกใช้คําสั่งต่อไปนี้:

npm i @types/react @types/react-dom

สร้างคลาสคอมโพเนนต์ React

ทําตามขั้นตอนเหล่านี้เพื่อสร้างคลาสคอมโพเนนต์ React

1. เปิดรหัส VS และนําทางไปยังโฟลเดอร์ reactCircleCard

2. สร้างไฟล์ใหม่โดยการเลือกไฟล์>ไฟล์ใหม่

3. คัดลอกโค้ดต่อไปนี้ลงในไฟล์ใหม่

   import * as React from "react";
   
   export class ReactCircleCard extends React.Component<{}>{
       render(){
           return (
               <div className="circleCard">
                   Hello, React!
               </div>
           )
       }
   }
   
   export default ReactCircleCard;
   

4. เลือก บันทึกเป็น และนําทางไปยังโฟลเดอร์ src

5. บันทึกไฟล์ดังนี้:

   • ในฟิลด์ ชื่อไฟล์ ให้ป้อนคอมโพเนนต์
   • จากเมนูดรอปดาวน์ บันทึกเป็นชนิด ให้เลือก TypeScript React

เพิ่ม React ไปยังไฟล์วิชวล

แทนที่โค้ดใน ไฟล์ visual.ts ด้วยโค้ดที่เปิดใช้งานโดยใช้ React

1. ใน โฟลเดอร์ src เปิด visual.ts และแทนที่โค้ดในไฟล์ด้วยรหัสต่อไปนี้:

   "use strict";
   import powerbi from "powerbi-visuals-api";
   
   import DataView = powerbi.DataView;
   import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
   import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
   import IVisual = powerbi.extensibility.visual.IVisual;
   
   // Import React dependencies and the added component
   import * as React from "react";
   import * as ReactDOM from "react-dom";
   import ReactCircleCard from "./component";
   
   import "./../style/visual.less";
   
   export class Visual implements IVisual {
   
       constructor(options: VisualConstructorOptions) {
   
       }
   
       public update(options: VisualUpdateOptions) {
   
       }
   }
   

   หมายเหตุ

   ตามค่าเริ่มต้นการตั้งค่า Power BI TypeScript ไม่รู้จักไฟล์ tsx ของ React การไฮไลต์ component VS Code เป็นข้อผิดพลาด

2. เมื่อต้องการแสดงคอมโพเนนต์ ให้เพิ่มองค์ประกอบ HTML เป้าหมายไปยัง visual.ts องค์ประกอบนี้คือ HTMLElement ใน VisualConstructorOptionsซึ่งจะถูกส่งผ่านไปยังคอนสตรักเตอร์

   1. ในโฟลเดอร์ src เปิด visual.ts

   2. เพิ่มโค้ดต่อไปนี้ลงใน Visual คลาส:

   private target: HTMLElement;
   private reactRoot: React.ComponentElement<any, any>;
   

   3. เพิ่มบรรทัดต่อไปนี้ลงใน VisualConstructorOptions คอนสตรักเตอร์:

   this.reactRoot = React.createElement(ReactCircleCard, {});
   this.target = options.element;
   
   ReactDOM.render(this.reactRoot, this.target);
   

   ตอนนี้ ไฟล์ visual.ts ของคุณควรมีลักษณะดังนี้:

   "use strict";
   import powerbi from "powerbi-visuals-api";
   
   import DataView = powerbi.DataView;
   import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
   import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
   import IVisual = powerbi.extensibility.visual.IVisual;
   import * as React from "react";
   import * as ReactDOM from "react-dom";
   import ReactCircleCard from "./component";    
   
   import "./../style/visual.less";
   
   export class Visual implements IVisual {
       private target: HTMLElement;
       private reactRoot: React.ComponentElement<any, any>;
   
       constructor(options: VisualConstructorOptions) {
           this.reactRoot = React.createElement(ReactCircleCard, {});
           this.target = options.element;
   
           ReactDOM.render(this.reactRoot, this.target);
       }
   
       public update(options: VisualUpdateOptions) {
   
       }
   }
   

3. บันทึก visual.ts

แก้ไขไฟล์ tsconfig

แก้ไข tsconfig.json เพื่อทํางานกับ React

1. ในโฟลเดอร์ reactCircleCard ให้เปิด tsconfig.json และเพิ่มสองบรรทัดไปยังจุดเริ่มต้นของรายการcompilerOptions

   "jsx": "react",
   "types": ["react", "react-dom"],
   

   ตอนนี้ ไฟล์ tsconfig.json ของคุณควรมีลักษณะดังนี้ และ component ข้อผิดพลาดใน visual.ts ควรหายไป

   {
       "compilerOptions": {
           "jsx": "react",
           "types": ["react", "react-dom"],
           "allowJs": false,
           "emitDecoratorMetadata": true,
           "experimentalDecorators": true,
           "target": "es6",
           "sourceMap": true,
           "outDir": "./.tmp/build/",
           "moduleResolution": "node",
           "declaration": true,
           "lib": [
               "es2015",
               "dom"
           ]
       },
       "files": [
           "./src/visual.ts"
       ]
   }
   

2. บันทึก tsconfig.json

ทดสอบวิชวลของคุณ

เปิด PowerShell ใน โฟลเดอร์ CircleCardVisual และเรียกใช้โครงการของคุณ:

pbiviz start

เมื่อคุณเพิ่มวิชวลนักพัฒนาใหม่ในรายงานของคุณในบริการของ Power BI จะมีลักษณะดังนี้:

กําหนดค่าเขตข้อมูลของวิชวลของคุณ

กําหนดค่าไฟล์ความสามารถของวิชวลของคุณเพื่อให้สามารถส่งเขตข้อมูลเดียวเท่านั้นไปยังเขตข้อมูล หน่วยวัด ของวิชวล

1. ในรหัส VS จากโฟลเดอร์ reactCircleCard ให้เปิด capabilities.json

2. แสดง ReactCircleCard ค่า Measure Dataเดียว เอาวัตถุCategory DataออกจากdataRoles

   หลังจากลบ Category Data วัตถุแล้ว dataRoles คีย์จะมีลักษณะดังนี้:

   "dataRoles": [
       {
           "displayName": "Measure Data",
           "name": "measure",
           "kind": "Measure"
       }
   ],
   

3. ลบเนื้อหาทั้งหมดของ objects คีย์ออก (คุณจะใส่ข้อมูลลงในภายหลัง)

   หลังจากที่คุณลบเนื้อหาออกแล้ว คีย์ objects จะมีลักษณะดังนี้:

   "objects": {},
   

4. dataViewMappingsแทนที่คุณสมบัติด้วยโค้ดต่อไปนี้ max: 1ซึ่งmeasureระบุว่าสามารถส่งเขตข้อมูลเดียวเท่านั้นไปยังเขตข้อมูลหน่วยวัดของวิชวล

   "dataViewMappings": [
       {
           "conditions": [
               {
                   "measure": {
                       "max": 1
                   }
               }
           ],
           "single": {
               "role": "measure"
           }
       }
   ]
   

5. บันทึกการเปลี่ยนแปลงที่คุณทํากับ capabilities.json

6. ตรวจสอบว่าpbiviz startกําลังทํางานและอยู่ในบริการของ Power BI ให้รีเฟรชวิชวล React Circle Card ของคุณ เขตข้อมูลหน่วยวัดสามารถยอมรับเขตข้อมูลเดียวเท่านั้น ตามที่ระบุโดยmax: 1

   

อัปเดตลักษณะของวิชวล

ในส่วนนี้ คุณเปลี่ยนรูปร่างของวิชวลเป็นวงกลม ใช้ไฟล์ visual.less เพื่อควบคุมลักษณะของวิชวลของคุณ

1. จากโฟลเดอร์ลักษณะ เปิด visual.less

2. แทนที่เนื้อหาของ visual.less ด้วยโค้ดต่อไปนี้

   .circleCard {
       position: relative;
       box-sizing: border-box;
       border: 1px solid #000;
       border-radius: 50%;
       width: 200px;
       height: 200px;
   }
   
   p {
       text-align: center;
       line-height: 30px;
       font-size: 20px;
       font-weight: bold;
   
       position: relative;
       top: -30px;
       margin: 50% 0 0 0;
   }
   

3. บันทึก visual.less

ตั้งค่าวิชวลของคุณเพื่อรับคุณสมบัติจาก Power BI

ในส่วนนี้ คุณกําหนดค่าวิชวลเพื่อรับข้อมูลจาก Power BI และส่งการอัปเดตไปยังอินสแตนซ์ในไฟล์ component.tsx

แสดงข้อมูลโดยใช้ React

คุณสามารถแสดงข้อมูลโดยใช้ React คอมโพเนนต์สามารถแสดงข้อมูลจากสถานะของตนเอง

1. ในรหัส VS จากโฟลเดอร์ reactCircleCard ให้เปิด component.tsx

2. แทนที่เนื้อหาของ component.tsx ด้วยโค้ดต่อไปนี้

   import * as React from "react";
   
   export interface State {
       textLabel: string,
       textValue: string
   }
   
   export const initialState: State = {
       textLabel: "",
       textValue: ""
   }
   
   export class ReactCircleCard extends React.Component<{}, State>{
       constructor(props: any){
           super(props);
           this.state = initialState;
       }
   
       render(){
           const { textLabel, textValue } = this.state;
   
           return (
               <div className="circleCard">
                   <p>
                       {textLabel}
                       <br/>
                       <em>{textValue}</em>
                   </p>
               </div>
           )
       }
   }
   

3. บันทึก component.tsx

ตั้งค่าวิชวลของคุณเพื่อรับข้อมูล

วิชวลได้รับข้อมูลเป็นอาร์กิวเมนต์ของ update วิธีการ ในส่วนนี้ คุณอัปเดตวิธีการนี้เพื่อรับข้อมูล

รหัสต่อไปนี้เลือก textLabel และ textValue จาก DataViewและถ้ามีข้อมูลอยู่ ให้อัปเดตสถานะคอมโพเนนต์

1. ในรหัส VS จากโฟลเดอร์ src เปิด visual.ts

2. แทนที่บรรทัด import ReactCircleCard from "./component"; ด้วยโค้ดต่อไปนี้:

   import { ReactCircleCard, initialState } from "./component";
   

3. เพิ่มโค้ดต่อไปนี้ไปยัง update วิธีการ

   if(options.dataViews && options.dataViews[0]){
       const dataView: DataView = options.dataViews[0];
   
       ReactCircleCard.update({
           textLabel: dataView.metadata.columns[0].displayName,
           textValue: dataView.single.value.toString()
       });
   } else {
       this.clear();
   }
   

4. สร้าง clear วิธีการ โดยการเพิ่มโค้ดต่อไปนี้ที่ update ด้านล่างวิธีการ

   private clear() {
       ReactCircleCard.update(initialState);
   }
   

5. บันทึก visual.ts

ตั้งค่าวิชวลของคุณเพื่อส่งข้อมูล

ในส่วนนี้ คุณอัปเดตวิชวลเพื่อส่งการอัปเดตไปยังอินสแตนซ์ในไฟล์คอมโพเนนต์

1. ในรหัส VS จากโฟลเดอร์ src เปิด component.tsx

2. เพิ่มโค้ดต่อไปนี้ลงใน ReactCircleCard คลาส:

   private static updateCallback: (data: object) => void = null;
   
   public static update(newState: State) {
       if(typeof ReactCircleCard.updateCallback === 'function'){
           ReactCircleCard.updateCallback(newState);
       }
   }
   
   public state: State = initialState;
   
   public componentWillMount() {
           ReactCircleCard.updateCallback = (newState: State): void => { this.setState(newState); };
   }
   
   public componentWillUnmount() {
       ReactCircleCard.updateCallback = null;
   }
   

3. บันทึก component.tsx

ดูการเปลี่ยนแปลงในวิชวล

ทดสอบวิ ชวล React Circle Card ของคุณเพื่อดูการเปลี่ยนแปลงที่คุณทํา

1. ตรวจสอบว่าpbiviz startกําลังทํางานอยู่ และในบริการของ Power BI ให้รีเฟรชวิชวล React Circle Card ของคุณ

2. เพิ่ม ยอดขาย ลงในเขตข้อมูล หน่วยวัด ของวิชวล

ทําให้วิชวลของคุณปรับขนาดได้

ในปัจจุบัน วิชวลของคุณมีความกว้างและความสูงคงที่ เพื่อให้วิชวลสามารถปรับขนาดได้ คุณจําเป็นต้องกําหนดsizeตัวแปรทั้งในไฟล์ visual.ts และ component.tsx ในส่วนนี้ คุณทําให้วิชวลสามารถปรับขนาดได้

หลังจากที่คุณทําตามขั้นตอนที่ระบุไว้ในส่วนนี้เสร็จแล้วเส้นผ่านศูนย์กลางของวงกลมในวิชวลของคุณจะสอดคล้องกับความกว้างหรือขนาดความสูงที่น้อยที่สุดและคุณจะสามารถปรับขนาดได้ในบริการของ Power BI

กําหนดค่าไฟล์ visual.ts

รับขนาดปัจจุบันของวิวพอร์ตวิชวลจาก options วัตถุ

1. ในรหัส VS จากโฟลเดอร์ src เปิด visual.ts

2. แทรกรหัสนี้เพื่อนําเข้า IViewport อินเทอร์เฟส

   import IViewport = powerbi.IViewport;
   

3. viewportเพิ่มคุณสมบัติ ไปยังvisualคลาส

   private viewport: IViewport;
   

4. ใน update วิธีการ ก่อน ReactCircleCard.updateเพิ่มโค้ดต่อไปนี้

   this.viewport = options.viewport;
   const { width, height } = this.viewport;
   const size = Math.min(width, height);
   

5. ในวิธีการ ใน updateReactCircleCard.updateให้เพิ่มsize

   size,
   

6. บันทึก visual.ts

กําหนดค่าไฟล์ component.tsx

1. ในรหัส VS จากโฟลเดอร์ src เปิด component.tsx

2. เพิ่มโค้ดต่อไปนี้ไปยังexport interface State

   size: number
   

3. เพิ่มโค้ดต่อไปนี้ไปยังexport const initialState: State

   size: 200
   

4. ใน render วิธีการ ให้ทําการเปลี่ยนแปลงต่อไปนี้ในโค้ด:

   1. เพิ่มsizeไปยังconst { textLabel, textValue, size } = this.state; ตอนนี้การประกาศนี้ควรมีลักษณะดังนี้:

      const { textLabel, textValue, size } = this.state;
      

   2. เพิ่มโค้ดต่อไปนี้ด้านบนreturn

      const style: React.CSSProperties = { width: size, height: size };
      

   3. แทนที่บรรทัดที่ส่งกลับ<div className="circleCard">ด้วย:

      <div className="circleCard" style={style}>
      

5. บันทึก component.tsx

กําหนดค่าไฟล์วิชวล

1. ในรหัส VS จากโฟลเดอร์ลักษณะ เปิด visual.less

2. ใน .circleCardแทนที่ width และ height ด้วย min-width และmin-height

   min-width: 200px;
   min-height: 200px;
   

3. บันทึก visual.less

ทําให้วิชวล Power BI ของคุณสามารถปรับแต่งได้

ในส่วนนี้ คุณสามารถเพิ่มความสามารถในการกําหนดวิชวลของคุณเอง ได้อนุญาตให้ผู้ใช้สามารถทําการเปลี่ยนแปลงสีและความหนาของเส้นขอบได้

เพิ่มสีและความหนาไปยังไฟล์ความสามารถ

เพิ่มสีและความหนาของเส้นขอบให้กับobjectคุณสมบัติใน capabilities.json

1. ในรหัส VS จากโฟลเดอร์ reactCircleCard ให้เปิด capabilities.json

2. เพิ่มการตั้งค่าต่อไปนี้ไปยัง objects คุณสมบัติ

   "circle": {
       "properties": {
          "circleColor": {
               "type": {
                   "fill": {
                       "solid": {
                           "color": true
                       }
                   }
               }
           },
           "circleThickness": {
               "type": {
                   "numeric": true
               }
           }
       }
   }
   

3. บันทึก capabilities.json

เพิ่มคลาสการตั้งค่าการจัดรูปแบบวงกลมไปยังไฟล์การตั้งค่า

Circleเพิ่มการตั้งค่าการจัดรูปแบบไปยัง settings.ts สําหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการสร้างการตั้งค่าแบบจําลองการจัดรูปแบบ ดู ยูทิลิตี้การจัดรูปแบบ

1. ในรหัส VS จากโฟลเดอร์ src เปิด settings.ts

2. แทนที่โค้ดใน settings.ts ด้วยโค้ดต่อไปนี้:

   "use strict";
   
   import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
   
   import FormattingSettingsCard = formattingSettings.SimpleCard;
   import FormattingSettingsSlice = formattingSettings.Slice;
   import FormattingSettingsModel = formattingSettings.Model;
   
   /**
   * Circle Formatting Card
   */
   class CircleCardSettings extends FormattingSettingsCard {
       circleColor = new formattingSettings.ColorPicker({
           name: "circleColor", // circle color name should match circle color property name in capabilities.json
           displayName: "Color",
           description: "The fill color of the circle.",
           show: true,
           value: { value: "white" }
       });
   
       circleThickness = new formattingSettings.NumUpDown({
           name: "circleThickness", // circle thickness name should match circle color property name in capabilities.json
           displayName: "Thickness",
           description: "The circle thickness.",
           show: true,
           value: 2
       });
   
       name: string = "circle"; // circle card name should match circle object name in capabilities.json
       displayName: string = "Circle";
       show: boolean = true;
       slices: Array<FormattingSettingsSlice> = [this.circleColor, this.circleThickness];
   }
   
   /**
   * visual settings model class
   *
   */
   export class VisualFormattingSettingsModel extends FormattingSettingsModel {
       // Create formatting settings model circle formatting card
       circleCard = new CircleCardSettings();
   
       cards = [this.circleCard];
   }
   

3. บันทึก settings.ts

เพิ่มวิธีการเพื่อใช้การตั้งค่าวิชวล

getFormattingModelเพิ่มวิธีการที่ใช้ในการตั้งค่าวิชวลและนําเข้าไปยังไฟล์ visual.ts ที่จําเป็น

1. ในรหัส VS จากโฟลเดอร์ src เปิด visual.ts

2. เพิ่มคําสั่งเหล่านี้importที่ด้านบนของ visual.ts

   import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
   import { VisualFormattingSettingsModel } from "./settings";
   

3. เพิ่มการประกาศต่อไปนี้ไปยัง วิชวล

   private formattingSettings: VisualFormattingSettingsModel;
   private formattingSettingsService: FormattingSettingsService;
   

4. เพิ่มวิธีการ ลงในgetFormattingModelชวล

   public getFormattingModel(): powerbi.visuals.FormattingModel {
       return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
   }
   

5. ใน Visual คลาส ให้เพิ่มบรรทัดโค้ดต่อไปนี้เพื่อ constructor เตรียมใช้งาน formattingSettingsService

       this.formattingSettingsService = new FormattingSettingsService();
   
   

6. ใน Visual คลาส ให้เพิ่มรหัสต่อไปนี้เพื่อ update อัปเดตการตั้งค่าการจัดรูปแบบวิชวลให้เป็นค่าคุณสมบัติการจัดรูปแบบล่าสุด

   1. เพิ่มรหัสนี้ไปยังคําสั่ง ถ้า หลังจากconst size = Math.min(width, height);

      this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);
      const circleSettings = this.formattingSettings.circleCard;
      

   2. เพิ่มรหัสนี้ไปยัง ReactCircleCard.update หลังจาก size:

      borderWidth: circleSettings.circleThickness.value,
      background: circleSettings.circleColor.value.value,
      }
      

7. บันทึก visual.ts

แก้ไขไฟล์คอมโพเนนต์

แก้ไขไฟล์คอมโพเนนต์เพื่อให้สามารถแสดงการเปลี่ยนแปลงไปยังสีและความหนาของเส้นขอบของวิชวล

1. ในรหัส VS จากโฟลเดอร์ src เปิด component.tsx

2. เพิ่มค่าเหล่านี้ไปยัง State:

   background?: string,
   borderWidth?: number
   

3. ในวิธีการ ให้ render แทนที่บรรทัดโค้ดต่อไปนี้:

   1. const { textLabel, textValue, size } = this.state; กับ:

      const { textLabel, textValue, size, background, borderWidth } = this.state;
      

   2. const style: React.CSSProperties = { width: size, height: size }; กับ:

      const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
      

4. บันทึก component.tsx

ตรวจสอบการเปลี่ยนแปลงของคุณ

ทดลองใช้สีและความหนาของเส้นขอบของวิชวล ซึ่งคุณสามารถควบคุมได้ในขณะนี้

1. ตรวจสอบว่าpbiviz startกําลังทํางานอยู่ และในบริการของ Power BI ให้รีเฟรชวิชวล React Circle Card ของคุณ

2. เลือกแท็บ รูปแบบ และขยาย วงกลม

3. ปรับการตั้งค่า สี และ ความหนา ของวิชวล และตรวจทานผลของวิชวล

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

• เพิ่มตัวเลือกการจัดรูปแบบไปยังวิชวลการ์ดวงกลม
• สร้างวิชวลแผนภูมิแท่ง Power BI
• เรียนรู้วิธีการดีบักวิชวล Power BI ที่คุณสร้างขึ้น