Öğretici: React kullanarak Power BI görseli oluşturma

Geliştirici olarak kendi Power BI görsellerinizi oluşturabilirsiniz. Bu görseller siz, kuruluşunuz veya üçüncü taraflar tarafından kullanılabilir.

Bu öğreticide React kullanarak bir Power BI görseli geliştirebilirsiniz. Görsel, daire içinde biçimlendirilmiş bir ölçü değeri görüntüler. Görselin uyarlamalı boyutu vardır ve ayarlarını özelleştirmenize olanak tanır.

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

Görseliniz için bir geliştirme projesi oluşturun.
React kullanarak görselinizi geliştirin.
Görselinizi verileri işecek şekilde yapılandırın.
Görselinizi boyut değişikliklerine uyum sağlayacak şekilde yapılandırın.
Görseliniz için uyarlamalı renk ve kenarlık ayarlarını yapılandırın.

Not

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

Önkoşullar

Power BI görselinizi geliştirmeye başlamadan önce bu bölümde her şeyin listelendiğini doğrulayın.

Power BI Pro veya Kullanıcı Başına Premium (PPU) hesabı. Bir aboneliğiniz yoksa ücretsiz deneme sürümüne kaydolun.
Visual Studio Code (VS Code). VS Code, JavaScript ve TypeScript uygulamaları geliştirmek için ideal bir Tümleşik Geliştirme Ortamıdır (IDE).
Windows PowerShell sürüm 4 veya üzeri (Windows için). Veya Terminal (Mac için).
Power BI görseli geliştirmeye hazır bir ortam. Power BI görseli geliştirmek için ortamınızı ayarlayın.
Bu öğreticide ABD Satış Analizi raporu kullanılmaktadır. Bu raporu indirip Power BI hizmeti yükleyebilir veya kendi raporunuzu kullanabilirsiniz. Power BI hizmeti ve dosyaları karşıya yükleme hakkında daha fazla bilgiye ihtiyacınız varsa Power BI hizmeti öğreticisinde Oluşturmaya başlama öğreticisine bakın.

Geliştirme projesi oluşturma

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

PowerShell'i açın ve projenizi oluşturmak istediğiniz klasöre gidin.
Aşağıdaki komutu girin:
```
pbiviz new ReactCircleCard
```
Projenin klasörüne gidin.
```
cd ReactCircleCard
```
React daire kartı görselini başlatın. Görseliniz artık bilgisayarınızda barındırılırken çalışıyor.
```
pbiviz start
```
Önemli

Görselin çalışmasını durdurmak için PowerShell'de Ctrl+ girin ve toplu işi sonlandırmanız istenirse Y girin ve Enter tuşuna basın.

Power BI hizmeti React daire kartını görüntüleme

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

Görseli test etmek için kendi raporunuzu da kullanabilirsiniz.

Not

Devam etmeden önce görsel geliştirici modunu etkinleştirdiğinizden emin olun.

PowerBI.com oturum açın ve ABD Satış Analizi raporunu açın.
Düzenle'yi seçin.
Power BI hizmeti arabiriminin en altındaki Yeni sayfa düğmesine tıklayarak test için yeni bir sayfa oluşturun.
Görselleştirmeler bölmesinde Geliştirici Görseli'ni seçin.

Bu görsel, bilgisayarınızda çalıştırdığınız özel görseli temsil eder. Yalnızca özel görsel hata ayıklama ayarı etkinleştirildiğinde kullanılabilir.
Rapor tuvaline bir görsel eklendiğini doğrulayın.

Bu, güncelleştirme yönteminin çağrılma sayısını gösteren basit bir görseldir. Bu aşamada görsel herhangi bir veri almaz.

Not

Görsel bağlantı hata iletisi görüntülerse, tarayıcınızda yeni bir sekme açın, adresine https://localhost:8080/assetsgidin ve tarayıcınızı bu adresi kullanması için yetki verin.
Yeni görsel seçiliyken Veri bölmesine gidin, Satış'ı genişletin ve Miktar'ı seçin.
Görselin nasıl yanıt verdiğini test etmek için görseli yeniden boyutlandırın ve görseli her yeniden boyutlandırdığınızda Güncelleştirme sayısı değerinin arttığını fark edin.

Projenizde React'i ayarlama

Bu bölümde Power BI görsel projeniz için React'i ayarlamayı öğreneceksiniz.

PowerShell'i açın ve Ctrl+C tuşlarına basarak görselin çalışmasını durdurun. Toplu işi sonlandırmanız istenirse Y girin ve Enter tuşuna basın.

React'i yükleme

Gerekli React bağımlılıklarını yüklemek için ReactCircleCard klasörünüzde PowerShell'i açın ve aşağıdaki komutu çalıştırın:

npm i react react-dom

React türü tanımlarını yükleme

React için tür tanımlarını yüklemek için reactCircleCard klasörünüzde PowerShell'i açın ve aşağıdaki komutu çalıştırın:

npm i @types/react @types/react-dom

React bileşen sınıfı oluşturma

React bileşen sınıfı oluşturmak için bu adımları izleyin.

VS Code'ı açın ve reactCircleCard klasörüne gidin.
Yeni Dosya Oluştur'u seçerek yeni bir dosya oluşturun.>

Aşağıdaki kodu yeni dosyaya kopyalayın.

import * as React from "react";

export class ReactCircleCard extends React.Component<{}>{
    render(){
        return (
            <div className="circleCard">
                Hello, React!
            </div>
        )
    }
}

export default ReactCircleCard;

Farklı Kaydet'i seçin ve src klasörüne gidin.
Dosyayı aşağıdaki gibi kaydedin:
- Dosya adı alanına bileşen girin.
- Kayıt türü açılan menüsünde TypeScript React'i seçin.

Görsel dosyaya React ekleme

visual.ts dosyasındaki kodu React'in kullanılmasını sağlayan kodla değiştirin.

src klasöründe visual.ts açın ve dosyadaki kodu aşağıdaki kodla değiştirin:

"use strict";
import powerbi from "powerbi-visuals-api";

import DataView = powerbi.DataView;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;

// Import React dependencies and the added component
import * as React from "react";
import * as ReactDOM from "react-dom";
import ReactCircleCard from "./component";

import "./../style/visual.less";

export class Visual implements IVisual {

    constructor(options: VisualConstructorOptions) {

    }

    public update(options: VisualUpdateOptions) {

    }
}

Not

Varsayılan Power BI TypeScript ayarları React tsx dosyalarını tanımadığı için VS Code hata olarak vurgulanır component .

Bileşeni işlemek için hedef HTML öğesini visual.ts ekleyin. Bu HTMLElement öğe, oluşturucuya geçirilen içindedir VisualConstructorOptions.

src klasöründe visual.ts açın.
Sınıfına Visual aşağıdaki kodu ekleyin:

private target: HTMLElement;
private reactRoot: React.ComponentElement<any, any>;

Oluşturucuya VisualConstructorOptions aşağıdaki satırları ekleyin:

this.reactRoot = React.createElement(ReactCircleCard, {});
this.target = options.element;

ReactDOM.render(this.reactRoot, this.target);

visual.ts dosyanız şu şekilde görünmelidir:

"use strict";
import powerbi from "powerbi-visuals-api";

import DataView = powerbi.DataView;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import * as React from "react";
import * as ReactDOM from "react-dom";
import ReactCircleCard from "./component";    

import "./../style/visual.less";

export class Visual implements IVisual {
    private target: HTMLElement;
    private reactRoot: React.ComponentElement<any, any>;

    constructor(options: VisualConstructorOptions) {
        this.reactRoot = React.createElement(ReactCircleCard, {});
        this.target = options.element;

        ReactDOM.render(this.reactRoot, this.target);
    }

    public update(options: VisualUpdateOptions) {

    }
}

visual.ts kaydedin.

tsconfig dosyasını düzenleme

React ile çalışmak için tsconfig.json düzenleyin.

reactCircleCard klasöründe tsconfig.json açın ve öğenin başına compilerOptions iki satır ekleyin.

"jsx": "react",
"types": ["react", "react-dom"],

tsconfig.json dosyanız şimdi şöyle görünmelidir ve visual.tscomponentgiderilmelidir.

{
    "compilerOptions": {
        "jsx": "react",
        "types": ["react", "react-dom"],
        "allowJs": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es6",
        "sourceMap": true,
        "outDir": "./.tmp/build/",
        "moduleResolution": "node",
        "declaration": true,
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "files": [
        "./src/visual.ts"
    ]
}

tsconfig.json kaydedin.

Görselinizi test edin

CircleCardVisual klasöründe PowerShell'i açın ve projenizi çalıştırın:

pbiviz start

Power BI hizmeti raporunuza yeni bir Geliştirici Görseli eklediğinizde şöyle görünür:

Power BI hizmetinde yeni oluşturulan geliştirici görselindeki hello React iletisini gösteren ekran görüntüsü.

Görselinizin veri alanını yapılandırma

Görselinizin yetenek dosyasını, görselin Veri ölçme alanına yalnızca bir veri alanı gönderilecek şekilde yapılandırın.

VS Code'da reactCircleCard klasöründen capabilities.json açın.
, ReactCircleCard tek bir değer görüntüler: Measure Data. Category Data nesnesini öğesinden dataRoleskaldırın.

Nesne Category Data kaldırıldıktan dataRoles sonra anahtar şöyle görünür:
```
"dataRoles": [
    {
        "displayName": "Measure Data",
        "name": "measure",
        "kind": "Measure"
    }
],
```
Anahtarın tüm içeriğini objects kaldırın (daha sonra doldurursunuz).

İçeriğini objects kaldırdıktan sonra anahtar şöyle görünür:
```
"objects": {},
```

dataViewMappings özelliğini aşağıdaki kodla değiştirin. max: 1 içinde measure , görselin Ölçü veri alanına yalnızca bir veri alanının gönderilebileceğini belirtir.

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

capabilities.json yaptığınız değişiklikleri kaydedin.
pbiviz start Power BI hizmeti çalıştığını doğrulayın ve React Circle Card görselinizi yenileyin. Ölçü verileri alanı, tarafından max: 1belirtildiği gibi yalnızca bir veri alanını kabul edebilir.

Görselin stilini güncelleştirme

Bu bölümde görselin şeklini daireye dönüştürebilirsiniz. Görselinizin stilini denetlemek için visual.less dosyasını kullanın.

Stil klasöründe visual.less dosyasını açın.

visual.less dosyasının içeriğini aşağıdaki kodla değiştirin.

.circleCard {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

p {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;

    position: relative;
    top: -30px;
    margin: 50% 0 0 0;
}

Görseli kaydedin.daha az.

Görselinizi Power BI'dan özellik alacak şekilde ayarlama

Bu bölümde görseli Power BI'dan veri alacak ve component.tsx dosyasındaki örneklere güncelleştirme gönderecek şekilde yapılandıracaksınız.

React kullanarak verileri işleme

React kullanarak verileri işleyebilirsiniz. Bileşen verileri kendi durumundan görüntüleyebilir.

VS Code'da reactCircleCard klasöründen component.tsx dosyasını açın.

component.tsx dosyasının içeriğini aşağıdaki kodla değiştirin.

import * as React from "react";

export interface State {
    textLabel: string,
    textValue: string
}

export const initialState: State = {
    textLabel: "",
    textValue: ""
}

export class ReactCircleCard extends React.Component<{}, State>{
    constructor(props: any){
        super(props);
        this.state = initialState;
    }

    render(){
        const { textLabel, textValue } = this.state;

        return (
            <div className="circleCard">
                <p>
                    {textLabel}
                    <br/>
                    <em>{textValue}</em>
                </p>
            </div>
        )
    }
}

component.tsx dosyasını kaydedin.

Görselinizi veri alacak şekilde ayarlama

Görseller, yöntemin update bağımsız değişkeni olarak veri alır. Bu bölümde, veri almak için bu yöntemi güncelleştirin.

Aşağıdaki kod ve öğesini textLabelseçer textValueDataView ve veriler varsa bileşen durumunu güncelleştirir.

VS Code'da, src klasöründen visual.ts açın.
satırını import ReactCircleCard from "./component"; aşağıdaki kodla değiştirin:
```
import { ReactCircleCard, initialState } from "./component";
```

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

if(options.dataViews && options.dataViews[0]){
    const dataView: DataView = options.dataViews[0];

    ReactCircleCard.update({
        textLabel: dataView.metadata.columns[0].displayName,
        textValue: dataView.single.value.toString()
    });
} else {
    this.clear();
}

yönteminin altına clear aşağıdaki kodu ekleyerek bir update yöntem oluşturun.
```
private clear() {
    ReactCircleCard.update(initialState);
}
```
visual.ts Kaydet

Görselinizi veri gönderecek şekilde ayarlama

Bu bölümde, bileşen dosyasındaki örneklere güncelleştirme göndermek için görseli güncelleştirin.

VS Code'da, src klasöründen component.tsx dosyasını açın.

Sınıfına ReactCircleCard aşağıdaki kodu ekleyin:

private static updateCallback: (data: object) => void = null;

public static update(newState: State) {
    if(typeof ReactCircleCard.updateCallback === 'function'){
        ReactCircleCard.updateCallback(newState);
    }
}

public state: State = initialState;

public componentWillMount() {
        ReactCircleCard.updateCallback = (newState: State): void => { this.setState(newState); };
}

public componentWillUnmount() {
    ReactCircleCard.updateCallback = null;
}

component.tsx dosyasını kaydedin.

Görseldeki değişiklikleri görüntüleme

Yaptığınız değişiklikleri görüntülemek için React Circle Card görselinizi test edin.

pbiviz start Çalıştığını doğrulayın ve Power BI hizmeti React Circle Card görselinizi yenileyin.
Görselin Ölçü verileri alanına Sales ekleyin.

Power BI hizmeti react daire kartı görselinde görüntülenen satış değerinin ekran görüntüsü.

Görselinizi yeniden boyutlandırılabilir hale getirme

Şu anda görselinizin genişliği ve yüksekliği sabit. Görseli yeniden boyutlandırılabilir hale getirmek için değişkeni hem visual.ts sizecomponent.tsx dosyalarında tanımlamanız gerekir. Bu bölümde görseli yeniden boyutlandırılabilir hale getireceksiniz.

Bu bölümde açıklanan adımları tamamladıktan sonra, görselinizin daire çapı minimum genişlik veya yükseklik boyutuna karşılık gelir ve Power BI hizmeti yeniden boyutlandırabilirsiniz.

visual.ts dosyasını yapılandırma

Nesneden options görsel görünüm penceresi geçerli boyutunu alın.

VS Code'da, src klasöründen visual.ts açın.
Arabirimi içeri aktarmak IViewport için bu kodu ekleyin.
```
import IViewport = powerbi.IViewport;
```
viewport özelliğini sınıfına visual ekleyin.
```
private viewport: IViewport;
```

yönteminde update , öncesinde ReactCircleCard.updateaşağıdaki kodu ekleyin.

this.viewport = options.viewport;
const { width, height } = this.viewport;
const size = Math.min(width, height);

yönteminde update , içine ReactCircleCard.updateekleyin size.
```
size,
```
visual.ts kaydedin.

component.tsx dosyasını yapılandırma

VS Code'da, src klasöründen component.tsx dosyasını açın.
Aşağıdaki kodu export interface State içine ekleyin.
```
size: number
```
Aşağıdaki kodu export const initialState: State içine ekleyin.
```
size: 200
```
yönteminde render kodda aşağıdaki değişiklikleri yapın:
1. size'yi const { textLabel, textValue, size } = this.state;'ye ekle. Bu bildirim şimdi şöyle görünmelidir:
```
const { textLabel, textValue, size } = this.state;
```
2. Yukarıdaki returnaşağıdaki kodu ekleyin.
```
const style: React.CSSProperties = { width: size, height: size };
```
3. İlk dönüş satırını <div className="circleCard"> şununla değiştirin:
```
<div className="circleCard" style={style}>
```
component.tsx dosyasını kaydedin.

Görsel dosyayı yapılandırma

VS Code'da, stil klasöründe visual.less dosyasını açın.
içinde .circleCardve değerini ve widthile height değiştirin min-widthmin-height.
```
min-width: 200px;
min-height: 200px;
```
Görseli kaydedin.daha az.

Power BI görselinizi özelleştirilebilir hale getirme

Bu bölümde, kullanıcıların renk ve kenarlık kalınlığında değişiklik yapmalarına olanak tanıyarak görselinizi özelleştirme özelliğini ekleyebilirsiniz.

Yetenek dosyasına renk ve kalınlık ekleme

capabilities.json özelliğine objectrenk ve kenarlık kalınlığını ekleyin.

VS Code'da reactCircleCard klasöründen capabilities.json açın.

Özelliğine aşağıdaki ayarları objects ekleyin.

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

capabilities.json kaydedin.

Ayarlar dosyasına daire biçimlendirme ayarları sınıfı ekleme

Circle biçimlendirme ayarlarını settings.ts ekleyin. Biçimlendirme modeli ayarlarını oluşturma hakkında daha fazla bilgi için bkz . biçimlendirme yardımcı programları.

VS Code'da, src klasöründen settings.ts açın.

settings.ts içindeki kodu aşağıdaki kodla değiştirin:

"use strict";

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

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

/**
* Circle Formatting Card
*/
class CircleCardSettings extends FormattingSettingsCard {
    circleColor = new formattingSettings.ColorPicker({
        name: "circleColor", // circle color name should match circle color property name in capabilities.json
        displayName: "Color",
        description: "The fill color of the circle.",
        show: true,
        value: { value: "white" }
    });

    circleThickness = new formattingSettings.NumUpDown({
        name: "circleThickness", // circle thickness name should match circle color property name in capabilities.json
        displayName: "Thickness",
        description: "The circle thickness.",
        show: true,
        value: 2
    });

    name: string = "circle"; // circle card name should match circle object name in capabilities.json
    displayName: string = "Circle";
    show: boolean = true;
    slices: Array<FormattingSettingsSlice> = [this.circleColor, this.circleThickness];
}

/**
* visual settings model class
*
*/
export class VisualFormattingSettingsModel extends FormattingSettingsModel {
    // Create formatting settings model circle formatting card
    circleCard = new CircleCardSettings();

    cards = [this.circleCard];
}

settings.ts kaydedin.

Görsel ayarları uygulamak için yöntem ekleme

getFormattingModel Görsel ayarları ve gerekli içeri aktarmaları uygulamak için kullanılan yöntemi visual.ts dosyasına ekleyin.

VS Code'da, src klasöründen visual.ts açın.

Bu import deyimleri visual.ts en üstüne ekleyin.

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

Visual'a aşağıdaki bildirimi ekleyin.

private formattingSettings: VisualFormattingSettingsModel;
private formattingSettingsService: FormattingSettingsService;

Yöntemini Visual'e getFormattingModelekleyin.

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

Visual sınıfında, başlatmak için constructor aşağıdaki kod satırını ekleyinformattingSettingsService
```
    this.formattingSettingsService = new FormattingSettingsService();
```

sınıfına Visual aşağıdaki kodu update ekleyerek görsel biçimlendirme ayarlarını en son biçimlendirme özellikleri değerlerine güncelleştirin.

Bu kodu sonrasına ifconst size = Math.min(width, height);ekleyin.

this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);
const circleSettings = this.formattingSettings.circleCard;

Bu kodu sonrasına ReactCircleCard.updatesizeekleyin:

borderWidth: circleSettings.circleThickness.value,
background: circleSettings.circleColor.value.value,
}

visual.ts kaydedin.

Bileşen dosyasını düzenleme

Bileşen dosyasını görselin renginde ve kenarlık kalınlığında yapılan değişiklikleri işleyebilecek şekilde düzenleyin.

VS Code'da, src klasöründen component.tsx dosyasını açın.

bu değerleri içine Stateekleyin:

background?: string,
borderWidth?: number

yönteminde render aşağıdaki kod satırlarını değiştirin:
1. const { textLabel, textValue, size } = this.state; ile:
```
const { textLabel, textValue, size, background, borderWidth } = this.state;
```
2. const style: React.CSSProperties = { width: size, height: size }; ile:
```
const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
```
component.tsx dosyasını kaydedin.

Değişikliklerinizi inceleme

Artık denetleyebileceğiniz görselin rengi ve kenarlık kalınlığıyla denemeler yapın.

pbiviz start Çalıştığını doğrulayın ve Power BI hizmeti React Circle Card görselinizi yenileyin.
Biçim sekmesini seçin ve Daire'yi genişletin.
Görselin Renk ve Kalınlık ayarlarını yapın ve görsel üzerindeki etkisini gözden geçirin.

Power BI hizmetinde renk ve kenarlık kalınlığı biçim seçeneklerini gösteren react daire kartı görselinin ekran görüntüsü.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-12-15