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

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

  1. 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
    
  2. 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 fırçası

    Biçimlendirme seçeneklerini burada görürseniz, ancak bunları özelleştirmek için özel biçimlendirme seçenekleri eklemeye atlayın.

  3. Visual Studio Code' de dosyayı açın capabilities.json .

  4. dataViewMappings dizisinin öncesine objects (8. satırdan sonra) ekleyin.

    "objects": {},
    

    Nesneleri ekleme

  5. capabilities.json dosyasını kaydedin.

  6. 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.

    Biçimlendirme seçeneklerini görüntüleme

  7. 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.

    Kutucuk seçeneği kapalı

    Ad kutucuğu yok

Özel biçimlendirme seçenekleri ekleme

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

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

  2. 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

  3. capabilities.json dosyasını kaydedin.

  4. 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.

  5. 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();
    }
    

    Modül sınıfları

    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.

  6. settings.ts dosyasını kaydedin.

  7. visual.ts dosyasını açın.

  8. 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

  9. 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

  10. 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

  11. 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
    

    Daire öğesini doldurur

  12. visual.ts dosyasını kaydedin.

  13. PowerShell'de görseli başlatın.

    pbiviz start
    
  14. Power BI’da geliştirici görselinin üzerindeki kayan araç çubuğunda Otomatik Yeniden Yüklemeyi Aç/Kapat’ı seçin.

    Otomatik yeniden yüklemeyi aç

  15. Görsel biçimlendirme seçeneklerinde Daire öğesini genişletin.

    Daire biçimi

    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

Görselin özellik değerlerini düzenleme

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

  2. pbiviz.jsondosyayı Visual Studio Code açın.

  3. 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.

    Görünen Ad görseli

  4. description özelliği için aşağıdaki metni girin.

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

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

    Örnek:

    {
        "supportUrl": "https://community.powerbi.com",
        "gitHubUrl": "https://github.com/microsoft/PowerBI-visuals-circlecard"
    }
    
  6. author nesnesine ayrıntılarınızı girin.

  7. pbiviz.json dosyasını kaydedin.

Simgeyi Güncelleştir

  1. 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.

  2. 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.

  3. Visual Studio Code bölmesinde, assets klasörünü genişletin ve ardındanicon.png seçin.

  4. Simgeyi gözden geçirin.

    Görsel Öğeler bölmesi görüntüsü

Görseli paketle

  1. Bu Visual Studio Code tüm dosyaların kaydedildiklerini onaylar.

  2. Ö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.

Hata Ayıklama

Özel görseliniz için hata ayıklamaya yönelik ipuçlarına, hata ayıklama kılavuzuna giderek göz atabilirsiniz.

Sonraki adımlar