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

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

• ชื่อเรื่อง
• พื้นหลัง
• Border
• เงา
• สี

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

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

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

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

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

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

   pbiviz start
   

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

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

   

3. เปิดไฟล์ในcapabilities.jsonรหัส Visual Studio

4. เพิ่มวัตถุก่อนอาร์เรย์ dataViewMappings

   "objects": {},
   

   

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

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

   หมายเหตุ

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

   

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

   

   

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

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

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

2. แทรกส่วนย่อย JSON ลงในวัตถุที่มีป้ายชื่อวัตถุในรหัส Visual Studio ในcapabilities.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];
   }
   

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

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;
   
   

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

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);
    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