Aracılığıyla paylaş

Biçimlendirme ayarları kapsayıcısı

  • Makale

biçimlendirme ayarları kapsayıcısı ikincil düzey özellikler gruplandırma kapsayıcısıdır. Dilimleri kapsayıcı öğeleri halinde gruplandırır ve kullanıcıların açılan öğeyi kullanarak bu öğeler arasında geçiş yapmasına olanak tanır.

Biçimlendirme ayarları kapsayıcı uygulaması

Bu örnekte, bir kapsayıcı ileformattingmodel util kullanarak özel bir görsel biçimlendirme modeli oluşturmanın nasıl yapılacağını gösteriyoruz.
Kapsayıcının iki öğesi vardır:

  • İki basit özelliğe sahip LabelsSettingsContainerItem
    • Kesinlik
    • Görüntüleme birimleri
  • IconsSettingsContainerItem tek bir basit özelliğe sahip
    • Opaklık

Önkoşullar

Biçimlendirme modeli yardımcı programları kullanarak bileşik kapsayıcı ile biçimlendirme modeli oluşturmak için

Örnek

İlk olarak, capabilities.json dosyasına nesneleri ekleyin:

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

Ardından ayarlar dosyasına aşağıdaki kod parçasını ekleyin:

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

class LabelsSettingsContainerItem 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 = "labelsContainer";
    displayName: string = "All labels";
    slices: formattingSettings.Slice[] = [this.displayUnits, this.precision];
}

class IconsSettingsContainerItem extends formattingSettings.SimpleCard {
    public opacity: formattingSettings.Slider = new formattingSettings.Slider({
        name: "opacity",
        displayName: "Opacity",
        value: 50
    });

    name: string = "iconsContainer";
    displayName: string = "All icons";
    slices: formattingSettings.Slice[] = [this.opacity];
}

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

    public labelsContainerItem: LabelsSettingsContainerItem = new LabelsSettingsContainerItem();
    public iconsContainerItem: IconsSettingsContainerItem = new IconsSettingsContainerItem();
  
    public container: formattingSettings.Container = {
        displayName: "Apply settings to",
        containerItems: [this.labelsContainerItem, this.iconsContainerItem]
    };

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

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

Biçimlendirme bölmesi oluşturma öğreticisindeki 4 - 8. adımları takip edin.

Elde edilen bölme aşağıdadır:

Kapsayıcının ekran görüntüsü.

İlgili içerik