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

  • Makale

Görsel oluşturduğunuzda, özelliklerini özelleştirmeye yönelik seçenekler ekleyebilirsiniz. Özelleştirilmiş biçimlendirilmiş öğelerden bazıları şunlardır:

  • Başlık
  • Background
  • Border
  • Gölge
  • Renkler

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

  • Görselinize biçimlendirme özellikleri ekleyin.
  • Görseli paketleme
  • Özel görseli Power BI Desktop veya Hizmet raporuna aktarma

Önkoşul

Bu öğreticide görsele genel biçimlendirme özelliklerinin nasıl ekleneceği açıklanmaktadır. Örnek olarak Daire kartı görselini kullanacağız. Dairenin rengini ve kalınlığını değiştirme özelliğini ekleyeceğiz. Bu öğreticide oluşturduğunuz Circle kartı proje klasörünüz yoksa 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 bilgisayarınızda barındırılırken çalışıyor.

    pbiviz start

  2. Power BI'da Biçim panelini seçin.

    Genel biçimlendirme seçeneklerini görmeniz gerekir, ancak görsel biçimlendirme seçeneklerini görmezsiniz.

    Screenshot of formatting panel with only general formatting options.

  3. Visual Studio Code'da dosyayı açıncapabilities.json.

  4. dataViewMappings dizisini kullanmadan önce nesneleri ekleyin.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. capabilities.json dosyasını kaydedin.

  6. Power BI'da biçimlendirme seçeneklerini yeniden gözden geçirin.

    Dekont

    Biçimlendirme seçeneklerinin değiştiğini görmüyorsanız Özel Görseli Yeniden Yükle'yi seçin.

    Screenshot of general and visual formatting options on the formatting pane.

  7. Başlık seçeneğini Kapalı olarak ayarlayın. Görselin artık sol üst köşede ölçü adını görüntülemediğini göreceksiniz.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Özel biçimlendirme seçenekleri ekleme

Şimdi dairenin ana hattının daire rengini ve kalınlığını yapılandırmak için color adlı yeni bir grup ekleyelim.

  1. PowerShell'de, özel görseli durdurmak için Ctrl+C girin.

  2. Visual Studio Code'daki dosyadacapabilities.json, nesne etiketli nesnelere aşağıdaki JSON parçasını ekleyin.

        "circle": {
        "properties": {
            "circleColor": {
                "type": {
                    "fill": {
                        "solid": {
                            "color": true
                        }
                    }
                }
            },
            "circleThickness": {
                "type": {
                    "numeric": true
                }
            }
        }
    }

    Bu JSON parçası, circleColor ve circleThickness olmak üzere iki değişkenden oluşan circle adlı grubu açıklar.

  3. capabilities.json dosyasını kaydedin.

  4. Gezgin bölmesinde src klasörüne gidin ve ardından settings.ts dosyasını seçin. Bu dosya, başlangıç görselinin ayarlarını temsil eder.

  5. settings.ts dosyasında, içeri aktarma satırlarını ve iki sınıfı aşağıdaki kodla değiştirin.

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

import FormattingSettingsCard = formattingSettings.SimpleCard;
import FormattingSettingsSlice = formattingSettings.Slice;
import FormattingSettingsModel = formattingSettings.Model;

export class CircleSettings extends FormattingSettingsCard{
    public circleColor = new formattingSettings.ColorPicker({
        name: "circleColor",
        displayName: "Color",
        value: { value: "#ffffff" },
        visible: true
    });

    public circleThickness = new formattingSettings.NumUpDown({
        name: "circleThickness",
        displayName: "Thickness",
        value: 2,
        visible: true
    });

    public name: string = "circle";
    public displayName: string = "Circle";
    public visible: boolean = true;
    public slices: FormattingSettingsSlice[] = [this.circleColor, this.circleThickness]
}

export class VisualSettings extends FormattingSettingsModel {
    public circle: CircleSettings = new CircleSettings();
    public cards: FormattingSettingsCard[] = [this.circle];
}

    Bu modül iki sınıfı tanımlar. Circle Ayarlar sınıfı, capabilities.json dosyasında tanımlanan nesnelerle (circleColor ve circleThickness) eşleşen adlarla iki özelliği tanımlar ve varsayılan değerleri ayarlar. Visual Ayarlar sınıfı, circle nesnesini dosyasında açıklanan capabilities.json özelliklere göre tanımlar.

  6. settings.ts dosyasını kaydedin.

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

  8. visual.ts dosyasında, öğesini içeri aktarın:

    import { VisualSettings } from "./settings";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

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

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Bu özellik, görsel ayarlarını açıklayan Visual Ayarlar nesnesine bir başvuru depolar.

  9. Visual sınıfında, oluşturucunun ilk satırı olarak aşağıdakileri ekleyin:

    this.formattingSettingsService = new FormattingSettingsService();

  10. Visual sınıfında, güncelleştirme yönteminden sonra aşağıdaki yöntemi ekleyin.

    public getFormattingModel(): powerbi.visuals.FormattingModel {
    return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
}

    Bu işlev her biçimlendirme bölmesi işlemesinde çağrılır. Özellik bölmesinde kullanıcılara göstermek istediğiniz nesneleri ve özellikleri seçmenize olanak tanır.

  11. güncelleştirme yönteminde radius değişkeninin bildiriminden sonra aşağıdaki kodu ekleyin.

    this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews);
this.visualSettings.circle.circleThickness.value = Math.max(0, this.visualSettings.circle.circleThickness.value);
this.visualSettings.circle.circleThickness.value = Math.min(10, this.visualSettings.circle.circleThickness.value);

    Bu kod biçim seçeneklerini alır. circleThickness özelliğine geçirilen tüm değerleri ayarlar ve sıfır ile 10 arasında bir sayıya dönüştürür.

    Screenshot of setting circle thickness to between zero and 10.

  12. Circle öğesinde, dolgu stiline ve vuruş genişliği stiline geçirilen değerleri aşağıdaki gibi değiştirin:

    .style("fill", this.visualSettings.circle.circleColor.value.value)

    .style("stroke-width", this.visualSettings.circle.circleThickness.value)

    Screenshot of circle elements.

  13. visual.ts dosyasını kaydedin.

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

    pbiviz start

  15. Power BI'da görselin üzerinde kayan araç çubuğunda Otomatik Yeniden Yüklemeyi Aç/Kapat'ı seçin.

    Screenshot of Toggle Auto Reload icon.

  16. Görsel biçim seçeneklerinde Daire'yi genişletin.

    Screenshot of the final circle card visuals format pane elements.

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

Kalınlık seçeneğini sıfırdan küçük bir değerle ve 10'dan yüksek bir değerle değiştirin. Ardından görselin değeri en düşük veya en yüksek düzeyde tolere edilebilir bir değere güncelleştirdiğinde dikkat edin.

Hata ayıklama

Özel görselinizde hata ayıklama hakkında ipuçları için hata ayıklama kılavuzuna bakın.

Özel görseli paketleme

Görsel tamamlandı ve kullanılmaya hazır olduğuna göre, artık bunu paketlemenin zamanı geldi. Paketlenmiş bir görsel, başkaları tarafından kullanılmak ve zevk almak için Power BI raporlarına veya hizmetine aktarılabilir.

Görseliniz hazır olduğunda Power BI görselini paketleme bölümünde yer alan yönergeleri izleyin ve isterseniz görseli içeri aktarıp keyfini çıkarabilmeleri için başkalarıyla paylaşın.

İlgili içerik