Selvstudium: Opret en Power BI-visualisering ved hjælp af React

Som udvikler kan du oprette dine egne Power BI-visualiseringer. Disse visualiseringer kan bruges af dig, din organisation eller tredjeparter.

I dette selvstudium udvikler du en Power BI-visualisering ved hjælp af React. Visualiseringen viser en formateret målingsværdi i en cirkel. Visualiseringen har tilpasset størrelse og giver dig mulighed for at tilpasse indstillingerne.

I dette selvstudium lærer du, hvordan du kan:

• Opret et udviklingsprojekt til din visualisering.
• Udvikl din visualisering ved hjælp af React.
• Konfigurer din visualisering til at behandle data.
• Konfigurer din visualisering for at tilpasse sig størrelsesændringer.
• Konfigurer indstillinger for tilpasset farve og kant for din visualisering.

Bemærk

Du kan finde hele kildekoden for denne visualisering i React-cirkelkort i Power BI-visualiseringen.

Forudsætninger

Før du begynder at udvikle din Power BI-visualisering, skal du kontrollere, at du har alt angivet i dette afsnit.

• En Power BI Pro - eller Premium pr. bruger-konto . Hvis du ikke har en, kan du tilmelde dig en gratis prøveversion.

• Visual Studio Code (VS Code). VS Code er et ideelt IDE (Integrated Development Environment) til udvikling af JavaScript- og TypeScript-programmer.

• Windows PowerShell version 4 eller nyere (til Windows). Eller Terminal (til Mac).

• Et miljø, der er klar til at udvikle en Power BI-visualisering. Konfigurer dit miljø til udvikling af en Power BI-visualisering.

• I dette selvstudium bruges US Sales Analysis-rapporten . Du kan downloade denne rapport og uploade den til Power BI-tjeneste eller bruge din egen rapport. Hvis du har brug for flere oplysninger om Power BI-tjeneste og upload af filer, skal du se Selvstudiet Kom i gang med at oprette i Power BI-tjeneste selvstudium.

Opret et udviklingsprojekt

I dette afsnit skal du oprette et projekt for visualiseringen React-cirkelkort.

1. Åbn PowerShell, og naviger til den mappe, du vil oprette projektet i.

2. Angiv følgende kommando:

   pbiviz new ReactCircleCard
   

3. Gå til projektets mappe.

   cd ReactCircleCard
   

4. Start visualiseringen React-cirkelkort. Din visualisering kører nu, mens den hostes på computeren.

   pbiviz start
   

   Vigtigt

   Hvis du vil forhindre, at visualiseringen kører, skal du i PowerShell angive Ctrl+C, og hvis du bliver bedt om at afslutte batchjobbet, skal du skrive Y og trykke på Enter.

Få vist React-cirkelkortet i Power BI-tjeneste

Hvis du vil teste visualiseringen i Power BI-tjeneste, bruger vi rapporten Salgsanalyse i USA. Du kan downloade denne rapport og uploade den til Power BI-tjeneste.

Du kan også bruge din egen rapport til at teste visualiseringen.

Bemærk

Før du fortsætter, skal du bekræfte, at du har aktiveret udviklertilstanden for visualiseringer.

1. Log på PowerBI.com, og åbn rapporten US Sales Analysis.

2. Vælg Rediger.

   

3. Opret en ny side til test ved at klikke på knappen Ny side nederst i grænsefladen Power BI-tjeneste.

   

4. Vælg udviklervisualiseringen i ruden Visualiseringer.

   

   Denne visualisering repræsenterer den brugerdefinerede visualisering, du kører på din computer. Den er kun tilgængelig, når indstillingen til fejlfinding af brugerdefinerede visualiseringer er aktiveret.

5. Kontrollér, at der er føjet en visualisering til rapportlærredet.

   

   Dette er en simpel visualisering, der viser det antal gange, opdateringsmetoden er blevet kaldt. I denne fase henter visualiseringen ingen data.

   Bemærk

   Hvis der vises en forbindelsesfejlmeddelelse i visualiseringen, skal du åbne en ny fane i browseren, navigere til https://localhost:8080/assetsog give browseren tilladelse til at bruge denne adresse.

   

6. Mens den nye visualisering er valgt, skal du gå til ruden Data , udvide Sales og vælge Quantity.

   

7. Hvis du vil teste, hvordan visualiseringen reagerer, skal du tilpasse størrelsen på den og bemærke, at værdien For opdateringsantal øges, hver gang du tilpasser størrelsen på visualiseringen.

   

Konfigurer React i dit projekt

I dette afsnit får du mere at vide om, hvordan du konfigurerer React for dit Power BI-visualprojekt.

Åbn PowerShell, og stop kørslen af visualiseringen ved at angive Ctrl+C. Hvis du bliver bedt om at afslutte batchjobbet, skal du angive Y og trykke på Enter.

Installér React

Hvis du vil installere de påkrævede React-afhængigheder, skal du åbne PowerShell i mappen ReactCircleCard og køre følgende kommando:

npm i react react-dom

Installér React-typedefinitioner

Hvis du vil installere typedefinitioner til React, skal du åbne PowerShell i mappen reactCircleCard og køre følgende kommando:

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

Opret en React-komponentklasse

Følg disse trin for at oprette en React-komponentklasse.

1. Åbn VS Code, og naviger til mappen reactCircleCard .

2. Opret en ny fil ved at vælge Filer>Ny fil.

3. Kopiér følgende kode til den nye fil.

   import * as React from "react";
   
   export class ReactCircleCard extends React.Component<{}>{
       render(){
           return (
               <div className="circleCard">
                   Hello, React!
               </div>
           )
       }
   }
   
   export default ReactCircleCard;
   

4. Vælg Gem som , og naviger til mappen src .

5. Gem filen på følgende måde:

   • Angiv komponenten i feltet Filnavn.
   • Vælg TypeScript React i rullemenuen Gem som type.

Føj React til visualiseringsfilen

Erstat koden i visual.ts-filen med kode, der gør det muligt at bruge React.

1. Åbn visual.ts i mappen src, og erstat 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) {
   
       }
   }
   

   Bemærk

   Som standardindstillinger for Power BI TypeScript genkender ikke React tsx-filer , fremhæves component VS Code som en fejl.

2. Hvis du vil gengive komponenten, skal du føje destinations-HTML-elementet til visual.ts. Dette element er HTMLElement i VisualConstructorOptions, som overføres til konstruktøren.

   1. Åbn visual.ts i mappen src.

   2. Føj følgende kode til Visual klassen:

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

   3. Føj følgende linjer til konstruktøren VisualConstructorOptions :

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

   Din visual.ts-fil bør nu se sådan ud:

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

3. Gem visual.ts.

Rediger tsconfig-filen

Rediger tsconfig.json for at arbejde med React.

1. Åbn tsconfig.json i mappen reactCircleCard, og føj to linjer til starten af elementetcompilerOptions.

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

   Din tsconfig.json-fil bør nu se sådan ud, og component fejlen i visual.ts bør være væk.

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

2. Gem tsconfig.json.

Test din visualisering

Åbn PowerShell i mappen CircleCardVisual , og kør dit projekt:

pbiviz start

Når du føjer en ny udviklervisualisering til din rapport i Power BI-tjeneste, ser det sådan ud:

Konfigurer dit visuals datafelt

Konfigurer filen med egenskaber for visualiseringen, så der kun kan sendes ét datafelt til visualiseringens målingsdatafelt .

1. Åbn capabilities.json fra mappen reactCircleCard i VS Code.

2. viser ReactCircleCard en enkelt værdi, Measure Data. Fjern objektet Category Data fra dataRoles.

   Når du har fjernet objektet Category Data , dataRoles ser nøglen sådan ud:

   "dataRoles": [
       {
           "displayName": "Measure Data",
           "name": "measure",
           "kind": "Measure"
       }
   ],
   

3. Fjern alt indholdet af objects nøglen (du skal udfylde det senere).

   Når du har fjernet indholdet, objects ser nøglen sådan ud:

   "objects": {},
   

4. Erstat egenskaben dataViewMappings med følgende kode. max: 1 i measure angiver, at der kun kan sendes ét datafelt til visualiseringens målingsdatafelt .

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

5. Gem de ændringer, du har foretaget af capabilities.json.

6. Kontrollér, at kører, pbiviz start og opdater visualiseringen React Circle Card i Power BI-tjeneste. Datafeltet Måling kan kun acceptere ét datafelt, som angivet af max: 1.

   

Opdater visualiseringens typografi

I dette afsnit kan du omdanne visualiseringens figur til en cirkel. Brug filen visual.less til at styre typografien for din visualisering.

1. Åbn visual.less fra typografimappen.

2. Erstat indholdet af visual.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;
   }
   

3. Gem visual.less.

Indstil din visualisering til at modtage egenskaber fra Power BI

I dette afsnit skal du konfigurere visualiseringen til at modtage data fra Power BI og sende opdateringer til forekomsterne i filen component.tsx .

Gengiv data ved hjælp af React

Du kan gengive data ved hjælp af React. Komponenten kan vise data fra sin egen tilstand.

1. Åbn component.tsx fra mappen reactCircleCard i VS Code.

2. Erstat indholdet af 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>
           )
       }
   }
   

3. Gem component.tsx.

Indstil din visualisering til at modtage data

Visualiseringer modtager data som et argument for update metoden. I dette afsnit skal du opdatere denne metode for at modtage data.

Følgende kode vælger og textLabel fra textValue, og hvis dataene findes, opdateres DataView komponenttilstanden.

1. Åbn visual.ts fra mappen src i VS Code.

2. Erstat linjen import ReactCircleCard from "./component"; med følgende kode:

   import { ReactCircleCard, initialState } from "./component";
   

3. Føj følgende kode til 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();
   }
   

4. Opret en clear metode ved at tilføje følgende kode under metoden update .

   private clear() {
       ReactCircleCard.update(initialState);
   }
   

5. Gem visual.ts

Indstil din visualisering til at sende data

I dette afsnit skal du opdatere visualiseringen for at sende opdateringer til forekomster i komponentfilen .

1. Åbn component.tsx fra mappen src i VS Code.

2. Føj følgende kode til 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;
   }
   

3. Gem component.tsx.

Få vist ændringerne i visualiseringen

Test din React Circle Card-visualisering for at få vist de ændringer, du har foretaget.

1. Kontrollér, at pbiviz start kører, og opdater visualiseringen React Circle Card i Power BI-tjeneste.

2. Føj Sales til visualiseringens datafelt Måling.

Gør det muligt at ændre størrelsen på din visualisering

Din visualisering har i øjeblikket fast bredde og højde. Hvis du vil gøre det muligt at ændre størrelsen på visualiseringen, skal du definere variablen size i både filerne visual.ts og component.tsx . I dette afsnit skal du gøre det muligt at ændre størrelsen på visualiseringen.

Når du har fuldført de trin, der er beskrevet i dette afsnit, svarer cirkeldiameteren i din visualisering til den minimale bredde eller højdestørrelse, og du kan tilpasse størrelsen på den i Power BI-tjeneste.

Konfigurer filen visual.ts

Hent den aktuelle størrelse af visualiseringens visningsport fra objektet options .

1. Åbn visual.ts fra mappen src i VS Code.

2. Indsæt denne kode for at importere grænsefladen IViewport .

   import IViewport = powerbi.IViewport;
   

3. Føj egenskaben viewport til visual klassen.

   private viewport: IViewport;
   

4. update Tilføj følgende kode i metoden før ReactCircleCard.update.

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

5. update Tilføj i metoden i ReactCircleCard.updatesize.

   size,
   

6. Gem visual.ts.

Konfigurer filen component.tsx

1. Åbn component.tsx fra mappen src i VS Code.

2. Føj følgende kode til export interface State.

   size: number
   

3. Føj følgende kode til export const initialState: State.

   size: 200
   

4. render Foretag følgende ændringer af koden i metoden :

   1. Føj size til const { textLabel, textValue, size } = this.state;. Denne erklæring bør nu se sådan ud:

      const { textLabel, textValue, size } = this.state;
      

   2. Tilføj følgende kode ovenfor return.

      const style: React.CSSProperties = { width: size, height: size };
      

   3. Erstat den første returlinje<div className="circleCard"> med:

      <div className="circleCard" style={style}>
      

5. Gem component.tsx.

Konfigurer visualiseringsfilen

1. Åbn visual.less fra typografimappeni VS Code.

2. I .circleCardskal du erstatte width og height med min-width og min-height.

   min-width: 200px;
   min-height: 200px;
   

3. Gem visual.less.

Gør din Power BI-visualisering tilpasset

I dette afsnit tilføjer du muligheden for at tilpasse din visualisering, så brugerne kan foretage ændringer af dens farve og kanttykkelse.

Føj farve og tykkelse til kapacitetsfilen

Føj farven og kanttykkelsen til egenskaben object i capabilities.json.

1. Åbn capabilities.json fra mappen reactCircleCard i VS Code.

2. Føj følgende indstillinger til egenskaben objects .

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

3. Gem capabilities.json.

Føj en cirkelformateringsindstillingsklasse til indstillingsfilen

Føj formateringsindstillingerne Circle til settings.ts. Du kan få flere oplysninger om, hvordan du opretter indstillinger for formateringsmodel, under Formateringshjælpeprogrammer.

1. Åbn settings.ts fra mappen src i VS Code.

2. Erstat 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];
   }
   

3. Gem settings.ts.

Tilføj en metode for at anvende visuelle indstillinger

Tilføj den metode, getFormattingModel der bruges til at anvende visuelle indstillinger og påkrævede import til filen visual.ts .

1. Åbn visual.ts fra mappen src i VS Code.

2. Tilføj disse import sætninger øverst i visual.ts.

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

3. Føj følgende erklæring til Visual.

   private formattingSettings: VisualFormattingSettingsModel;
   private formattingSettingsService: FormattingSettingsService;
   

4. Føj metoden getFormattingModel til Visual.

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

5. Visual I klassen skal du tilføje følgende kodelinje for at constructor initialisereformattingSettingsService

       this.formattingSettingsService = new FormattingSettingsService();
   
   

6. Visual I klassen skal du tilføje følgende kode for at update opdatere formateringsindstillingerne for visualiseringen til de seneste formateringsegenskaber.

   1. Føj denne kode til if-sætningen efter const size = Math.min(width, height);.

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

   2. Føj denne kode til ReactCircleCard.update efter size:

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

7. Gem visual.ts.

Rediger komponentfilen

Rediger komponentfilen, så den kan gengive ændringerne i visualiseringens farve og kanttykkelse.

1. Åbn component.tsx fra mappen src i VS Code.

2. Føj disse værdier til State:

   background?: string,
   borderWidth?: number
   

3. render Erstat følgende kodelinjer i metoden :

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

4. Gem component.tsx.

Gennemgå dine ændringer

Eksperimentér med visualiseringens farve og kanttykkelse, som du nu kan styre.

1. Kontrollér, at pbiviz start kører, og opdater visualiseringen React Circle Card i Power BI-tjeneste.

2. Vælg fanen Formatér, og udvid Cirkel.

3. Juster indstillingerne farve og tykkelse for visualiseringen, og gennemse deres effekt på visualiseringen.

Relateret indhold

• Føj formateringsindstillinger til cirkelkortvisualiseringen
• Opret en visualisering med et liggende søjlediagram i Power BI
• Få mere at vide om, hvordan du foretager fejlfinding af en Power BI-visualisering, du har oprettet