Öğretici: Power BI görseli geliştirmeTutorial: Developing a Power BI visual

Geliştiricilerin pano ve raporlarda kullanmak üzere Power BI’a özel görseller eklemesini sağlayan kolay bir yöntem sunuyoruz.We’re enabling developers to easily add custom visuals into Power BI for use in dashboard and reports. Başlamanıza yardımcı olmak için görselleştirmelerimize ait kodların tamamını GitHub’da yayımladık.To help you get started, we’ve published the code for all of our visualizations to GitHub.

Görselleştirme çerçevesine ek olarak topluluğun Power BI için yüksek kaliteli özel görseller oluşturmasına yardımcı olmak üzere test paketimizi ve araçlarımızı da sağladık.Along with the visualization framework, we’ve provided our test suite and tools to help the community build high-quality custom visuals for Power BI.

Bu öğreticide Power BI’da daire içinde biçimlendirilmiş bir ölçüyü görüntülemek için kullanılacak Daire Kartı adlı özel bir Power BI görselini geliştirme adımları gösterilmektedir.This tutorial shows you how to develop a Power BI custom visual named Circle Card to display a formatted measure value inside a circle. Daire Kartı görseli, dolgu rengi ve ana hat kalınlığını özelleştirme desteği sunar.The Circle Card visual supports customization of fill color and thickness of its outline.

Power BI Desktop raporunda kartlar, Daire Kartları olacak şekilde değiştirilir.In the Power BI Desktop report, the cards are modified to become Circle Cards.

Power BI Özel Görseli örnek çıktısı

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:In this tutorial, you learn how to:

  • Power BI özel görseli oluşturma.Create a Power BI custom visual.
  • Özel görsel D3 görsel öğelerini geliştirme.Develop the custom visual with D3 visual elements.
  • Görsel öğelerle veri bağlama yapılandırmasını tamamlama.Configure data binding with the visual elements.
  • Veri değerlerini biçimlendirme.Format data values.

ÖnkoşullarPrerequisites

Geliştirici ortamını ayarlamaSetting up the developer environment

Önkoşullarının yanı sıra yüklemeniz gereken birkaç araç daha vardır.In addition to the prerequisites, there are a few more tools you need to install.

node.js bileşenini yüklemeInstalling node.js

  1. Node.js bileşenini yüklemek için bir web tarayıcısında Node.js sayfasına gidin.To install Node.js, in a web browser, navigate to Node.js.

  2. En son özellik MSI yükleyicisini indirin.Download the latest feature MSI installer.

  3. Yükleyiciyi çalıştırın ve ardından yükleme adımlarını izleyin.Run the installer, and then follow the installation steps. Lisans sözleşmesini ve tüm varsayılan ayarları kabul edin.Accept the terms of the license agreement and all defaults.

     Node.js kurulumuNode.js setup

  4. Bilgisayarı yeniden başlatın.Restart the computer.

Paketleri yüklemeInstalling packages

Şimdi pbiviz paketini yüklemeniz gerekir.Now you need to install the pbiviz package.

  1. Bilgisayar yeniden başlatıldıktan sonra Windows PowerShell’i açın.Open Windows PowerShell after the computer has been restarted.

  2. pbiviz paketini yüklemek için aşağıdaki komutu girin.To install pbiviz, enter the following command.

    npm i -g powerbi-visuals-tools
    

Sertifika oluşturma ve yüklemeCreating and installing a certificate

WindowsWindows

  1. Sertifika oluşturmak ve yüklemek için aşağıdaki komutu girin.To create and install a certificate, enter the following command.

    pbiviz --install-cert
    

    Komut, parola oluşturan bir sonuç döndürür.It returns a result that produces a passphrase. Bu durumda parola, 15105661266553327 şeklindedir.In this case, the passphrase is 15105661266553327. Sertifika İçeri Aktarma Sihirbazı’nı da Başlatır.It also starts the Certificate Import Wizard.

    PowerShell ile oluşturulan sertifika

  2. Sertifika İçeri Aktarma Sihirbazı’nda depo konumunun Geçerli Kullanıcı olduğundan emin olun.In the Certificate Import Wizard, verify that the store location is set to Current User. Ardından İleri’yi seçin.Then select Next.

    Sertifika yükleme

  3. İçeri Aktarılacak Dosya adımında İleri’yi seçin.At the File to Import step, select Next.

  4. Özel Anahtar Koruması adımındaki Parola kutusuna sertifika oluşturduğunuzda döndürülen parolayı yapıştırın. Bu örnekte kullanılan parola 15105661266553327 şeklindedir.At the Private Key Protection step, in the Password box, paste the passphrase you received from creating the cert. Again, in this case it is 15105661266553327.

    Parolayı kopyalama

  5. Sertifika Deposu adımında Tüm sertifikaları aşağıdaki depoya yerleştir seçeneğini belirtin.At the Certificate Store step, select the Place all certificates in the Following store option. Ardından Gözat’ı seçin.Then select Browse.

    Tüm sertifikaları aşağıdaki depoya yerleştir

  6. Sertifika Deposu Seçin penceresinde Güvenilen Kök Sertifika Yetkilileri’ni ve ardından Tamam’ı seçin.In the Select Certificate Store window, select Trusted Root Certification Authorities and then select OK. Daha sonra Sertifika Deposu ekranında İleri’yi seçin.Then select Next on the Certificate Store screen.

    Güvenilen kök sertifika

  7. İçeri aktarma işlemini tamamlamak için Son’u seçin.To complete the import, select Finish.

  8. Güvenlik uyarısı alırsanız Evet’i seçin.If you receive a security warning, select Yes.

    Güvenlik uyarısı

  9. İçeri aktarma işleminin başarılı olduğu bildirildiğinde Tamam’ı seçin.When notified that the import was successful, select OK.

    Sertifika içeri aktarma işlemi başarılı

Önemli

Windows PowerShell oturumunu kapatmayın.Do not close the Windows PowerShell session.

OSXOSX

  1. Sol üstteki kilit kapalıysa açmak için kilidi seçin.If the lock in the upper left is locked, select it to unlock. localhost’u arayın ve sertifikaya çift tıklayın.Search for localhost and double-click on the certificate.

    OSX üzerine SSL sertifikası 1'i yükleme

  2. Her Zaman Güven seçeneğini belirleyip pencereyi kapatın.Select Always Trust and close the window.

    OSX üzerine SSL sertifikası 2'yi yükleme

  3. Kullanıcı adınızı ve parolanızı girin.Enter your username and password. Ayarları Güncelle'yi seçin.Select Update Settings.

    OSX üzerine SSL sertifikası 3'ü yükleme

  4. Açık tüm tarayıcıları kapatın.Close any browsers that you have open.

Not

Sertifika tanınmıyorsa bilgisayarınızı yeniden başlatmanız gerekebilir.If the certificate is not recognized, you may need to restart your computer.

Özel görsel oluşturmaCreating a custom visual

Ortamınızı ayarladığınıza göre özel görselinizi oluşturmaya başlayabilirsiniz.Now that you have set up your environment, it is time to create your custom visual.

Bu öğreticinin kaynak kodun tamamını indirebilirsiniz.You can download the full source code for this tutorial.

  1. Power BI Görsel Araçlar paketinin yüklü olduğunu doğrulayın.Verify that the Power BI Visual Tools package has been installed.

    pbiviz
    

    Yardım çıktısını görmeniz gerekir.You should see the help output.

    
         +syyso+/
     oms/+osyhdhyso/
     ym/       /+oshddhys+/
     ym/              /+oyhddhyo+/
     ym/                     /osyhdho
     ym/                           sm+
     ym/               yddy        om+
     ym/         shho /mmmm/       om+
         /    oys/ +mmmm /mmmm/       om+
     oso  ommmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     +dmd+ smmmh +mmmm /mmmm/       om+
             /hmdo +mmmm /mmmm/ /so+//ym/
                 /dmmh /mmmm/ /osyhhy/
                     //   dmmd
                         ++
    
         PowerBI Custom Visual Tool
    
     Usage: pbiviz [options] [command]
    
     Commands:
    
     new [name]        Create a new visual
     info              Display info about the current visual
     start             Start the current visual
     package           Package the current visual into a pbiviz file
     update [version]  Updates the api definitions and schemas in the current visual. Changes the version if specified
     help [cmd]        display help for [cmd]
    
     Options:
    
     -h, --help      output usage information
     -V, --version   output the version number
     --install-cert  Install localhost certificate
     

  2. Desteklenen komutların listesi de dahil olmak üzere çıktıyı gözden geçirin.Review the output, including the list of supported commands.

    Desteklenen komutlar

  3. Özel görsel projesi oluşturmak için aşağıdaki komutu girin.To create a custom visual project, enter the following command. CircleCard, projenin adıdır.CircleCard is the name of the project.

    pbiviz new CircleCard
    

    Yeni CircleCard sonucu

    Not

    Yeni projeyi istemin geçerli konumunda oluşturursunuz.You create the new project at the current location of the prompt.

  4. Proje klasörüne gidin.Navigate to the project folder.

    cd CircleCard
    
  5. Özel görseli başlatın.Start the custom visual. CircleCard görseliniz artık çalışıyor ve bilgisayarınızda barındırılıyor.Your CircleCard visual is now running while being hosted on your computer.

    pbiviz start
    

    Özel görseli çalıştırmaya başlama

Önemli

Windows PowerShell oturumunu kapatmayın.Do not close the Windows PowerShell session.

Özel görseli test etmeTesting the custom visual

Bu bölümde bir Power BI Desktop raporunu karşıya yükleyip özel görseli görüntüleyecek şekilde düzenleyerek CircleCard özel görselini test edeceğiz.In this section, we are going to test the CircleCard custom visual by uploading a Power BI Desktop report and then editing the report to display the custom visual.

  1. PowerBI.com oturumu açın, Dişli simgesine gidin ve Ayarlar’ı seçin.Sign in to PowerBI.com > go to the Gear icon > then select Settings.

    Power BI ayarları

  2. Geliştirici’yi seçip Geliştirici görselini test amacıyla etkinleştir onay kutusunu işaretleyin.Select Developer then check the Enable Developer Visual for testing checkbox.

    Geliştirici sayfası ayarları

  3. Power BI Desktop raporunu karşıya yükleyin.Upload a Power BI Desktop report.

    Veri Al > Dosyalar > Yerel Dosya.Get Data > Files > Local File.

    Bir Power BI Desktop oluşturmadıysanız örnek bir rapor indirebilirsiniz.You can download a sample Power BI Desktop report if you do not have one created already.

    Veri Al Yerel DosyaGet Data Local File

    Raporu görüntülemek için sol taraftaki gezinti bölmesinin Rapor bölümünden US_Sales_Analysis girişini seçin.Now to view the report, select US_Sales_Analysis from the Report section in the navigation pane on the left.

    Özel Görsel Desktop örneği

  4. Şimdi raporu Power BI hizmetinde düzenlemeniz gerekiyor.Now you need to edit the report while in the Power BI service.

    Raporu düzenle’ye gidin.Go to Edit report.

    Raporu düzenle

  5. Görsel Öğeler bölmesinde Geliştirici Görseli’ni seçin.Select the Developer Visual from the Visualizations pane.

    Geliştirici görseli

    Not

    Bu görselleştirme, bilgisayarınızda başlattığınız özel görseli temsil eder.This visualization represents the custom visual that you started on your computer. Yalnızca geliştirici ayarları etkinleştirildiğinde kullanılabilir.It is only available when the developer settings have been enabled.

  6. Rapor tuvaline bir görselleştirme eklendiğini göreceksiniz.Notice that a visualization was added to the report canvas.

    Yeni görsel

    Not

    Bu öğe, Güncelleştirme yönteminin çağrıldığı sayıyı gösteren çok basit bir görseldir.This is a very simple visual that displays the number of times its Update method has been called. Görsel bu aşamada herhangi bir veri almaz.At this stage, the visual does not yet retrieve any data.

  7. Raporda yeni görseli seçerken Alanlar bölmesine gidin > Sales bölümünü genişletin > Quantity değerini seçin.While selecting the new visual in the report, Go to the Fields Pane > expand Sales > select Quantity.

    Satış Miktarı

  8. Ardından test etmek için yeni görseli yeniden boyutlandırın. Değer artışlarının güncelleştirildiğini göreceksiniz.Then to test the new visual, resize the visual and notice the update value increments.

    Görseli yeniden boyutlandırma

Özel görselin PowerShell’de çalışmasını durdurmak için Ctrl+C tuşlarına basın.To stop the custom visual running in PowerShell, enter Ctrl+C. Toplu işi sonlandırmak isteyip istemediğiniz sorulduğunda Y tuşuna ve ardından Enter tuşuna basın.When prompted to terminate the batch job, enter Y, then press Enter.

Görsel öğe eklemeAdding visual elements

Şimdi D3 JavaScript kitaplığını yüklemeniz gerekiyor.Now you need to install the D3 JavaScript library. D3, web tarayıcılarında dinamik ve etkileşimli veri görselleştirmeleri oluşturmanızı sağlayan bir JavaScript kitaplığıdır.D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. Yaygın olarak uygulanan SVG HTML5 ve CSS standartlarını kullanır.It makes use of widely implemented SVG HTML5, and CSS standards.

Artık özel görseli daire ve metin görüntüleyecek şekilde geliştirebilirsiniz.Now you can develop the custom visual to display a circle with text.

Not

Bu öğreticideki birçok metin girişini buradan kopyalayabilirsiniz.Many text entries in this tutorial can be copied from here.

  1. D3 kitaplığını PowerShell’de yüklemek için aşağıdaki komutu girin.To install the D3 library in PowerShell, enter the command below.

    npm i d3@3.5.5 --save
    

    D3 kitaplığını yükleme

  2. D3 kitaplığı tür tanımlarını yüklemek için aşağıdaki komutu girin.To install type definitions for the D3 library, enter the command below.

    npm i @types/d3@3.5
    

    D3 kitaplığını yükleme

    Bu komut JavaScript dosyalarını temel alan TypeScript tanımlarını yükleyerek özel görseli TypeScript (JavaScript’in üst kümesi) kullanarak geliştirmenizi sağlar.This command installs TypeScript definitions based on JavaScript files, enabling you to develop the custom visual in TypeScript (which is a superset of JavaScript). Visual Studio Code, TypeScript uygulamalarını geliştirmek için ideal IDE ortamlarından biridir.Visual Studio Code is an ideal IDE for developing TypeScript applications.

  3. Visual Studio Code’u başlatın.Launch Visual Studio Code.

    Aşağıdaki komutu kullanarak Visual Studio Code’u PowerShell’den başlatabilirsiniz.You can launch Visual Studio Code from PowerShell by using the following command.

    code .
    
  4. Gezgin bölmesinde node_modules klasörünü genişleterek d3 library bileşeninin yüklendiğini doğrulayın.In the Explorer pane, expand the node_modules folder to verify that the d3 library was installed.

    Visual Studio Code uygulamasında D3 kitaplığı

  5. Gezgin bölmesinde node_modules > @types > d3 bölümünü genişleterek index.d.ts adlı TypeScript dosyasını bulun.Notice the TypeScript file, index.d.ts, by expanding node_modules > @types > d3 in the Explorer pane.

    index.d.ts dosyası

  6. pbiviz.json dosyasını seçin.Select the pbiviz.json file.

  7. d3 library kaydını tamamlamak için aşağıdaki dosya başvurusunu externalJS dizisine girin.To register the d3 library, enter the following file reference into the externalJS array. Var olan dosya başvurusu ile yeni dosya başvurusu arasına virgül eklemeyi unutmayın.Be sure to add a comma between the existing file reference and the new file reference.

    "node_modules/d3/d3.min.js"
    

    node_modules/d3/d3.min.js öğesini ekleme

  8. pbiviz.json dosyasında yaptığınız değişiklikleri kaydedin.Save the pbiviz.json file changes.

Görsel öğeleri geliştirmeDeveloping the visual elements

Artık daire ve örnek metin gösteren bir özel görseli geliştirme adımlarına geçebiliriz.Now we can explore how to develop the custom visual to show a circle and sample text.

  1. Gezgin bölmesinde src klasörünü genişletip visual.ts dosyasını seçin.In the Explorer pane, expand the src folder and then select visual.ts.

    Not

    visual.ts dosyasının en üst bölümündeki açıklamaları inceleyin.Notice the comments at the top of the visual.ts file. Power BI özel görsel paketlerini kullanma izni, MIT Lisansı koşulları kapsamında ücretsiz olarak sunulur.Permission to use the Power BI custom visual packages is granted free of charge under the terms of the MIT License. Anlaşmanın bir parçası olarak dosyanın en üstünde bulunan açıklamaları tutmanız gerekir.As part of the agreement, you must leave the comments at the top of the file.

  2. Visual sınıfından aşağıdaki varsayılan özel görsel mantığını kaldırın.Remove the following default custom visual logic from the Visual class.

    • Dört sınıf düzeyi özel değişken bildirimi.The four class-level private variable declarations.
    • Oluşturucunun tüm kod satırları.All lines of code from the constructor.
    • update yönteminin tüm kod satırları.All lines of code from the update method.
    • parseSettings ve enumerateObjectInstances yöntemleri dahil olmak üzere modülde kalan tüm satırlar.All remaining lines within the module, including the parseSettings and enumerateObjectInstances methods.

    Modül kodunun aşağıdaki gibi göründüğünü doğrulayın.Verify that the module code looks like the following.

    module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
    
        constructor(options: VisualConstructorOptions) {
    
        }
    
        public update(options: VisualUpdateOptions) {
    
            }
        }
    }
    
  3. Visual sınıfı bildiriminin altına aşağıdaki sınıf düzeyi özellikleri ekleyin.Beneath the Visual class declaration, insert the following class-level properties.

     private host: IVisualHost;
     private svg: d3.Selection<SVGElement>;
     private container: d3.Selection<SVGElement>;
     private circle: d3.Selection<SVGElement>;
     private textValue: d3.Selection<SVGElement>;
     private textLabel: d3.Selection<SVGElement>; 
    

    Visual.ts dosyası sınıf düzeyi özellikleri

  4. Oluşturucu bölümüne aşağıdaki kodu ekleyin.Add the following code to the constructor.

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

    Bu kod görselin içine bir SVG grubuna ek olarak bir daire ile iki metin öğesi olmak üzere üç şekil ekler.This code adds an SVG group inside the visual and then adds three shapes: a circle and two text elements.

    Belgedeki kodu biçimlendirmek için Visual Studio Code belgesinde herhangi bir yere sağ tıklayıp Belgeyi Biçimlendir’i seçin.To format the code in the document, right-select anywhere in the Visual Studio Code document, and then select Format Document.

    Belgeyi biçimlendir

    Okunabilirliği artırmak için her bir kod parçacığını yapıştırdıktan sonra belgeyi biçimlendirmeniz önerilir.To improve readability, it is recommended that you format the document every time that paste in code snippets.

  5. Aşağıdaki kodu update yöntemine ekleyin.Add the following code to the update method.

    let width: number = options.viewport.width;
    let height: number = options.viewport.height;
    this.svg.attr({
     width: width,
     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,
     cx: width / 2,
     cy: height / 2
    });
    let fontSizeValue: number = Math.min(width, height) / 5;
    this.textValue
     .text("Value")
     .attr({
         x: "50%",
         y: "50%",
         dy: "0.35em",
         "text-anchor": "middle"
     }).style("font-size", fontSizeValue + "px");
    let fontSizeLabel: number = fontSizeValue / 4;
    this.textLabel
     .text("Label")
     .attr({
         x: "50%",
         y: height / 2,
         dy: fontSizeValue / 1.2,
         "text-anchor": "middle"
     })
     .style("font-size", fontSizeLabel + "px");
    

    Bu kod, görselin genişliğini ve yüksekliğini ayarladıktan sonra görsel öğelerin özniteliklerini ve stillerini başlatır.This code sets the width and height of the visual, and then initializes the attributes and styles of the visual elements.

  6. visual.ts dosyasını kaydedin.Save the visual.ts file.

  7. capabilities.json dosyasını seçin.Select the capabilities.json file.

    14. satırdan başlayan nesne öğesinin tamamını kaldırın (satır 14-60).At line 14, remove the entire objects element (lines 14-60).

  8. capabilities.json dosyasını kaydedin.Save the capabilities.json file.

  9. PowerShell’de özel görseli başlatın.In PowerShell, start the custom visual.

    pbiviz start
    

Otomatik yeniden yüklemeyi aç/kapatToggle auto reload

  1. Power BI raporuna dönün.Navigate back to the Power BI report.

  2. Geliştirici görselinin üzerindeki kayan araç çubuğunda Otomatik Yeniden Yüklemeyi Aç/Kapat’ı seçin.In the toolbar floating above the developer visual, select the Toggle Auto Reload.

    Otomatik yeniden yüklemeyi aç/kapat

    Bu seçenek, projede yapılan değişiklikler kaydedildiğinde görselin otomatik olarak yeniden yüklenmesini sağlar.This option ensures that the visual is automatically reloaded each time you save project changes.

  3. Alanlar bölmesinden Quantity alanını geliştirici görseline sürükleyin.From the Fields pane, drag the Quantity field into the developer visual.

  4. Görselin aşağıdaki gibi göründüğünü doğrulayın.Verify that the visual looks like the following.

    Daire geliştirici görseli

  5. Görseli yeniden boyutlandırın.Resize the visual.

    Dairenin ve metin değerinin görselin kullanılabilir boyutuna uygun şekilde ölçeklendirildiğini göreceksiniz.Notice that the circle and text value scales to fit the available dimension of the visual.

    Görsel yeniden boyutlandırılırken güncelleştirme yöntemi sürekli çağrılır ve bu sayede görsel öğeleri akıcı bir şekilde yeniden boyutlandırılır.The update method is called continuously with resizing the visual, and it results in the fluid rescaling of the visual elements.

    Görsel öğeleri geliştirdiniz.You have now developed the visual elements.

  6. Şimdi görseli çalıştırma adımlarına geçebilirsiniz.Continue running the visual.

Veri bağlamayı yapılandırmaConfiguring data binding

Veri rollerini ve veri görünümü eşlemelerini tanımlayıp özel görsel mantığını bir ölçünün değerini ve görünen adını görüntüleyecek şekilde düzenleyin.Define the data roles and data view mappings, and then modify the custom visual logic to display the value and display name of a measure.

Özellikleri yapılandırmaConfiguring the capabilities

capabilities.json dosyasını düzenleyerek veri rolünü ve veri görünümü eşlemelerini tanımlayın.Modify the capabilities.json file to define the data role and data view mappings.

  1. Visual Studio Code’da capabilities.json dosyasının dataRoles dizisinde bulunan tüm içeriği (satır 3-12) kaldırın.In Visual Studio code, in the capabilities.json file, from inside the dataRoles array, remove all content (lines 3-12).

  2. dataRoles dizisine aşağıdaki kodu ekleyin.Inside the dataRoles array, insert the following code.

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

    dataRoles dizisi artık measure adında measure türüne sahip tek bir veri rolü tanımlar ve bunu Ölçü olarak görüntüler.The dataRoles array now defines a single data role of type measure, that is named measure, and displays as Measure. Bu veri rolü, bir ölçü alanının veya özetlenmiş bir alanın geçirilmesini destekler.This data role allows passing either a measure field, or a field that is summarized.

  3. dataViewMappings dizisindeki içeriğin tamamını (satır 10-31) kaldırın.From inside the dataViewMappings array, remove all content (lines 10-31).

  4. dataViewMappings dizisine aşağıdaki içeriği ekleyin.Inside the dataViewMappings array, insert the following content.

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

    dataViewMappings dizisi artık measure adlı veri rolüne geçirilebilecek tek bir alan tanımlar.The dataViewMappings array now defines one field can be passed to the data role named measure.

  5. capabilities.json dosyasını kaydedin.Save the capabilities.json file.

  6. Power BI’da görselin artık Ölçü ile yapılandırabileceğini göreceksiniz.In Power BI, notice that the visual now can be configured with Measure.

    Quantity Ölçüsü

    Not

    Görsel projesi henüz veri bağlama mantığını içermiyor.The visual project does not yet include data binding logic.

Veri görünümünü keşfetmeExploring the dataview

  1. Görselin üzerindeki kayan araç çubuğunda Veri Görünümünü Göster’i seçin.In the toolbar floating above the visual, select Show Dataview.

    Veri Görünümünü Göster

  2. single bölümünü genişletip değeri inceleyin.Expand down into single, and then notice the value.

    Değeri genişletme

  3. metadata ve ardından columns dizisini genişletip format ve displayName değerlerini inceleyin.Expand down into metadata, and then into the columns array, and in particular notice the format and displayName values.

    Displayname değeri

  4. 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.To toggle back to the visual, in the toolbar floating above the visual, select Show Dataview.

    Geri dönme

Veri bağlamayı yapılandırmaConfiguring data binding

  1. Visual Studio Code’daki visual.ts dosyasında update yönteminin ilk deyimi olarak aşağıdaki deyimi ekleyin.In Visual Studio Code, in the visual.ts file, add the following statement as the first statement of the update method.

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

    Update dizisi veri görünümü

    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.This statement assigns the dataView to a variable for easy access, and declares the variable to reference the dataView object.

  2. update yönteminin .text("Value") bölümünü aşağıdaki değerle değiştirin.In the update method, replace .text("Value") with the following.

    .text(dataView.single.value as string)
    

    textValue değerini değiştirme

  3. update yönteminin .text("Label") bölümünü aşağıdaki değerle değiştirin.In the update method, replace .text("Label") with the following.

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

    textLabel değerini değiştirme

  4. visual.ts dosyasını kaydedin.Save the visual.ts file.

  5. Power BI’da değeri ve görünen adı gösteren görseli gözden geçirin.In Power BI, review the visual, which now displays the value and the display name.

Veri rollerini yapılandırdınız ve görseli veri görünümüne bağladınız.You have now configured the data roles and bound the visual to the dataview.

Bir sonraki öğreticide özel görsele biçimlendirme seçenekleri eklemeyi öğreneceksiniz.In the next tutorial you learn how to add formatting options to the custom visual.

Hata ayıklamaDebugging

Özel görseliniz için hata ayıklamaya yönelik ipuçlarına, hata ayıklama kılavuzuna giderek göz atabilirsiniz.For tips about debugging your custom visual, see the debugging guide.

Sonraki adımlarNext steps