การ์ดการตั้งค่าการจัดรูปแบบ

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

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

สามารถซ่อนการ์ด, ส่วนข้อมูล และกลุ่มแบบไดนามิกได้โดยการตั้งค่าพารามิเตอร์ visible เป็น เท็จ (จริง ตามค่าเริ่มต้น)

การ์ดสามารถเติมบานหน้าต่างการจัดรูปแบบหรือบานหน้าต่างการวิเคราะห์โดยการตั้งค่าพารามิเตอร์ analyticsPane ให้ จริงหรือ เท็จ

ตัวอย่าง: การใช้งานการ์ดการตั้งค่าการจัดรูปแบบ

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

หากต้องการสร้างแบบจําลองการจัดรูปแบบด้วยการ์ดการจัดรูปแบบโดยใช้ยูทิลิตี้การจัดรูปแบบ model คุณจําเป็นต้อง

• อัปเดตเวอร์ชัน powerbi-visuals-api เป็น 5.1 และสูงกว่า
• ติดตั้ง powerbi-visuals-utils-formattingmodel
• เริ่มต้นการจัดรูปแบบ การตั้งค่าบริการ
• เริ่มต้นการจัดรูปแบบ การตั้งค่าคลาสแบบจําลอง

โน้ต

• ชื่อการ์ดควรตรงกับชื่อวัตถุใน capabilities.json
• ชื่อส่วนแบ่งส่วนควรตรงกับชื่อคุณสมบัติใน capabilities.json

ในตัวอย่างนี้ เราจะแสดงวิธีการสร้างรูปแบบการจัดรูปแบบวิชวลแบบกําหนดเองด้วยการ์ดเดียว ใช้ util util การจัดรูปแบบ model การ์ดมีสองส่วน:

• แสดงคุณสมบัติ แสดงโดยชิ้น ToggleSwitch
• แสดงหน่วย แสดงด้วยชิ้น AutoDropdown

ก่อนอื่น ให้เพิ่มวัตถุลงในไฟล์ capabilities.json:

{
  // ... same level as dataRoles and dataViewMappings
  "objects": {
    "values": {
      "properties": {
        "show": {
          "type": {
            "bool": true
          }
        },
        "displayUnits": {
          "type": {
            "formatting": {
              "labelDisplayUnits": true
            }
          }
        }
      }
    }
  }
}

จากนั้นให้แทรกส่วนย่อยของโค้ดต่อไปนี้ลงในไฟล์การตั้งค่า:

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

class ValuesCardSetting extends formattingSettings.SimpleCard {
    public show: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "show",
        value: true
    });

    public displayUnits: formattingSettings.AutoDropdown = new formattingSettings.AutoDropdown({
        name: "displayUnits",
        displayName: "Display units",
        value: 0
    });

    topLevelSlice: formattingSettings.ToggleSwitch = this.show;
    name: string = "values";
    displayName: string = "Values settings";

    public slices: formattingSettings.Slice[] = [ this.displayUnits ];
}

export class VisualSettingsModel  extends formattingSettings.Model {
    public values: ValuesCardSetting = new ValuesCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.values];
}

ทําตามขั้นตอนที่ 4 - 8 จาก สร้างบานหน้าต่างการจัดรูปแบบ บทช่วยสอน

นี่คือบานหน้าต่างผลลัพธ์:

ในตัวอย่างนี้ เราจะแสดงวิธีการสร้างรูปแบบการจัดรูปแบบวิชวลแบบกําหนดเองด้วยการ์ดการจัดรูปแบบแบบรวมหนึ่งการ์ดโดยใช้ formattingmodel util การ์ดมีหนึ่งกลุ่ม:

• myVisualGroupSettings ด้วยคุณสมบัติพื้นฐานสองอย่าง
  • ความถูกต้อง
  • หน่วยแสดงผล

ก่อนอื่น ให้เพิ่มวัตถุลงในไฟล์ capabilities.json:

{
  // ... same level as dataRoles and dataViewMappings
  "objects": {
    "values": {
      "properties": {
        "show": {
          "type": {
            "bool": true
          }
        },
        "displayUnits": {
          "type": {
            "formatting": {
              "labelDisplayUnits": true
            }
          }
        },
        "displayUnits": {
          "type": {
            "formatting": {
              "labelDisplayUnits": true
            }
          }
        }
      }
    }
  }
}

จากนั้นให้แทรกส่วนย่อยของโค้ดต่อไปนี้ลงในไฟล์การตั้งค่า:

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

class LabelsSettingsGroup extends formattingSettings.SimpleCard {
    public displayUnits: formattingSettings.AutoDropdown = new formattingSettings.AutoDropdown({
        name: "displayUnits",
        displayName: "Display units",
        value: 0
    });

    public precision: formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "precision",
        displayName: "Precision",
        value: 2
    });

    name: string = "labelsGroup";
    displayName: string = "Labels group";
    slices: formattingSettings.Slice[] = [this.displayUnits, this.precision];
}

class ValuesCardSetting extends formattingSettings.CompositeCard {
    public show: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "show",
        value: true
    });

    public labelsGroup: LabelsSettingsGroup = new LabelsSettingsGroup();

    topLevelSlice: formattingSettings.ToggleSwitch = this.show;
    name: string = "values";
    displayName: string = "Values settings";
    groups: formattingSettings.Group[] = [this.labelsGroup];
}

export class VisualSettingsModel  extends formattingSettings.Model {
    public values: ValuesCardSetting = new ValuesCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.values];
}

ทําตามขั้นตอนที่ 4 - 8 จาก สร้างบานหน้าต่างการจัดรูปแบบ บทช่วยสอน

นี่คือบานหน้าต่างผลลัพธ์:

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

• บานหน้าต่างการจัดรูปแบบ
• ยูทิลิตี้แบบจําลองการจัดรูปแบบ