บทช่วยสอน: เพิ่มตัวเลือกการจัดรูปแบบไปยังวิชวลการ์ดวงกลม

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

• ชื่อเรื่อง
• พื้นหลัง
• ชายแดน
• เงา
• ธง

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

• เพิ่มคุณสมบัติการจัดรูปแบบไปยังวิชวลของคุณ
• แพคเกจวิชวล
• นําเข้าวิชวลแบบกําหนดเองไปยัง Power BI Desktop หรือรายงานบริการ

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

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

การเพิ่มตัวเลือกการจัดรูปแบบ

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

   pbiviz start
   

2. ใน Power BIให้เลือกแผง รูปแบบ

   คุณควรเห็นตัวเลือกการจัดรูปแบบทั่วไป แต่ไม่ใช่ตัวเลือกการจัดรูปแบบวิชวลใด ๆ

   

3. ใน Visual Studio Codeให้เปิดไฟล์ capabilities.json

4. ก่อนอาร์เรย์ dataViewMappings ให้เพิ่มออบเจ็กต์

   "objects": {},
   

   

5. บันทึกไฟล์ capabilities.json

6. ใน Power BIให้ตรวจสอบตัวเลือกการจัดรูปแบบอีกครั้ง

   โน้ต

   ถ้าคุณไม่เห็นการเปลี่ยนแปลงตัวเลือกการจัดรูปแบบ ให้เลือก โหลดวิชวลแบบกําหนดเองอีกครั้ง

   

7. ตั้งค่าตัวเลือก ชื่อเรื่อง เพื่อ ปิด โปรดสังเกตว่าวิชวลจะไม่แสดงชื่อหน่วยวัดที่มุมบนซ้ายอีกต่อไป

   

   

การเพิ่มตัวเลือกการจัดรูปแบบแบบกําหนดเอง

ตอนนี้มาเพิ่มกลุ่มใหม่ที่เรียกว่า สี สําหรับการกําหนดค่าสีวงกลมและความหนาของเส้นขอบของวงกลม

1. ใน ของ PowerShell ให้ใส่ Ctrl+C เพื่อหยุดวิชวลแบบกําหนดเอง

2. ใน Visual Studio Codeในไฟล์ capabilities.json ให้แทรกส่วนย่อย JSON ต่อไปนี้ลงในวัตถุที่มีป้ายชื่อว่าวัตถุ

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

   ส่วนย่อย JSON นี้จะอธิบายกลุ่มที่เรียกว่า วงกลมซึ่งประกอบด้วยสองตัวแปร - circleColor และ circleThickness

3. บันทึกไฟล์ capabilities.json

4. ในบานหน้าต่าง Explorerไปที่โฟลเดอร์ src จากนั้นเลือก settings.ts ไฟล์นี้แสดงการตั้งค่าสําหรับวิชวลเริ่มต้น

5. ในไฟล์ settings.ts ให้แทนที่บรรทัดการนําเข้าและคลาสสองคลาสด้วยรหัสต่อไปนี้

   import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
   
   import FormattingSettingsCard = formattingSettings.SimpleCard;
   import FormattingSettingsSlice = formattingSettings.Slice;
   import FormattingSettingsModel = formattingSettings.Model;
   
   export class CircleSettings extends FormattingSettingsCard{
       public circleColor = new formattingSettings.ColorPicker({
           name: "circleColor",
           displayName: "Color",
           value: { value: "#ffffff" },
           visible: true
       });
   
       public circleThickness = new formattingSettings.NumUpDown({
           name: "circleThickness",
           displayName: "Thickness",
           value: 2,
           visible: true
       });
   
       public name: string = "circle";
       public displayName: string = "Circle";
       public visible: boolean = true;
       public slices: FormattingSettingsSlice[] = [this.circleColor, this.circleThickness]
   }
   
   export class VisualSettings extends FormattingSettingsModel {
       public circle: CircleSettings = new CircleSettings();
       public cards: FormattingSettingsCard[] = [this.circle];
   }
   

   โมดูลนี้จะกําหนดคลาสสองคลาส CircleSettings คลาส กําหนดคุณสมบัติสองอย่างด้วยชื่อที่ตรงกับวัตถุที่กําหนดไว้ในไฟล์ capabilities.json (circleColor และ circleThickness) และตั้งค่าเริ่มต้น คลาส VisualSettings จะกําหนดออบเจ็กต์วงกลมตามคุณสมบัติที่อธิบายไว้ในไฟล์

6. บันทึกไฟล์ settings.ts

7. เปิดไฟล์ visual.ts

8. ในไฟล์ visual.ts ให้นําเข้า

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

   และในคลาส วิชวล เพิ่มคุณสมบัติต่อไปนี้:

   private visualSettings: VisualSettings;
   private formattingSettingsService: FormattingSettingsService;
   
   

   คุณสมบัตินี้จัดเก็บการอ้างอิงไปยัง VisualSettings วัตถุ ซึ่งอธิบายการตั้งค่าวิชวล

9. ในคลาส วิชวล ให้แทรกสิ่งต่อไปนี้เป็นบรรทัดแรกของคอนสตรักเตอร์ของ :

   this.formattingSettingsService = new FormattingSettingsService();
   

10. ในคลาส วิชวล ให้เพิ่มวิธีการต่อไปนี้หลังจาก อัปเดตเมธอด

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

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

11. ใน อัปเดตวิธีการ หลังจากการประกาศของตัวแปรรัศมี ให้เพิ่มรหัสต่อไปนี้

    this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews[0]);
    this.visualSettings.circle.circleThickness.value = Math.max(0, this.visualSettings.circle.circleThickness.value);
    this.visualSettings.circle.circleThickness.value = Math.min(10, this.visualSettings.circle.circleThickness.value);
    

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

    

12. ในองค์ประกอบวงกลม ให้ปรับเปลี่ยนค่าที่ส่งผ่านไปยังลักษณะการเติม และสไตล์ความกว้างเส้น ดังนี้:

    .style("fill", this.visualSettings.circle.circleColor.value.value)
    

    .style("stroke-width", this.visualSettings.circle.circleThickness.value)
    

    

13. บันทึกไฟล์ visual.ts

14. PowerShell ให้เริ่มใช้งานวิชวล

    pbiviz start
    

15. ใน Power BIในแถบเครื่องมือที่ลอยอยู่เหนือวิชวล ให้เลือก สลับการโหลดอัตโนมัติ

    

16. ในตัวเลือก รูปแบบวิชวล ให้ขยาย วงกลม

    

    ปรับเปลี่ยนตัวเลือก สี และความหนาของ

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

การดีบัก

สําหรับเคล็ดลับเกี่ยวกับการดีบักวิชวลแบบกําหนดเองของคุณ โปรดดูคู่มือการดีบัก

การแพคเกจวิชวลแบบกําหนดเอง

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

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

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

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