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

บทความ
10/14/2021
2 นาทีในการอ่าน

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

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

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

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

สิ่งที่จำเป็นต้องมี:

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

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

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

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

ถ้าคุณเห็นตัวเลือกการจัดรูปแบบที่นี่ แต่ไม่สามารถข้ามไปยังการเพิ่มตัวเลือกการจัดรูปแบบ แบบปรับแต่งเอง เพื่อปรับแต่ง
ใน Visual Studioนี้ ให้ capabilities.json เปิดไฟล์
เพิ่ม วัตถุ(หลังบรรทัดที่ 8) ก่อนอาร์เรย์ dataViewMappings
```
"objects": {},
```
บันทึก capabilities.json ไฟล์
ตรวจทานตัวเลือกการจัดรูปแบบอีกครั้งใน Power BI

หมายเหตุ

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

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

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

ใน PowerShell ให้ป้อน Ctrl + C เพื่อ หยุดวิชวลแบบปรับแต่งเอง

ใน Visual Studioโค้ดต่อไปนี้ ใน capabilities.json ไฟล์ ให้แทรกส่วนย่อย JSON ต่อไปนี้ลงในออบเจ็กต์ที่มี ป้ายชื่อ วัตถุ

    {
        "circle": {
            "displayName": "Circle",
            "properties": {
                "circleColor": {
                    "displayName": "Color",
                    "description": "The fill color of the circle.",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "circleThickness": {
                    "displayName": "Thickness",
                    "description": "The circle thickness.",
                    "type": {
                        "numeric": true
                    }
                }
            }
        }
    }

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

รหัสความหนาของวงกลม

บันทึก capabilities.json ไฟล์
ใน แผง Explorer ไปที่โฟลเดอร์ src และจากนั้นเลือก settings.ts ไฟล์นี้แสดงการตั้งค่าสำหรับวิชวลเริ่มต้น
ใน settings.ts ไฟล์ ให้แทนที่คลาสสองคลาสด้วยโค้ดต่อไปนี้
```
export class CircleSettings {
    public circleColor: string = "white";
    public circleThickness: number = 2;
}
export class VisualSettings extends DataViewObjectsParser {
    public circle: CircleSettings = new CircleSettings();
}
```
โมดูลนี้จะกำหนดคลาสสองคลาส คลาส CircleSettings จะกําหนดคุณสมบัติไว้สองอย่าง ด้วยชื่อที่ตรงกับวัตถุที่กําหนดไว้ในไฟล์ capabilities.json (circleColor และ circleThickness) และกําหนดค่าเริ่มต้นด้วย คลาส VisualSettings จะรับช่วงมาจากคลาส DataViewObjectParser และเพิ่มคุณสมบัติชื่อ วงกลม ซึ่งจะตรงกับวัตถุที่กําหนดไว้ในไฟล์ และส่งกลับอินสแตนซ์ของ capabilities.json CircleSettings
บันทึก settings.ts ไฟล์
visual.tsเปิดไฟล์
ในไฟล์ visual.ts ให้นําเข้า VisualSettings, VisualObjectInstanceEnumeration และ EnumerateVisualObjectInstancesOptions:
```
import { VisualSettings } from "./settings";
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
```
และเพิ่มคุณสมบัติต่อไปนี้ในคลาส วิชวล:
```
private visualSettings: VisualSettings;
```
คุณสมบัตินี้จะจัดเก็บค่าอ้างอิงไปยังวัตถุ VisualSettings ซึ่งอธิบายการตั้งค่าวิชวล
เพิ่มวิธีการต่อไปนี้ก่อนวิธี อัปเดต ในคลาส วิชวล วิธีนี้ใช้เพื่อรวบรวมตัวเลือกการจัดรูปแบบ
```
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
    const settings: VisualSettings = this.visualSettings || <VisualSettings>VisualSettings.getDefault();
    return VisualSettings.enumerateObjectInstances(settings, options);
}
```
วิธีนี้ใช้เพื่อรวบรวมตัวเลือกการจัดรูปแบบ
ในวิธี อัปเดต หลังจากยืนยันตัวแปร รัศมี แล้ว ให้เพิ่มรหัสต่อไปนี้
```
this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);

this.visualSettings.circle.circleThickness = Math.max(0, this.visualSettings.circle.circleThickness);
this.visualSettings.circle.circleThickness = Math.min(10, this.visualSettings.circle.circleThickness);
```
รหัสนี้จะเรียกใช้ตัวเลือกการจัดรูปแบบ โดยจะปรับเปลี่ยนค่าใดๆ ที่ส่งผ่านไปยังคุณสมบัติ circleThickness โดยแปลงค่านั้นเป็น 0 ถ้าเป็นค่าลบ หรือแปลงเป็น 10 ถ้ามีค่ามากกว่า 10
ใน องค์ประกอบวงกลม ให้ปรับเปลี่ยนค่าที่ส่งผ่านไปยัง เติมสไตล์****และลักษณะความกว้างสโตร กดังนี้:
```
this.visualSettings.circle.circleColor
```
```
this.visualSettings.circle.circleThickness
```
บันทึก visual.ts ไฟล์
เริ่ม วิชวลใน PowerShell
```
pbiviz start
```
เลือก ปิดเปิดการรีโหลดอัตโนมัติ ในแถบเครื่องมือที่ลอยอยู่เหนือวิชวล ใน Power BI
ขยาย วงกลม ในตัวเลือก การจัดรูปแบบวิชวล

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

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

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

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

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

ป้อนค่าคุณสมบัติ ให้กับโครงการวิชวลแบบปรับแต่งเอง pbiviz.json ในไฟล์
อัปเดตไอคอน ( icon.png ) ไฟล์
สุดท้าย ให้แพคเกจ วิช วลแบบปรับแต่งเอง

แก้ไขค่าคุณสมบัติของวิชวล

ใน PowerShell ให้ป้อน Ctrl + C เพื่อ หยุดวิชวลแบบปรับแต่งเอง
เปิดไฟล์ pbiviz.json ใน Visual Studio Code
ในวัตถุ วิชวล ให้ปรับเปลี่ยนคุณสมบัติ displayName เป็น การ์ดวงกลม

ในแผง การแสดงภาพ ที่ลอยอยู่เหนือไอคอน จะปรากฏชื่อที่แสดง
สำหรับคุณสมบัติ คำอธิบาย ให้ใส่ข้อความต่อไปนี้

แสดงค่าการวัดที่จัดรูปแบบแล้วภายในวงกลม

กรอห supportUrl และ gitHubUrl สำหรับการแสดงผลด้วยภาพ

ตัวอย่าง:

{
    "supportUrl": "https://community.powerbi.com",
    "gitHubUrl": "https://github.com/microsoft/PowerBI-visuals-circlecard"
}

กรอกรายละเอียดของคุณในวัตถุ ผู้เขียน
บันทึก pbiviz.json ไฟล์

อัปเดตไอคอน

ใน วัตถุ สินทรัพย์ pbiviz.json ของไฟล์ ให้สังเกตว่าเอกสารกําหนดเส้นทางไปยังไอคอน ไอคอนนั้นคือรูปภาพที่ปรากฏในแผง การแสดงภาพ โดยต้องเป็นไฟล์ PNG20 พิกเซล คูณ 20 พิเซล
ใน Windows Explorer icon.png ให้คัดลอกไฟล์ แล้ววางเพื่อแทนที่ไฟล์เริ่มต้นที่อยู่ใน โฟลเดอร์ สินทรัพย์
ใน Visual Studioโค้ด ใหม่ ในบานหน้าต่าง Explorer ให้ขยาย โฟลเดอร์ assets icon.pngไฟล์ ใหม่
ตรวจทานไอคอน

แพคเกจวิชวล

ใน Visual Studioโค้ด ตรวจสอบให้แน่ใจว่าไฟล์ทั้งหมดได้รับการบันทึกแล้ว
เมื่อต้องการแพคเกจวิชวลแบบปรับแต่งเอง ใน PowerShell ให้ป้อนสั่งต่อไปนี้
```
pbiviz package
```

สั่งนี้สร้าง ไฟล์ pbiviz ในไดเรกทอรี dist/ ของโครงการวิชวลของคุณ และเขียนทับไฟล์ pbiviz ก่อนหน้านี้ที่อาจมีอยู่

โฟลเดอร์แจกจ่าย

ตัวแพคเกจจะมีทุกอย่างที่จำเป็นต้องใช้ในการนำเข้าวิชวลแบบกำหนดเองไปยังบริการของ Power BI หรือรายงาน Power BI Desktop ตอนนี้คุณก็มีวิชวลแบบปรับแต่งเองที่รวมเป็นแพคเกจแล้ว และพร้อมใช้งาน

การนำเข้าวิชวลแบบกำหนดเอง

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