Öğretici: Power BI daire kartı görseli geliştirme

  • Makale
  • Okumak için 9 dakika

Geliştirici olarak kendi Power BI görsellerinizi oluşturabilirsiniz. Bu görselleri kendiniz kullanabilir veya kuruluşunuzun ve üçüncü tarafların kullanımına sunabilirsiniz.

Bu öğreticide Power BI’da daire içinde biçimlendirilmiş bir ölçüyü görüntüleyen daire kartı adlı özel bir Power BI görselini geliştireceksiniz. Daire kartı görseli, dolgu rengini ve ana hat kalınlığını özelleştirme desteği sunar.

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

  • Görseliniz için bir geliştirme projesi oluşturma.
  • D3 görsel öğeleriyle görselinizi geliştirme.
  • Görselinizi verileri işleyecek şekilde yapılandırma.
  • Görseli boyut değişikliklerine uyum sağlanmış olacak şekilde yapılandırma.
  • Görselin uyarlamalı renk ve kenarlık ayarlarını yapılandırma.

Not

Bu görselin tam kaynak kodu için bkz. daire kartı Power BI görseli.

Önkoşullar

Power BI görselinizi geliştirmeye başlamadan önce bu bölümde listelenen tüm koşulları karşıladığınızdan emin olun.

Geliştirme projesi oluşturma

Bu bölümde daire kartı görseli için bir proje oluşturacaksınız.

  1. PowerShell'i açın ve projenizi oluşturmak istediğiniz klasöre gidin.

  2. Aşağıdaki komutu girin:

    pbiviz new CircleCard

  3. Proje klasörüne gidin.

    cd CircleCard

  4. Daire kartı görselini başlatın. Görseliniz artık çalışıyor ve bilgisayarınızda barındırılıyor.

    pbiviz start

    Önemli

    Öğreticinin sonuna kadar PowerShell penceresini kapatabilirsiniz. Görselin çalışma süresini durdurmak için Ctrl+C tuşlarına basın ve toplu işi sonlandırmanız istenirse Y girin ve Enter tuşuna basın.

Görseli Power BI görüntüleme

Görseli Power BI test etmek için ABD Satış Analizi raporunu kullanacağız. Bu raporu indirip Power BI hizmetine yükleyebilirsiniz.

Görseli test etmek için kendi raporlarınızı da kullanabilirsiniz.

Not

Devam etmeden önce görsellerin geliştirici ayarlarını etkinleştirdiğinizi doğrulayın.

  1. PowerBI.com adresinde oturum açıp US Sales Analysis adlı raporu açın.

  2. Diğer seçenekler > Düzenle'yi seçin.

    Power BI hizmetindeki Düzenle seçeneğinin ekran görüntüsü.

  3. Power BI hizmeti arabiriminin alt tarafında bulunan Yeni sayfa düğmesine tıklayarak test için yeni bir sayfa oluşturun.

    Power BI hizmetindeki Yeni sayfa düğmesinin ekran görüntüsü.

  4. Görselleştirmeler bölmesinde Geliştirici Görseli'ni seçin.

    Görselleştirmeler bölmesindeki Geliştirici Görseli seçeneğinin ekran görüntüsü.

    Bu görsel, bilgisayarınızda çalışan özel görseli temsil eder. Yalnızca özel görsel hata ayıklama ayarı etkinleştirildiğinde kullanılabilir.

  5. Rapor tuvaline bir görsel eklendiğini doğrulayın.

    Rapora eklenen yeni görselin ekran görüntüsü.

    Bu öğe, güncelleştirme yönteminin çağrıldığı sayıyı gösteren basit bir görseldir. Görsel bu aşamada herhangi bir veri almaz.

    Not

    Görsel yerine bağlantı hatası iletisi görünüyorsa tarayıcınızda yeni bir sekme açın, https://localhost:8080/assets/status adresine gidin ve tarayıcınızın bu adresi kullanmasına yetki verin.

    Bağlantı hatası veren yeni görselin ekran görüntüsü.

  6. Yeni görsel seçili durumdayken Alanlar bölmesine gidin, Sales bölümünü genişletin ve Quantity değerini seçin.

    US Sales Analysis adlı raporun Sales tablosundaki Quantity alanını gösteren Power BI hizmetinin ekran görüntüsü.

  7. Görselin nasıl yanıt verdiğini test etmek için yeniden boyutlandırın. Güncelleştirme sayısı değerinin görseli yeniden boyutlandırdığınızda arttığını göreceksiniz.

    Yeniden boyutlandırıldıktan sonra farklı bir güncelleştirme sayısı gösteren yeni görselin ekran görüntüsü.

Görsel öğe ve metin ekleme

Bu bölümde görselinizi daireye dönüştürmeyi ve metin eklemeyi öğreneceksiniz.

Not

Bu öğreticide Power BI görselini geliştirmek için Visual Studio Code (VS Code) kullanılmıştır.

visuals.ts dosyasını değiştirme

Kod silerek ve ekleyerek visual.ts dosyasını oluşturun.

  1. Projenizi VS Code (Dosya > Klasör Aç) ile açın.

  2. Gezgin bölmesinde src klasörünü genişletip visual.ts dosyasını seçin.

    VS Code'da visual.ts dosyasına erişme adımlarının ekran görüntüsü.

    Önemli

    visual.ts dosyasının en üst bölümündeki açıklamaları inceleyin. Power BI görsel paketlerini kullanma izni, Massachusetts Institute of Technology (MIT) Lisansı koşulları kapsamında ücretsiz olarak sunulur. Anlaşmanın bir parçası olarak dosyanın en üstünde bulunan açıklamaları tutmanız gerekir.

  3. visual.ts dosyasından aşağıdaki kod satırlarını kaldırın.

    • VisualSettings import:

      import { VisualSettings } from "./settings";

    • Dört sınıf düzeyi özel değişken bildirimi.

    • constructor içindeki tüm kod satırları.

    • update yönteminin içindeki tüm kod satırları.

    • parseSettings ve enumerateObjectInstances yöntemleri dahil olmak üzere update yönteminin altındaki tüm kod satırları.

  4. import bölümünün sonuna aşağıdaki kod satırlarını ekleyin:

    • IVisualHost: Görsel ana bilgisayarıyla (Power BI) etkileşim kurmak için kullanılabilen özelliklerden ve hizmetlerden oluşan bir koleksiyondur.

      import IVisualHost = powerbi.extensibility.IVisualHost;

    • D3 kitaplığı

      import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any,any, any>;

      Not

      Ortamınızı ayarlarken bu kitaplığı yüklemediyseniz D3 JavaScript kitaplığını yükleyin.

  5. Visual sınıfı bildiriminin altına aşağıdaki sınıf düzeyi özellikleri ekleyin. Yalnızca private ile başlayan kod satırlarını eklemeniz gerekir.

    export class Visual implements IVisual {
    // ...
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private circle: Selection<SVGElement>;
    private textValue: Selection<SVGElement>;
    private textLabel: Selection<SVGElement>;
    // ...
}

  6. visual.ts dosyasını kaydedin.

Daire ve metin öğeleri ekleme

D3 Ölçeklenebilir Vektör Grafiği (SVG) ekleyin. Bu öğe, üç şekil oluşturma imkanı sunar: daire ve iki metin öğesi.

  1. visual.ts dosyasını VS Code ile açın.

  2. Oluşturucu bölümüne aşağıdaki kodu ekleyin.

    this.svg = d3.select(options.element)
    .append('svg')
    .classed('circleCard', true);
this.container = this.svg.append("g")
    .classed('container', true);
this.circle = this.container.append("circle")
    .classed('circle', true);
this.textValue = this.container.append("text")
    .classed("textValue", true);
this.textLabel = this.container.append("text")
    .classed("textLabel", true);

    İpucu

    Okunabilirliği artırmak için her bir kod parçacığını projenize kopyaladıktan sonra belgeyi biçimlendirmeniz önerilir. VS Code'da herhangi bir yere sağ tıklayıp Belgeyi Biçimlendir'i (Alt+Shift+F) seçin.

  3. visual.ts dosyasını kaydedin.

Genişliği ve yüksekliği ayarlama

Görselin genişliğini ve yüksekliğini ayarladıktan sonra görsel öğelerin özniteliklerini ve stillerini başlatın.

  1. visual.ts dosyasını VS Code ile açın.

  2. Aşağıdaki kodu update yöntemine ekleyin.

    let width: number = options.viewport.width;
let height: number = options.viewport.height;
this.svg.attr("width", width);
this.svg.attr("height", height);
let radius: number = Math.min(width, height) / 2.2;
this.circle
    .style("fill", "white")
    .style("fill-opacity", 0.5)
    .style("stroke", "black")
    .style("stroke-width", 2)
    .attr("r", radius)
    .attr("cx", width / 2)
    .attr("cy", height / 2);
let fontSizeValue: number = Math.min(width, height) / 5;
this.textValue
    .text("Value")
    .attr("x", "50%")
    .attr("y", "50%")
    .attr("dy", "0.35em")
    .attr("text-anchor", "middle")
    .style("font-size", fontSizeValue + "px");
let fontSizeLabel: number = fontSizeValue / 4;
this.textLabel
    .text("Label")
    .attr("x", "50%")
    .attr("y", height / 2)
    .attr("dy", fontSizeValue / 1.2)
    .attr("text-anchor", "middle")
    .style("font-size", fontSizeLabel + "px");

  3. visual.ts dosyasını kaydedin.

(İsteğe bağlı) visuals.ts dosyasındaki kodu gözden geçirme

visuals.ts dosyasındaki kodun aşağıdaki gibi göründüğünü doğrulayın:

/*
*  Power BI Visual CLI
*
*  Copyright (c) Microsoft Corporation
*  All rights reserved.
*  MIT License
*
*  Permission is hereby granted, free of charge, to any person obtaining a copy
*  of this software and associated documentation files (the ""Software""), to deal
*  in the Software without restriction, including without limitation the rights
*  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*  copies of the Software, and to permit persons to whom the Software is
*  furnished to do so, subject to the following conditions:
*
*  The above copyright notice and this permission notice shall be included in
*  all copies or substantial portions of the Software.
*
*  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*  THE SOFTWARE.
*/
"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;

export class Visual implements IVisual {
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private circle: Selection<SVGElement>;
    private textValue: Selection<SVGElement>;
    private textLabel: Selection<SVGElement>;

    constructor(options: VisualConstructorOptions) {
        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circleCard', true);
        this.container = this.svg.append("g")
            .classed('container', true);
        this.circle = this.container.append("circle")
            .classed('circle', true);
        this.textValue = this.container.append("text")
            .classed("textValue", true);
        this.textLabel = this.container.append("text")
            .classed("textLabel", true);
    }

    public update(options: VisualUpdateOptions) {
        let width: number = options.viewport.width;
        let height: number = options.viewport.height;
        this.svg.attr("width", width);
        this.svg.attr("height", height);
        let radius: number = Math.min(width, height) / 2.2;
        this.circle
            .style("fill", "white")
            .style("fill-opacity", 0.5)
            .style("stroke", "black")
            .style("stroke-width", 2)
            .attr("r", radius)
            .attr("cx", width / 2)
            .attr("cy", height / 2);
        let fontSizeValue: number = Math.min(width, height) / 5;
        this.textValue
            .text("Value")
            .attr("x", "50%")
            .attr("y", "50%")
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeValue + "px");
        let fontSizeLabel: number = fontSizeValue / 4;
        this.textLabel
            .text("Label")
            .attr("x", "50%")
            .attr("y", height / 2)
            .attr("dy", fontSizeValue / 1.2)
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeLabel + "px");
    }
}

capabilities.json dosyasını değiştirme

capabilities.json dosyasındaki gereksiz kod satırlarını silin.

  1. Projenizi VS Code (Dosya > Klasör Aç) ile açın.

  2. capabilities.json dosyasını seçin.

    VS Code'da capabilities.json dosyasına erişme adımlarının ekran görüntüsü.

  3. Tüm nesne öğelerini kaldırın (satır 14-60).

  4. capabilities.json dosyasını kaydedin.

Daire kartı görselini yeniden başlatma

Görselin çalışmasını durdurun ve yeniden başlatın.

  1. Görseli çalıştıran PowerShell penceresinde Ctrl+C tuşlarına basın ve toplu işi sonlandırmanız istenirse Y girin ve Enter tuşuna basın.

  2. PowerShell'de görseli başlatabilirsiniz.

    pbiviz start

Görseli eklenen öğelerle birlikte test etme

Görselin yeni eklenen öğeleri görüntülediğini doğrulayın.

  1. Power BI hizmetinde Power BI US Sales Analysis adlı raporu açın. Daire kartı görselini geliştirmek için farklı bir rapor kullanıyorsanız o rapora gidin.

  2. Görselin daire olarak şekillendirilmiş olduğundan emin olun.

    Daire olarak şekillendirilmiş daire kartı görselinin ekran görüntüsü.

    Not

    Görselde herhangi bir şey görüntülenmiyorsa Alanlar bölmesinden Quantity alanını geliştirici görseline sürükleyin.

  3. Görseli yeniden boyutlandırın.

    Dairenin ve metnin, görselin boyutlarına uygun şekilde ölçeklendirildiğini göreceksiniz. Görseli yeniden boyutlandırdığınızda update yöntemi çağrılır ve sonuç olarak görsel öğeleri yeniden ölçeklendirilir.

Otomatik yeniden yüklemeyi etkinleştirme

Projede yapılan değişiklikler kaydedildiğinde görselin otomatik olarak yeniden yüklenmesini sağlamak için bu ayarı kullanın.

  1. Power BI US Sales Analysis adlı rapora (veya daire kartı görselinizin bulunduğu projeye) gidin.

  2. Daire kartı görselini seçin.

  3. Kayan araç çubuğunda Otomatik yeniden yüklemeyi aç/kapat'ı seçin.

    Daire kartı görselinin kayan araç çubuğundaki Otomatik yeniden yüklemeyi aç/kapat seçeneğine tıklama işleminin ekran görüntüsü.

Görselin veri işlemesini sağlama

Bu bölümde veri rollerini ve veri görünümü eşlemelerini tanımlayacaksınız. Ayrıca görseli değiştirerek görüntülediği değerini adını göstermesini sağlayacaksınız.

capabilities.json dosyasını yapılandırma

capabilities.json dosyasını düzenleyerek veri rolünü ve veri görünümü eşlemelerini tanımlayın.

  • Veri rolünü tanımlama

    dataRoles dizisini measure türünde tek bir veri rolüyle tanımlayın. Bu veri rolü measure olarak adlandırılır ve Ölçü olarak görüntülenir. Bir ölçü alanının veya özetlenmiş bir alanın geçirilmesini destekler.

    1. capabilities.json dosyasını VS Code ile açın.

    2. dataRoles dizisinin (satır 3-12) içindeki tüm içeriği kaldırın.

    3. dataRoles dizisine aşağıdaki kodu ekleyin.

      {
    "displayName": "Measure",
    "name": "measure",
    "kind": "Measure"
}

    4. capabilities.json dosyasını kaydedin.

  • Veri görünümü eşlemesini tanımlama

    dataViewMappings dizisinde measure adlı bir alan tanımlayın. Bu alan veri rolüne geçirilebilir.

    1. capabilities.json dosyasını VS Code ile açın.

    2. dataViewMappings dizisindeki (satır 10-30) içeriğin tamamını kaldırın.

    3. dataViewMappings dizisine aşağıdaki kodu ekleyin.

      {
    "conditions": [
        { "measure": { "max": 1 } }
    ],
    "single": {
        "role": "measure"
    }
}

    4. capabilities.json dosyasını kaydedin.

(İsteğe bağlı) capabilities.json dosyasında yapılan kod değişikliklerini gözden geçirme

Daire kartı görselinde measure alanının görüntülendiğini doğrulayın ve Veri Görünümünü Göster seçeneğini kullanarak yaptığınız değişiklikleri gözden geçirin.

  1. Power BI hizmetinde Power BI US Sales Analysis adlı raporu açın. Daire kartı görselini geliştirmek için farklı bir rapor kullanıyorsanız o rapora gidin.

  2. Daire kartı görselinin artık Ölçü adlı yeni bir alanla yapılandırılabileceğine dikkat edin. Alanlar bölmesindeki öğeleri sürükleyip Ölçü alanına bırakabilirsiniz.

    Power BI hizmeti görselleştirme bölmesindeki daire kartı ölçü alanını gösteren ekran görüntüsü.

    Not

    Görsel projesi henüz veri bağlama mantığını içermiyor.

  3. Kayan araç çubuğunda Veri Görünümünü Göster'i seçin.

    Daire kartı kayan araç çubuğunda bulunan Veri görünümünü göster düğmesinin ekran görüntüsü.

  4. Üç noktayı seçerek ekranı genişletin ve single öğesini seçerek değeri görüntüleyin.

    Daire kartı Veri görünümünü göster seçeneğinde görüntülenen değerin ekran görüntüsü.

  5. metadata ve ardından columns dizisini genişletip format ve displayName değerlerini gözden geçirin.

    Daire kartı Veri görünümünü göster seçeneğinde görüntülenen format ve displayName değerlerinin ekran görüntüsü.

  6. Görsele geri dönmek için görselin üzerindeki kayan araç çubuğunda Veri Görünümünü Göster’i seçin.

<a name="configure-the-visual-to-consume-data">Görseli veri kullanacak şekilde yapılandırma

visual.ts dosyasında değişiklik yaparak daire kartı görselinin verileri kullanabilmesini sağlayın.

  1. visual.ts dosyasını VS Code ile açın.

  2. Modülden arabirimini içeri aktaran dosyada aşağıdaki satırın DataView göründüğünden emin powerbi olun. Dosyada yoksa ekleyin.

    import DataView = powerbi.DataView;

  3. update yönteminde şunları yapın:

    • İlk deyim olarak aşağıdaki deyimi ekleyin. Bu deyim dataView nesnesini kolay erişim için bir değişkene atar ve değişkeni dataView nesnesine başvuracak şekilde düzenler.

      let dataView: DataView = options.dataViews[0];

    • .text("Value") değerini şu kod satırıyla değiştirin:

      .text(<string>dataView.single.value)

    • .text("Label") değerini şu kod satırıyla değiştirin:

      .text(dataView.metadata.columns[0].displayName)

  4. visual.ts dosyasını kaydedin.

  5. Power BI hizmetinde görseli gözden geçirin.

Görsel artık seçili veri alanı adını ve değerini görüntüler.

Çalışan bir görsel Power BI. Biçimlendirme seçeneklerini bu seçeneklere ekleyebilir veya hemen kullanım için olduğu gibi paket yapabilirsiniz.

Sonraki adımlar

Daire kartı görseline biçimlendirme seçeneği ekleme

Power BI çubuk grafik görseli oluşturma

Oluşturduğunuz Power BI görselindeki hataları ayıklamayı öğrenme

Power BI görselleri proje yapısı