Öğretici: Daire kartı görseline biçimlendirme seçenekleri ekleme

Makale
10/14/2021
Okumak için 4 dakika

Görsel oluşturduğunuzda özelliklerini özelleştirmek için seçenekler ekleyebilirsiniz. Özelleştirilebilecek öğelerin bazıları şunlardır:

Başlık
Arka Plan
Kenarlık
Gölgeli
Renkler

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:

Görselinizi biçimlendirme özellikleri ekleyin.
Görseli paketleyin
özel görseli bir Power BI Desktop veya hizmet raporuna aktarma

Önkoşul

Bu öğreticide, bir görsele ortak biçimlendirme özelliklerinin nasıl ekleneceği açıklanmaktadır. Daire kartı görselini örnek olarak kullanacağız. Dairenin rengini ve kalınlığını değiştirme olanağını ekleyeceğiz. Bu öğreticide oluşturduğunuz daire kartı proje klasörü yoksa, lütfen devam etmeden önce öğreticiyi yineleyin.

Biçimlendirme seçenekleri ekleme

PowerShell'de, daire kartı proje klasörünüze gidin ve daire kartı görselini başlatın. Görseliniz artık çalışıyor ve bilgisayarınızda barındırılıyor.
```
pbiviz start
```
Power BI’da Sayfayı biçimlendir’i seçin.

Biçimlendirme seçenekleri bu görsel için mevcut değil iletisini görmeniz gerekir.

Biçimlendirme seçeneklerini burada görürseniz, ancak bunları özelleştirmek için özel biçimlendirme seçenekleri eklemeye atlayın.
Visual Studio Code' de dosyayı açın capabilities.json .
dataViewMappings dizisinin öncesine objects (8. satırdan sonra) ekleyin.
```
"objects": {},
```
capabilities.json dosyasını kaydedin.
Power BI’da biçimlendirme seçeneklerini yeniden inceleyin.

Not

Biçimlendirme seçenekleri değişmediyse Özel Görseli Yeniden Yükle’yi seçin.
Başlık seçeneğini Kapalı olarak ayarlayın. Görselin sol üst köşesinde ölçü adının artık görüntülenmediğini göreceksiniz.

Özel biçimlendirme seçenekleri ekleme

Şimdi, dairenin rengini ve genişliğini yapılandırmak için Color adlı yeni grup ekleyelim.

PowerShell'de, özel görseli durdurmak için CTRL + C tuşlarına girin.

Visual Studio Code, capabilities.json dosyasında, nesne etiketli nesneye aşağıdaki JSON parçasını ekleyin.

    {
        "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 parçası, Circlecolor ve circlekalınlığı olmak üzere iki değişkenden oluşan Circle adlı bir grubu tanımlar.

Daire kalınlığı kodu

capabilities.json dosyasını kaydedin.
Gezgin bölmesinde src klasörüne gidin ve ardından ayarlar. TS' yi seçin. Bu dosya başlangıç görselinin ayarlarını temsil eder.
settings.tsDosyasında, iki sınıfı aşağıdaki kodla değiştirin.
```
export class CircleSettings {
    public circleColor: string = "white";
    public circleThickness: number = 2;
}
export class VisualSettings extends DataViewObjectsParser {
    public circle: CircleSettings = new CircleSettings();
}
```
Bu modül iki sınıf tanımlar. Circlesettings sınıfı, dosyada tanımlanan nesnelerle eşleşen adlara sahip iki özelliği tanımlar capabilities.json (Circlecolor ve circlekalınlığı) ve ayrıca varsayılan değerleri ayarlar. Visualsettings sınıfı, DataViewObjectParser sınıfını devralır ve dosyada tanımlanan nesneyle eşleşen Circle adlı bir özellik ekler capabilities.json ve circlesettings'in bir örneğini döndürür.
settings.ts dosyasını kaydedin.
visual.ts dosyasını açın.

visual.tsDosyada, visualsettings, visualobjectınstanceenumeration ve enumeratevisualobjectınstancesoptions içeri aktarın:

import { VisualSettings } from "./settings";
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;

ve Visual sınıfına aşağıdaki özelliği ekleyin:

private visualSettings: VisualSettings;

Bu özellik VisualSettings nesnesinde görsel ayarlarını tanımlayan bir başvuru depolar.

Visual sınıfını ekleme

Visual sınıfında update yönteminin öncesine aşağıdaki yöntemi ekleyin. Bu yöntem, biçimlendirme seçeneklerini doldurmak için kullanılır.

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
    const settings: VisualSettings = this.visualSettings || <VisualSettings>VisualSettings.getDefault();
    return VisualSettings.enumerateObjectInstances(settings, options);
}

Bu yöntem, biçimlendirme seçeneklerini doldurmak için kullanılır.

Görsel ayarları nesnesi

update yönteminde radius değişkeni bildiriminin sonrasına aşağıdaki kodu ekleyin.

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

Bu kod, biçimlendirme seçeneklerini alır. circleThickness özelliğine geçirilen değerleri alır, eksi değerleri 0’a, 10 üzerindeki değerleri de 10’a dönüştürür.

Radius değişkeni

Circle öğesinde, aşağıdaki gibi, Fill stili ve vuruş genişliği stiline geçirilen değerleri değiştirin:
```
this.visualSettings.circle.circleColor
```
```
this.visualSettings.circle.circleThickness
```
visual.ts dosyasını kaydedin.
PowerShell'de görseli başlatın.
```
pbiviz start
```
Power BI’da geliştirici görselinin üzerindeki kayan araç çubuğunda Otomatik Yeniden Yüklemeyi Aç/Kapat’ı seçin.
Görsel biçimlendirme seçeneklerinde Daire öğesini genişletin.

Renk ve kalınlık seçeneklerini değiştirin.

Kalınlık değerini sıfırın altında bir değere ve 10’un üzerinde bir değere ayarlayın. Görselin değerleri mümkün olan minimum ve maksimum değerlere göre ayarladığına dikkat edin.

Özel görseli paketleme

Artık görsel tamamlandı ve kullanıma hazır olduğuna göre, paket paketlenecek. paketlenmiş bir görsel, Power BI raporlara veya hizmete içeri aktarılabilir ve başkaları tarafından da kullanılabilir.

Bu bölümde, nasıl yapılacağını öğreneceksiniz

Dosyadaki özel görsel proje için özellik değerlerini girin pbiviz.json .
Simge ( icon.png ) dosyasını güncelleştirin.
Son olarak, özel görseli paketleyin .

Görselin özellik değerlerini düzenleme

PowerShell'de, özel görseli durdurmak için CTRL + C tuşlarına girin.
pbiviz.jsondosyayı Visual Studio Code açın.
visual nesnesinde displayName özelliğini Daire Kartı olarak değiştirin.

Görsel Öğeler bölmesinde simgenin üzerine geldiğinizde görünen ad görüntülenir.
description özelliği için aşağıdaki metni girin.

Biçimlendirilmiş ölçüm değerini daire içinde görüntüler

Görsel için supportUrl ve gitHubUrl'yi doldurun.

Örnek:

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

author nesnesine ayrıntılarınızı girin.
pbiviz.json dosyasını kaydedin.

Simgeyi Güncelleştir

Dosyanın varlıklar nesnesinde pbiviz.json , belgenin bir simgenin yolunu tanımladığından emin olun. Simge, Görsel Öğeler bölmesinde görüntülenen resimdir. 20x20 piksel boyutunda bir PNG dosyası olmalıdır.
Windows gezgini ' nde, icon.png dosyayı kopyalayın ve ardından varlıklar klasöründe bulunan varsayılan dosyayı değiştirmek için yapıştırın.
Visual Studio Code bölmesinde, assets klasörünü genişletin ve ardındanicon.png seçin.
Simgeyi gözden geçirin.

Görseli paketle

Bu Visual Studio Code tüm dosyaların kaydedildiklerini onaylar.
Özel görseli paketleyen PowerShell'de aşağıdaki komutu girin.
```
pbiviz package
```

Bu komut, görsel projenizin dist/ dizininde bir pbiviz dosyası oluşturur ve mevcut olan önceki pbiviz dosyasının üzerine yazarak.

Dist klasörü

Pakette özel görseli Power BI hizmetine veya bir Power BI Desktop raporuna aktarmak için gerekli olan her şey bulunur. Artık özel görseli paketletiniz ve kullanıma hazır.

Özel görseli içeri aktarma

Artık Daire Kartı özel görselini raporlarınıza aktararak içeri aktarmaya hazır oluruz. Yerel bilgisayarınızdan Power-BI'a bir görsel dosyayı içeri aktarma yönergelerini izleyin ve circleCard.pbiviz dosyayı dist klasöründen rapora Power BI alın.