Zelfstudie: Een Power BI-visual maken met React

Als ontwikkelaar kunt u uw eigen Power BI-visuals maken. Deze visuals kunnen door u, uw organisatie of door derden worden gebruikt.

In deze zelfstudie ontwikkelt u een Power BI-visual met React. In de visual wordt een opgemaakte metingswaarde in een cirkel weergegeven. De visual heeft een adaptieve grootte en stelt u in staat om de instellingen ervan aan te passen.

In deze zelfstudie leert u het volgende:

Maak een ontwikkelingsproject voor uw visual.
Ontwikkel uw visual met React.
Configureer uw visual om gegevens te verwerken.
Configureer uw visual om aan te passen aan wijzigingen in de grootte.
Configureer adaptieve kleur- en randinstellingen voor uw visual.

Notitie

Zie De Power BI-visual van de React-cirkelkaart voor de volledige broncode van deze visual.

Vereisten

Controleer voordat u begint met het ontwikkelen van uw Power BI-visual of alles in deze sectie wordt vermeld.

Een PPU-account (Power BI Pro of Premium Per User). Als u er geen hebt, kunt u zich registreren voor een gratis proefversie.
Visual Studio Code (VS Code). VS Code is een ideale IDE (Integrated Development Environment) voor het ontwikkelen van JavaScript- en TypeScript-toepassingen.
Windows PowerShell versie 4 of hoger (voor Windows). Of Terminal (voor Mac).
Een omgeving die gereed is voor het ontwikkelen van een Power BI-visual. Stel uw omgeving in voor het ontwikkelen van een Power BI-visual.
In deze zelfstudie wordt gebruikgemaakt van het rapport Us Sales Analysis . U kunt dit rapport downloaden en uploaden naar Power BI-service of uw eigen rapport gebruiken. Als u meer informatie nodig hebt over Power BI-service en bestanden uploadt, raadpleegt u de zelfstudie Aan de slag met het maken van Power BI-service.

Een ontwikkelingsproject maken

In deze sectie maakt u een project voor de visual van de React-cirkelkaart.

Open PowerShell en navigeer naar de map waarin u uw project wilt maken.
Voer de volgende opdracht in:
```
pbiviz new ReactCircleCard
```
Navigeer naar de map van het project.
```
cd ReactCircleCard
```
Start de React-cirkelkaartvisual. Uw visual wordt nu uitgevoerd terwijl deze wordt gehost op uw computer.
```
pbiviz start
```
Belangrijk

Als u wilt voorkomen dat de visual wordt uitgevoerd, voert u in PowerShell Ctrl+C in en als u wordt gevraagd om de batchtaak te beëindigen, voert u Y in en drukt u op Enter.

Bekijk de React-cirkelkaart in de Power BI-service

Als u de visual in Power BI-service wilt testen, gebruiken we het rapport Us Sales Analysis. U kunt dit rapport downloaden en uploaden naar Power BI-service.

U kunt ook uw eigen rapport gebruiken om de visual te testen.

Notitie

Controleer voordat u doorgaat of u de ontwikkelaarsmodus voor visuals hebt ingeschakeld.

Meld u aan bij PowerBI.com en open het rapport Verkoopanalyse in de VERENIGDE STATEN.
Selecteer Bewerken.
Maak een nieuwe pagina om te testen door te klikken op de knop Nieuwe pagina onderaan de Power BI-service interface.
Selecteer in het deelvenster Visualisaties de visual Voor ontwikkelaars.

Deze visual vertegenwoordigt de aangepaste visual die u op uw computer uitvoert. Deze is alleen beschikbaar wanneer de instelling voor foutopsporing van aangepaste visuals is ingeschakeld.
Controleer of er een visual is toegevoegd aan het rapportcanvas.

Dit is een eenvoudige visual die het aantal keren weergeeft dat de updatemethode is aangeroepen. In deze fase haalt de visual geen gegevens op.

Notitie

Als in de visual een verbindingsfout wordt weergegeven, opent u een nieuw tabblad in uw browser, gaat u naar https://localhost:8080/assetsen autoriseert u uw browser om dit adres te gebruiken.
Terwijl de nieuwe visual is geselecteerd, gaat u naar het deelvenster Gegevens, vouwt u Verkoop uit en selecteert u Hoeveelheid.
Als u wilt testen hoe de visual reageert, wijzigt u het formaat ervan en ziet u dat de waarde voor het aantal updates steeds wordt verhoogd wanneer u het formaat van de visual wijzigt.

React instellen in uw project

In deze sectie leert u hoe u React instelt voor uw Power BI-visualproject.

Open PowerShell en stop de uitvoering van de visual door Ctrl+C in te voeren. Als u wordt gevraagd de batchtaak te beëindigen, voert u Y in en drukt u op Enter.

React installeren

Als u de vereiste React-afhankelijkheden wilt installeren, opent u PowerShell in de map ReactCircleCard en voert u de volgende opdracht uit:

npm i react react-dom

React-typedefinities installeren

Als u typedefinities voor React wilt installeren, opent u PowerShell in de map ReactCircleCard en voert u de volgende opdracht uit:

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

Een React-onderdeelklasse maken

Volg deze stappen om een React-onderdeelklasse te maken.

Open VS Code en navigeer naar de map reactCircleCard .
Maak een nieuw bestand door Bestand>selecteren.

Kopieer de volgende code naar het nieuwe bestand.

import * as React from "react";

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

export default ReactCircleCard;

Selecteer Opslaan als en navigeer naar de src-map .
Sla het bestand als volgt op:
- Voer het onderdeel in het veld Bestandsnaam in.
- Selecteer TypeScript React in de vervolgkeuzelijst Opslaan als.

React toevoegen aan het visualbestand

Vervang de code in het visual.ts-bestand door code waarmee React kan worden gebruikt.

Open visual.ts in de src-map en vervang de code in het bestand door de volgende code:

"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) {

    }
}

Notitie

Omdat de standaardinstellingen van Power BI TypeScript geen React tsx-bestanden herkennen, markeert component VS Code als een fout.

Als u het onderdeel wilt weergeven, voegt u het HTML-doelelement toe aan visual.ts. Dit element bevindt zich HTMLElement in VisualConstructorOptions, dat wordt doorgegeven aan de constructor.

Open visual.ts in de src-map.
Voeg de volgende code toe aan de klasse Visual:

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

Voeg de volgende regels toe aan de VisualConstructorOptions constructor:

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

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

Uw visual.ts-bestand moet er nu als volgt uitzien:

"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) {

    }
}

Sla visual.ts op.

Het tsconfig-bestand bewerken

Bewerk de tsconfig.json om met React te werken.

Open tsconfig.json in de map ReactCircleCard en voeg twee regels toe aan het begin van het compilerOptions item.

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

Uw tsconfig.json-bestand moet er nu als volgt uitzien en de component fout in visual.ts moet verdwenen zijn.

{
    "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"
    ]
}

Sla tsconfig.json op.

Uw visual testen

Open PowerShell in de map CircleCardVisual en voer uw project uit:

pbiviz start

Wanneer u een nieuwe Developer Visual toevoegt aan uw rapport in de Power BI-service, ziet dit er als volgt uit:

Schermopname van het hello React-bericht in de zojuist gemaakte visual voor ontwikkelaars in de Power BI-service.

Het gegevensveld van uw visual configureren

Configureer het mogelijkhedenbestand van uw visual, zodat slechts één gegevensveld kan worden verzonden naar het gegevensveld Meting van de visual.

Open in VS Code vanuit de map ReactCircleCard capabilities.json.
De ReactCircleCard weergave van één waarde, Measure Data. Verwijder het Category Data object uit dataRoles.

Nadat u het Category Data object hebt verwijderd, ziet de dataRoles sleutel er als volgt uit:
```
"dataRoles": [
    {
        "displayName": "Measure Data",
        "name": "measure",
        "kind": "Measure"
    }
],
```
Verwijder alle inhoud van de sleutel (u vult deze objects later in).

Nadat u de inhoud ervan hebt verwijderd, ziet de objects sleutel er als volgt uit:
```
"objects": {},
```

Vervang de dataViewMappings eigenschap door de volgende code. max: 1geeft aan measure dat slechts één gegevensveld kan worden verzonden naar het gegevensveld Meting van de visual.

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

Sla de wijzigingen op die u hebt aangebracht in capabilities.json.
pbiviz start Controleer of deze wordt uitgevoerd en vernieuw uw React Circle Card-visual in Power BI-service. Het gegevensveld Meting kan slechts één gegevensveld accepteren, zoals opgegeven door max: 1.

De stijl van de visual bijwerken

In deze sectie zet u de vorm van de visual om in een cirkel. Gebruik het bestand visual.less om de stijl van uw visual te beheren.

Open visual.less in de stijlmap.

Vervang de inhoud van visual.less door de volgende code.

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

Sla visual.less op.

Uw visual instellen op het ontvangen van eigenschappen van Power BI

In deze sectie configureert u de visual voor het ontvangen van gegevens van Power BI en verzendt u updates naar de exemplaren in het bestand component.tsx .

Gegevens weergeven met React

U kunt gegevens weergeven met React. Het onderdeel kan gegevens uit een eigen status weergeven.

Open in VS Code, vanuit de map reactCircleCard , component.tsx.

Vervang de inhoud van component.tsx door de volgende code.

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

Sla component.tsx op.

Uw visual instellen op het ontvangen van gegevens

Visuals ontvangen gegevens als argument van de update methode. In deze sectie werkt u deze methode bij om gegevens te ontvangen.

De volgende code selecteert textLabel en textValue van DataView, en als de gegevens bestaan, werkt u de status van het onderdeel bij.

Open in VS Code vanuit de map src visual.ts.
Vervang de regel import ReactCircleCard from "./component"; door de volgende code:
```
import { ReactCircleCard, initialState } from "./component";
```

Voeg de volgende code toe aan de methode update.

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

Maak een clear methode door de volgende code onder de update methode toe te voegen.
```
private clear() {
    ReactCircleCard.update(initialState);
}
```
Visual.ts opslaan

Uw visual instellen om gegevens te verzenden

In deze sectie werkt u de visual bij om updates te verzenden naar exemplaren in het onderdeelbestand .

Open in VS Code, vanuit de map src , component.tsx.

Voeg de volgende code toe aan de klasse ReactCircleCard:

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

Sla component.tsx op.

De wijzigingen in de visual weergeven

Test uw React Circle Card-visual om de wijzigingen weer te geven die u hebt aangebracht.

Controleer of deze pbiviz start wordt uitgevoerd en vernieuw uw React Circle Card-visual in de Power BI-service.
Voeg Verkoop toe aan het gegevensveld Meting van de visual.

Schermopname van de verkoopwaarde die wordt weergegeven in de visual react circle card in de Power BI-service.

Het formaat van uw visual aanpassen

Op dit moment heeft uw visual een vaste breedte en hoogte. Als u de visual groter wilt maken, moet u de size variabele definiëren in zowel de visual.ts- als component.tsx-bestanden . In deze sectie kunt u het formaat van de visual aanpassen.

Nadat u de stappen in deze sectie hebt voltooid, komt de cirkeldiameter in uw visual overeen met de minimale breedte of hoogtegrootte en kunt u de grootte ervan wijzigen in Power BI-service.

Het visual.ts-bestand configureren

De huidige grootte van de visual viewport ophalen uit het options object.

Open in VS Code vanuit de map src visual.ts.
Voeg deze code in om de IViewport interface te importeren.
```
import IViewport = powerbi.IViewport;
```
Voeg de viewport eigenschap toe aan de visual klasse.
```
private viewport: IViewport;
```

Voeg in de update methode, voordat ReactCircleCard.update, de volgende code toe.

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

Voeg in de update methode , in ReactCircleCard.update, toevoegen size.
```
size,
```
Sla visual.ts op.

Het bestand component.tsx configureren

Open in VS Code, vanuit de map src , component.tsx.
Voeg de volgende code toe aan export interface State.
```
size: number
```
Voeg de volgende code toe aan export const initialState: State.
```
size: 200
```
Breng in de render methode de volgende wijzigingen aan in de code:
1. Toevoegen size aan const { textLabel, textValue, size } = this.state;. Deze declaratie moet er nu als volgt uitzien:
```
const { textLabel, textValue, size } = this.state;
```
2. Voeg de volgende code hierboven returntoe.
```
const style: React.CSSProperties = { width: size, height: size };
```
3. Vervang de eerste door:
```
<div className="circleCard" style={style}>
```
Sla component.tsx op.

Het visualbestand configureren

Open visual.less in VS Code vanuit de stijlmap.
Vervang .circleCardin , vervang width en height door min-width en min-height.
```
min-width: 200px;
min-height: 200px;
```
Sla visual.less op.

Uw Power BI-visual aanpasbaar maken

In deze sectie voegt u de mogelijkheid toe om uw visual aan te passen, zodat gebruikers de kleur en randdikte kunnen wijzigen.

Kleur en dikte toevoegen aan het bestand met mogelijkheden

Voeg de kleur en randdikte toe aan de object eigenschap in capabilities.json.

Open in VS Code vanuit de map reactCircleCard capabilities.json.

Voeg de volgende instellingen toe aan de objects eigenschap.

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

Sla capabilities.json op.

Een klasse instellingen voor cirkelopmaak toevoegen aan het instellingenbestand

Voeg de Circle opmaakinstellingen toe aan settings.ts. Zie opmaakhulpmiddelen voor meer informatie over het maken van opmaakmodelinstellingen.

Open in VS Code vanuit de map src settings.ts.

Vervang de code in settings.ts door de volgende code:

"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];
}

Sla settings.ts op.

Een methode toevoegen om visuele instellingen toe te passen

Voeg de methode toe die wordt gebruikt voor het getFormattingModel toepassen van visuele instellingen en vereiste importbewerkingen op het visual.ts-bestand .

Open in VS Code vanuit de map src visual.ts.

Voeg deze import instructies toe boven aan visual.ts.

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

Voeg de volgende declaratie toe aan Visual.

private formattingSettings: VisualFormattingSettingsModel;
private formattingSettingsService: FormattingSettingsService;

Voeg de getFormattingModel methode toe aan Visual.

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

Voeg in de Visual klasse de volgende coderegel toe om constructor te initialiseren formattingSettingsService
```
    this.formattingSettingsService = new FormattingSettingsService();
```

Voeg in de Visual klasse de volgende code toe om de instellingen voor visuele opmaak bij te update werken naar de meest recente waarden voor opmaakeigenschappen.

Voeg deze code toe aan de if-instructie na const size = Math.min(width, height);.

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

Voeg deze code toe aan ReactCircleCard.update na size:

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

Sla visual.ts op.

Het onderdeelbestand bewerken

Bewerk het onderdeelbestand zodat de wijzigingen in de kleur en randdikte van de visual kunnen worden weergegeven.

Open in VS Code, vanuit de map src , component.tsx.

Voeg deze waarden toe aan State:

background?: string,
borderWidth?: number

Vervang in de render methode de volgende coderegels:
1. const { textLabel, textValue, size } = this.state; met:
```
const { textLabel, textValue, size, background, borderWidth } = this.state;
```
2. const style: React.CSSProperties = { width: size, height: size }; met:
```
const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
```
Sla component.tsx op.

Controleer uw wijzigingen

Experimenteer met de kleur en randdikte van de visual, die u nu kunt beheren.

Controleer of deze pbiviz start wordt uitgevoerd en vernieuw uw React Circle Card-visual in de Power BI-service.
Selecteer het tabblad Opmaak en vouw Cirkel uit.
Pas de instellingen voor kleur en dikte van de visual aan en controleer het effect ervan op de visual.

Een schermopname van de visual van de react-cirkelkaart in de Power BI-service, met de opties voor kleur- en randdikte.

Feedback

Is deze pagina nuttig?

Last updated on 2025-12-15

Delen via

Zelfstudie: Een Power BI-visual maken met React

Vereisten

Een ontwikkelingsproject maken

Bekijk de React-cirkelkaart in de Power BI-service

React instellen in uw project

React installeren

React-typedefinities installeren

Een React-onderdeelklasse maken

React toevoegen aan het visualbestand

Het tsconfig-bestand bewerken

Uw visual testen

Het gegevensveld van uw visual configureren

De stijl van de visual bijwerken

Uw visual instellen op het ontvangen van eigenschappen van Power BI

Gegevens weergeven met React

Uw visual instellen op het ontvangen van gegevens

Uw visual instellen om gegevens te verzenden

De wijzigingen in de visual weergeven

Het formaat van uw visual aanpassen

Het visual.ts-bestand configureren

Het bestand component.tsx configureren

Het visualbestand configureren

Uw Power BI-visual aanpasbaar maken

Kleur en dikte toevoegen aan het bestand met mogelijkheden

Een klasse instellingen voor cirkelopmaak toevoegen aan het instellingenbestand

Een methode toevoegen om visuele instellingen toe te passen

Het onderdeelbestand bewerken

Controleer uw wijzigingen

Gerelateerde inhoud

Feedback

Aanvullende resources