ชิ้นการจัดรูปแบบช่องว่างภายในขอบ

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

ตัวอย่าง: การใช้งาน MarginPadding

ในตัวอย่างนี้ เราจะแสดงวิธีการสร้าง MarginPadding ชิ้นโดยใช้ยูทิลิตี้แบบจําลองการจัดรูปแบบ

วัตถุ Capabilities

แทรกส่วนย่อย JSON ต่อไปนี้ลงในไฟล์ capabilities.json

{
  // ... same level as dataRoles and dataViewMappings
  "objects": {
    "labels": {
      "properties": {
        "left": {
          "type": {
            "numeric": true
          }
        },
        "right": {
          "type": {
            "numeric": true
          }
        },
        "top": {
          "type": {
            "numeric": true
          }
        },
        "bottom": {
          "type": {
            "numeric": true
          }
        }
      }
    }
  }
}

การจัดรูปแบบคลาสแบบจําลอง

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

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

class LabelsCardSetting extends formattingSettings.SimpleCard {
    name: string = "labels"; // same as capabilities object name
    displayName: string = "Labels";

    public left : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "left", // same as capabilities property name
        displayName: "Left",
        value: 50
    });

    public right : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "right", // same as capabilities property name
        displayName: "Right",
        value: 50
    });

    public top : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "top", // same as capabilities property name
        displayName: "Top",
        value: 50
    });

    public bottom : formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "bottom", // same as capabilities property name
        displayName: "Bottom",
        value: 50
    });

    public marginPadding: formattingSettings.MarginPadding = new formattingSettings.MarginPadding({
        name: "margin", // must be unique within the same object
        displayName: "Margin",
        left: this.left,
        right: this.right,
        top: this.top,
        bottom: this.bottom
    });

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

export class VisualSettings extends formattingSettings.Model {
    public labels: LabelsCardSetting = new LabelsCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.labels];
}

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

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