Opplæring: Opprette et Power BI-visualobjekt ved hjelp av React

Artikkel
10/12/2024

Som utvikler kan du opprette dine egne Power BI-visualobjekter. Disse visualobjektene kan brukes av deg, organisasjonen eller tredjeparter.

I denne opplæringen utvikler du et Power BI-visualobjekt ved hjelp av React. Visualobjektet viser en formatert målverdi i en sirkel. Visualobjektet har adaptiv størrelse og lar deg tilpasse innstillingene.

I denne opplæringen lærer du hvordan du kan gjøre følgende:

Opprett et utviklingsprosjekt for visualobjektet.
Utvikle visualobjektet ved hjelp av React.
Konfigurer visualobjektet til å behandle data.
Konfigurer visualobjektet til å tilpasse seg størrelsesendringer.
Konfigurer innstillinger for adaptiv farge og kantlinje for visualobjektet.

Merk

Hvis du vil ha den fullstendige kildekoden for dette visualobjektet, kan du se React-sirkelkortets Power BI-visualobjekt.

Forutsetning

Før du begynner å utvikle Power BI-visualobjektet, må du kontrollere at du har alt oppført i denne delen.

En Power BI Pro - eller Premium-konto per bruker (PPU ). Hvis du ikke har en, kan du registrere deg for en gratis prøveversjon.
Visual Studio Code (VS Code). VS Code er et ideelt integrert utviklingsmiljø (IDE) for utvikling av JavaScript- og TypeScript-programmer.
Windows PowerShell versjon 4 eller nyere (for Windows). Eller Terminal (for Mac).
Et miljø som er klart for utvikling av et Power BI-visualobjekt. Konfigurer miljøet ditt for utvikling av et Power BI-visualobjekt.
Denne opplæringen bruker den amerikanske salgsanalyserapporten . Du kan laste ned denne rapporten og laste den opp til Power Bi-tjeneste, eller bruke din egen rapport. Hvis du trenger mer informasjon om Power Bi-tjeneste og opplasting av filer, kan du se komme i gang med å opprette i Power Bi-tjeneste opplæringen.

Opprette et utviklingsprosjekt

I denne delen oppretter du et prosjekt for React-sirkelkortvisualobjektet.

Åpne PowerShell, og gå til mappen du vil opprette prosjektet i.
Skriv inn følgende kommando:
```
pbiviz new ReactCircleCard
```
Gå til prosjektets mappe.
```
cd ReactCircleCard
```
Start sirkelkortvisualobjektet React. Visualobjektet kjører nå mens det driftes på datamaskinen.
```
pbiviz start
```
Viktig

Hvis du vil hindre at visualobjektet kjører, skriver du inn CTRL+C i PowerShell, og hvis du blir bedt om å avslutte den satsvise jobben, skriver du inn Y og trykker ENTER.

Vise React-sirkelkortet i Power Bi-tjeneste

Hvis du vil teste visualobjektet i Power Bi-tjeneste, bruker vi den amerikanske salgsanalyserapporten. Du kan laste ned denne rapporten og laste den opp til Power Bi-tjeneste.

Du kan også bruke din egen rapport til å teste visualobjektet.

Merk

Før du fortsetter, må du kontrollere at du har aktivert utviklermodus for visualobjekter.

Logg på PowerBI.com , og åpne den amerikanske salgsanalyserapporten .
Velg Rediger.
Opprett en ny side for testing ved å klikke på Ny side-knappen nederst i Power Bi-tjeneste-grensesnittet.
Velg Visualobjekt for utviklere i Visualiseringer-ruten.

Dette visualobjektet representerer det egendefinerte visualobjektet du kjører på datamaskinen. Den er bare tilgjengelig når innstillingen for feilsøking av egendefinerte visualobjekter er aktivert.
Kontroller at et visualobjekt ble lagt til i rapportlerretet.

Dette er et enkelt visualobjekt som viser antall ganger oppdateringsmetoden har blitt kalt. På dette stadiet henter ikke visualobjektet noen data.

Merk

Hvis visualobjektet viser en feilmelding om tilkobling, åpner du en ny fane i nettleseren, navigerer til https://localhost:8080/assetsog gir nettleseren tillatelse til å bruke denne adressen.
Når det nye visualobjektet er valgt, går du til Data-ruten , utvider Salg og velger Antall.
Hvis du vil teste hvordan visualobjektet reagerer, endrer du størrelsen på det og legger merke til at oppdateringsverdien øker hver gang du endrer størrelsen på visualobjektet.

Konfigurere React i prosjektet

I denne delen lærer du hvordan du konfigurerer React for power bi-visualobjektprosjektet.

Åpne PowerShell, og stopp visualobjektet fra å kjøre ved å skrive inn CTRL+C. Hvis du blir bedt om å avslutte den satsvise jobben, skriver du inn Y og trykker enter.

Installer React

Hvis du vil installere de nødvendige React-avhengighetene, åpner du PowerShell i ReactCircleCard-mappen og kjører følgende kommando:

npm i react react-dom

Installer React-typedefinisjoner

Hvis du vil installere typedefinisjoner for React, åpner du PowerShell i reactCircleCard-mappen og kjører følgende kommando:

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

Opprette en React-komponentklasse

Følg disse trinnene for å opprette en React-komponentklasse.

Åpne VS Code , og gå til reactCircleCard-mappen .
Opprett en ny fil ved å velge Fil ny>fil.

Kopier følgende kode til den nye filen.

import * as React from "react";

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

export default ReactCircleCard;

Velg Lagre som, og gå til src-mappen.
Lagre filen på følgende måte:
- Skriv inn komponenten i Filnavn-feltet.
- Velg TypeScript React fra rullegardinmenyen Filtype.

Legg til React i visualobjektfilen

Erstatt koden i visual.ts-filen med kode som aktiverer bruk av React.

Åpne visual.ts i src-mappen, og erstatt koden i filen med følgende kode:

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

    }
}

Merk

Som standardInnstillinger for Power BI TypeScript gjenkjenner ikke React tsx-filer , utheves component VS Code som en feil.

Hvis du vil gjengi komponenten, legger du til mål-HTML-elementet i visual.ts. Dette elementet er HTMLElement i VisualConstructorOptions, som sendes til konstruktøren.

Åpne visual.ts i src-mappen.
Legg til følgende kode i Visual klassen:

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

Legg til følgende linjer i konstruktøren VisualConstructorOptions :

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

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

Den visual.ts filen skal nå se slik ut:

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

    }
}

Lagre visual.ts.

Rediger tsconfig-filen

Rediger tsconfig.json for å arbeide med React.

Åpne tsconfig.json i reactCircleCard-mappen, og legg til to linjer i begynnelsen av compilerOptions elementet.

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

Den tsconfig.json filen skal nå se slik ut, og component feilen i visual.ts bør være borte.

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

Lagre tsconfig.json.

Test visualobjektet

Åpne PowerShell i CircleCardVisual-mappen , og kjør prosjektet:

pbiviz start

Når du legger til et nytt visualobjekt for utviklere i rapporten i Power Bi-tjeneste, ser det slik ut:

Skjermbilde som viser hello React-meldingen i det nyopprettede utviklervisualobjektet i Power B I-tjenesten.

Konfigurer datafeltet for visualobjektet

Konfigurer funksjonalitetsfilen for visualobjektet slik at bare ett datafelt kan sendes til datafeltet mål for visualobjektet.

Åpne capabilities.json fra reactCircleCard-mappen i VS Code.
Viser ReactCircleCard én enkelt verdi. Measure Data Category Data Fjern objektet fra dataRoles.

Når du har Category Data fjernet objektet, dataRoles ser nøkkelen slik ut:
```
"dataRoles": [
    {
        "displayName": "Measure Data",
        "name": "measure",
        "kind": "Measure"
    }
],
```
Fjern alt innholdet objects i nøkkelen (du fyller den ut senere).

Når du har fjernet innholdet, objects ser nøkkelen slik ut:
```
"objects": {},
```

dataViewMappings Erstatt egenskapen med følgende kode. max: 1i measure angir at bare ett datafelt kan sendes til datafeltet mål for visualobjektet.

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

Lagre endringene du har gjort i capabilities.json.
Kontroller at kjører pbiviz start og i Power Bi-tjeneste oppdatere React Circle Card-visualobjektet. Mål-datafeltet kan bare godta ett datafelt, som angitt av max: 1.

Oppdater stilen til visualobjektet

I denne delen gjør du visualobjektets figur om til en sirkel. Bruk visualobjektet.less-filen til å kontrollere stilen på visualobjektet.

Åpne visualobjektet fra stilmappen.

Erstatt innholdet i visualobjektet.less med følgende kode.

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

Lagre visualobjekt.less.

Angi at visualobjektet skal motta egenskaper fra Power BI

I denne delen konfigurerer du visualobjektet til å motta data fra Power BI, og sender oppdateringer til forekomstene i component.tsx-filen .

Gjengi data ved hjelp av React

Du kan gjengi data ved hjelp av React. Komponenten kan vise data fra sin egen tilstand.

Åpne component.tsx fra reactCircleCard-mappen i VS Code.

Erstatt innholdet i component.tsx med følgende kode.

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

Lagre component.tsx.

Angi at visualobjektet skal motta data

Visualobjekter mottar data som et argument for update metoden. I denne delen oppdaterer du denne metoden for å motta data.

Følgende kode velger textLabel og textValue fra DataView, og hvis dataene finnes, oppdateres komponenttilstanden.

Åpne visual.ts fra src-mappen i VS Code.
Erstatt linjen import ReactCircleCard from "./component"; med følgende kode:
```
import { ReactCircleCard, initialState } from "./component";
```

Legg til følgende kode i update metoden.

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

Opprett en clear metode ved å legge til følgende kode under update metoden.
```
private clear() {
    ReactCircleCard.update(initialState);
}
```
Lagre visual.ts

Angi at visualobjektet skal sende data

I denne delen oppdaterer du visualobjektet for å sende oppdateringer til forekomster i komponentfilen .

Åpne component.tsx fra SRC-mappen i VS Code.

Legg til følgende kode i ReactCircleCard klassen:

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

Lagre component.tsx.

Vise endringene i visualobjektet

Test React Circle Card-visualobjektet for å vise endringene du har gjort.

Kontroller at kjørerpbiviz start, og oppdater React Circle Card-visualobjektet i Power Bi-tjeneste.
Legg til salg i datafeltet Mål for visualobjektet.

Skjermbilde av salgsverdien som vises i visualobjektet for react-sirkelkortet i Power Bi-tjeneste.

Gjør visualobjektet til å endre størrelsen

For øyeblikket har visualobjektet fast bredde og høyde. Hvis du vil gjøre visualobjektet betydelig, må du definere variabelen size i både visual.ts - og component.tsx-filer . I denne delen gjør du visualobjektet betydelig.

Når du har fullført trinnene som er beskrevet i denne delen, vil sirkeldiameteren i visualobjektet tilsvare den minimale bredden eller høydestørrelsen, og du kan endre størrelsen på den i Power Bi-tjeneste.

Konfigurere visual.ts-filen

Hent gjeldende størrelse på visualobjektvisningsporten fra options objektet.

Åpne visual.ts fra src-mappen i VS Code.
Sett inn denne koden for å importere grensesnittet IViewport .
```
import IViewport = powerbi.IViewport;
```
viewport Legg til egenskapen i visual klassen.
```
private viewport: IViewport;
```

update Før legger du til følgende kode i metodenReactCircleCard.update.

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

update Legg til sizei metoden i ReactCircleCard.update.
```
size,
```
Lagre visual.ts.

Konfigurer component.tsx-filen

Åpne component.tsx fra SRC-mappen i VS Code.
Legg til følgende kode i export interface State.
```
size: number
```
Legg til følgende kode i export const initialState: State.
```
size: 200
```
Gjør følgende endringer i koden i render metoden:
1. Legg size til const { textLabel, textValue, size } = this.state;i . Denne deklarasjonen skal nå se slik ut:
```
const { textLabel, textValue, size } = this.state;
```
2. Legg til følgende kode ovenfor return.
```
const style: React.CSSProperties = { width: size, height: size };
```
3. Erstatt den første returlinjen <div className="circleCard"> med:
```
<div className="circleCard" style={style}>
```
Lagre component.tsx.

Konfigurer visualobjektfilen

Åpne visualobjektet.less fra stilmappen i VS Code.
I .circleCard, erstatt width og height med min-width og min-height.
```
min-width: 200px;
min-height: 200px;
```
Lagre visualobjekt.less.

Gjør Power BI-visualobjektet tilpassbart

I denne delen legger du til muligheten til å tilpasse visualobjektet, slik at brukere kan gjøre endringer i farge- og kantlinjetykkelsen.

Legge til farge og tykkelse i egenskapsfilen

Legg til fargen og kantlinjetykkelsen object i egenskapen i capabilities.json.

Åpne capabilities.json fra reactCircleCard-mappen i VS Code.

Legg til følgende innstillinger for objects egenskapen.

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

Lagre capabilities.json.

Legge til en klasse for sirkelformateringsinnstillinger i innstillingsfilen

Circle Legg til formateringsinnstillingene i settings.ts. Hvis du vil ha mer informasjon om hvordan du bygger innstillinger for formateringsmodell, kan du se formateringsverktøy.

Åpne settings.ts fra SRC-mappen i VS Code.

Erstatt koden i settings.ts med følgende kode:

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

Lagre settings.ts.

Legge til en metode for å bruke visuelle innstillinger

getFormattingModel Legg til metoden som brukes til å bruke visuelle innstillinger og nødvendig import i visual.ts-filen.

Åpne visual.ts fra src-mappen i VS Code.

Legg til disse import setningene øverst i visual.ts.

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

Legg til følgende deklarasjon i Visualobjekt.

private formattingSettings: VisualFormattingSettingsModel;
private formattingSettingsService: FormattingSettingsService;

Legg til metoden i getFormattingModel Visualobjekt.

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

Visual Legg til følgende kodelinje i klassen for å constructor initialisereformattingSettingsService
```
    this.formattingSettingsService = new FormattingSettingsService();
```

Visual Legg til følgende kode i klassen for å update oppdatere innstillingene for visualobjektformatering til de nyeste verdiene for formateringsegenskaper.

Legg til denne koden i if-setningen etter const size = Math.min(width, height);.

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

Legg til denne koden ReactCircleCard.update etter size:

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

Lagre visual.ts.

Rediger komponentfilen

Rediger komponentfilen slik at den kan gjengi endringene i fargen og kantlinjetykkelsen for visualobjektet.

Åpne component.tsx fra SRC-mappen i VS Code.

Legg til disse verdiene i State:

background?: string,
borderWidth?: number

render I metoden erstatter du følgende kodelinjer:
1. const { textLabel, textValue, size } = this.state; med:
```
const { textLabel, textValue, size, background, borderWidth } = this.state;
```
2. const style: React.CSSProperties = { width: size, height: size }; med:
```
const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
```
Lagre component.tsx.

Gå gjennom endringene

Eksperimenter med fargen og kantlinjetykkelsen for visualobjektet, som du nå kan kontrollere.

Kontroller at kjørerpbiviz start, og oppdater React Circle Card-visualobjektet i Power Bi-tjeneste.
Velg Format-fanen, og utvid Sirkel.
Juster innstillingene for farge og tykkelse for visualobjektet, og se gjennom effekten på visualobjektet.

Et skjermbilde av visualobjektet react circle card i Power B I-tjenesten, som viser formatalternativene for farge- og kantlinjetykkelse.

Del via

Opplæring: Opprette et Power BI-visualobjekt ved hjelp av React

Forutsetning

Opprette et utviklingsprosjekt

Vise React-sirkelkortet i Power Bi-tjeneste

Konfigurere React i prosjektet

Installer React

Installer React-typedefinisjoner

Opprette en React-komponentklasse

Legg til React i visualobjektfilen

Rediger tsconfig-filen

Test visualobjektet

Konfigurer datafeltet for visualobjektet

Oppdater stilen til visualobjektet

Angi at visualobjektet skal motta egenskaper fra Power BI

Gjengi data ved hjelp av React

Angi at visualobjektet skal motta data

Angi at visualobjektet skal sende data

Vise endringene i visualobjektet

Gjør visualobjektet til å endre størrelsen

Konfigurere visual.ts-filen

Konfigurer component.tsx-filen

Konfigurer visualobjektfilen

Gjør Power BI-visualobjektet tilpassbart

Legge til farge og tykkelse i egenskapsfilen

Legge til en klasse for sirkelformateringsinnstillinger i innstillingsfilen

Legge til en metode for å bruke visuelle innstillinger

Rediger komponentfilen

Gå gjennom endringene

Tilbakemeldinger

Flere ressurser

Del via

Opplæring: Opprette et Power BI-visualobjekt ved hjelp av React

Forutsetning

Opprette et utviklingsprosjekt

Vise React-sirkelkortet i Power Bi-tjeneste

Konfigurere React i prosjektet

Installer React

Installer React-typedefinisjoner

Opprette en React-komponentklasse

Legg til React i visualobjektfilen

Rediger tsconfig-filen

Test visualobjektet

Konfigurer datafeltet for visualobjektet

Oppdater stilen til visualobjektet

Angi at visualobjektet skal motta egenskaper fra Power BI

Gjengi data ved hjelp av React

Angi at visualobjektet skal motta data

Angi at visualobjektet skal sende data

Vise endringene i visualobjektet

Gjør visualobjektet til å endre størrelsen

Konfigurere visual.ts-filen

Konfigurer component.tsx-filen

Konfigurer visualobjektfilen

Gjør Power BI-visualobjektet tilpassbart

Legge til farge og tykkelse i egenskapsfilen

Legge til en klasse for sirkelformateringsinnstillinger i innstillingsfilen

Legge til en metode for å bruke visuelle innstillinger

Rediger komponentfilen

Gå gjennom endringene

Relatert innhold

Tilbakemeldinger

Flere ressurser