Tutorial: Erstellen einer Power BI-Visualisierung mit ReactTutorial: Create a Power BI visual using React

Als Entwickler können Sie eigene Power BI-Visuals erstellen.As a developer you can create your own Power BI visuals. Diese Visuals können von Ihnen, Ihrer Organisation oder Dritten verwendet werden.These visuals can be used by you, your organization or by third parties.

In diesem Tutorial entwickeln Sie mithilfe von React ein Power BI-Visual.In this tutorial, you'll develop a Power BI visual using React. Das Visual zeigt einen formatierten Measurewert in einem Kreis an.The visual displays a formatted measure value inside a circle. Das Visual verfügt über eine adaptive Größe und ermöglicht Ihnen die Anpassung der Einstellungen.The visual has adaptive size and allows you to customize its settings.

In diesem Tutorial lernen Sie Folgendes:In this tutorial, you learn how to:

  • Erstellen eines Entwicklungsprojekts für das VisualCreate a development project for your visual.
  • Entwickeln des Visuals mithilfe von ReactDevelop your visual using React.
  • Konfigurieren des Visuals für die DatenverarbeitungConfigure your visual to process data.
  • Konfigurieren des Visuals für die Anpassung an GrößenänderungenConfigure your visual to adapt to size changes.
  • Konfigurieren adaptiver Einstellungen für die Farbe und den Rahmen des VisualsConfigure adaptive color and border settings for your visual.

Hinweis

Den vollständigen Quellcode dieses Visuals finden Sie unter Circle Card React Custom Visual.For the full source code of this visual, see React circle card Power BI visual.

VoraussetzungenPrerequisites

Vergewissern Sie sich, bevor Sie mit der Entwicklung eines Power BI-Visuals beginnen, dass alle in diesem Abschnitt aufgeführten Anforderungen erfüllt sind.Before you start developing your Power BI visual, verify that you have everything listed in this section.

Erstellen eines EntwicklungsprojektsCreate a development project

In diesem Abschnitt erstellen Sie ein Projekt für das kreisförmige React-Kartenvisual.In this section, you'll create a project for the React circle card visual.

  1. Öffnen Sie PowerShell, und navigieren Sie zu dem Ordner, in dem Sie das Projekt erstellen möchten.Open PowerShell and navigate to the folder you want to create your project in.

  2. Geben Sie den folgenden Befehl ein:Enter the following command:

    pbiviz new ReactCircleCard
    
  3. Navigieren Sie zum Projektordner.Navigate to the project's folder.

    cd ReactCircleCard
    
  4. Starten Sie das kreisförmige React-Kartenvisual.Start the React circle card visual. Ihr Visual wird nun ausgeführt und auf Ihrem Computer gehostet.Your visual is now running while being hosted on your computer.

    pbiviz start
    

    Wichtig

    Um die Ausführung des Visuals abzubrechen, drücken Sie in PowerShell STRG+C. Wenn Sie aufgefordert werden, den Batchauftrag zu beenden, geben Sie „Y“ ein, und drücken Sie die EINGABETASTE.To stop the visual from running, in PowerShell enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

Anzeigen des kreisförmigen React-Kartenvisuals im Power BI-DienstView the React circle card in Power BI service

Zum Testen des Visuals im Power BI-Dienst verwenden Sie den Bericht US Sales Analysis.To test the visual in Power BI service, we'll use the US Sales Analysis report. Sie können diesen Bericht herunterladen und in den Power BI-Dienst hochladen.You can download this report and upload it to Power BI service.

Sie können das Visual auch mit einem eigenen Bericht testen.You can also use your own report to test the visual.

Hinweis

Bevor Sie fortfahren, vergewissern Sie sich, dass Sie die Entwicklereinstellungen für Visuals aktiviert haben.Before you continue, verify that you enabled the visuals developer settings.

  1. Melden Sie sich bei PowerBI.com an, und öffnen Sie den Bericht US Sales Analysis.Sign in to PowerBI.com and open the US Sales Analysis report.

  2. Wählen Sie Weitere Optionen > Bearbeiten aus.Select More options > Edit.

    Screenshot der Option „Bearbeiten“ im Power BI-DienstScreenshot of the edit option in Power B I service.

  3. Erstellen Sie zum Testen eine neue Seite, indem Sie im unteren Bereich der Benutzeroberfläche des Power BI-Diensts auf die Schaltfläche Neue Seite klicken.Create a new page for testing, by clicking on the New page button at the bottom of the Power BI service interface.

    Screenshot der Schaltfläche „Neue Seite“ im Power BI-DienstScreenshot of the new page button in Power B I service.

  4. Wählen Sie im Bereich Visualisierungen die Option Visuelles Entwicklerelement aus.From the Visualizations pane, select the Developer Visual.

    Screenshot der Option „Visuelles Entwicklerelement“ im Bereich „Visualisierungen“Screenshot of the developer visual in the visualizations pane.

    Dieses Visual stellt das benutzerdefinierte Visual dar, das Sie auf Ihrem Computer ausführen.This visual represents the custom visual that you're running on your computer. Es ist nur verfügbar, wenn die Einstellung zum Debuggen von benutzerdefinierten Visuals aktiviert ist.It's only available when the custom visual debugging setting is enabled.

  5. Überprüfen Sie, ob auf der Berichtscanvas ein Visual hinzugefügt wurde.Verify that a visual was added to the report canvas.

    Screenshot des neuen Visuals, das dem Bericht hinzugefügt wurdeScreenshot of the new visual added to the report.

    Dies ist ein sehr einfaches Visual, das anzeigt, wie oft seine Updatemethode aufgerufen wurde.This is a simple visual that displays the number of times its update method has been called. In dieser Phase ruft das Visual keine Daten ab.At this stage, the visual does not retrieve any data.

    Hinweis

    Wenn im Visual eine Meldung über einen Verbindungsfehler angezeigt wird, öffnen Sie in Ihrem Browser eine neue Registerkarte, navigieren Sie zu https://localhost:8080/assets/status, und autorisieren Sie Ihren Browser für die Verwendung dieser Adresse.If the visual displays a connection error message, open a new tab in your browser, navigate to https://localhost:8080/assets/status, and authorize your browser to use this address.

    Screenshot des neuen Visuals mit angezeigtem Verbindungsfehler

  6. Navigieren Sie bei ausgewähltem neuem Visual zum Bereich Felder, erweitern Sie Sales, und wählen Sie Quantity aus.While the new visual is selected, go to the Fields pane, expand Sales, and select Quantity.

    Screenshot des Felds „Quantity“ in der Tabelle „Sales“ im Bericht „US Sales Analysis“ im Power BI-DienstScreenshot of the Power B I service quantity field in the sales table in the U S sales analysis report.

  7. Um zu testen, wie das Visual reagiert, ändern Sie seine Größe. Beachten Sie, dass der Wert für die Updateanzahl jedes Mal erhöht wird, wenn Sie die Größe des Visuals ändern.To test how the visual is responding, resize it and notice that the Update count value increments every time you resize the visual.

    Screenshot des neuen Visuals mit einer anderen Updateanzahl nach dem Ändern der GrößeScreenshot of the new visual displaying a different update count number, after being resized.

Einrichten von React im ProjektSet up React in your project

In diesem Abschnitt erfahren Sie, wie Sie React für das Power BI-Visualprojekt einrichten.In this section, you'll learn how to set up React for your Power BI visual project.

Öffnen Sie PowerShell, und beenden Sie die Ausführung des Visuals, indem Sie STRG+C drücken.Open PowerShell and stop the visual from running by entering Ctrl+C. Wenn Sie dazu aufgefordert werden, den Batchauftrag zu beenden, geben Sie „Y“ ein, und drücken Sie die EINGABETASTE.If prompted to terminate the batch job, enter Y, and press Enter.

Installieren von ReactInstall React

Um die erforderlichen React-Abhängigkeiten zu installieren, öffnen Sie PowerShell im Ordner ReactCircleCard, und führen Sie den folgenden Befehl aus:To install the required React dependencies, open PowerShell in your ReactCircleCard folder, and run the following command:

npm i react react-dom

Installieren der React-TypdefinitionenInstall React type definitions

Um Typdefinitionen für React zu installieren, öffnen Sie PowerShell im Ordner reactCircleCard, und führen Sie den folgenden Befehl aus:To install type definitions for React, open PowerShell in your reactCircleCard folder and run the following command:

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

Erstellen einer React-KomponentenklasseCreate a React component class

Führen Sie die folgenden Schritte aus, um eine React-Komponentenklasse zu erstellen.Follow these steps to create a React component class.

  1. Öffnen Sie VS Code, und navigieren Sie zum Ordner reactCircleCard.Open VS Code and navigate to the reactCircleCard folder.

  2. Erstellen Sie eine neue Datei, indem Sie Datei > Neue Datei auswählen.Create a new file by selecting File > New File.

  3. Kopieren Sie den folgenden Code in die neue Datei.Copy the following code into the new file.

    import * as React from "react";
    
    export class ReactCircleCard extends React.Component<{}>{
        render(){
            return (
                <div className="circleCard">
                    Hello, React!
                </div>
            )
        }
    }
    
    export default ReactCircleCard;
    
  4. Wählen Sie Speichern unter aus, und navigieren Sie zum Ordner src.Select Save As and navigate to the src folder.

  5. Speichern Sie die Datei wie folgt:Save the file as follows:

    • Geben Sie im Feld Dateiname den Namen component ein.In the File name field, enter component.
    • Wählen Sie im Dropdownmenü Dateityp die Option TypeScript React aus.From the Save as type drop-down menu, select TypeScript React.

Hinzufügen von React zur VisualdateiAdd React to the visual file

Ersetzen Sie den Code in der Datei visual.ts durch Code, der die Verwendung von React ermöglicht.Replace the code in the visual.ts file with code that enables using React.

  1. Öffnen Sie im Ordner src die Datei visual.ts, und ersetzen Sie den Code in der Datei durch den folgenden Code:In the src folder, open visual.ts and replace the code in the file with the following 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) {
    
        }
    }
    

    Hinweis

    Da mit den Power BI-TypeScript-Standardeinstellungen React-Dateien vom Typ tsx nicht erkannt werden, markiert VS Code component als Fehler.As default Power BI TypeScript settings don't recognize React tsx files, VS Code highlights component as an error.

  2. Um die Komponente zu rendern, fügen Sie der Datei visual.ts das HTML-Zielelement hinzu.To render the component, add the target HTML element to visual.ts. Dieses Element ist HTMLElement in VisualConstructorOptions und wird an den Konstruktor übergeben.This element is HTMLElement in VisualConstructorOptions, which is passed into the constructor.

    1. Öffnen Sie im Ordner src die Datei visual.ts.In the src folder, open visual.ts.

    2. Fügen Sie der Visual-Klasse den folgenden Code hinzu:Add the following code to the Visual class:

    private target: HTMLElement;
    private reactRoot: React.ComponentElement<any, any>;
    
    1. Fügen Sie dem Konstruktor VisualConstructorOptions die folgenden Zeilen hinzu:Add the following lines to the VisualConstructorOptions constructor:
    this.reactRoot = React.createElement(ReactCircleCard, {});
    this.target = options.element;
    
    ReactDOM.render(this.reactRoot, this.target);
    

    Die Datei visual.ts sollte jetzt wie folgt aussehen:Your visual.ts file should now look like this:

    "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. Speichern Sie visual.ts.Save visual.ts.

Bearbeiten der Datei „tsconfig“Edit the tsconfig file

Bearbeiten Sie die Datei tsconfig.json, damit sie mit React verwendet werden kann.Edit the tsconfig.json to work with React.

  1. Öffnen Sie im Ordner reactCircleCard die Datei tsconfig.json, und fügen Sie am Anfang des Elements compilerOptions zwei Zeilen hinzu.In the reactCircleCard folder, open tsconfig.json and add two lines to the beginning of the compilerOptions item.

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

    Die Datei tsconfig.json sollte jetzt wie folgt aussehen, und der Fehler component in visual.ts sollte nicht mehr vorhanden sein.Your tsconfig.json file should now look like this, and the component error in visual.ts should be gone.

    {
        "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. Speichern Sie tsconfig.json.Save tsconfig.json.

Testen des VisualsTest your visual

Öffnen Sie PowerShell im Ordner CircleCardVisual, und führen Sie das Projekt aus:Open PowerShell in the CircleCardVisual folder, and run your project:

pbiviz start

Wenn Sie dem Bericht in Power BI-Dienst ein neues visuelles Entwicklerelement hinzufügen, sieht dies wie folgt aus:When you add a new Developer Visual to your report in Power BI service, it will look like this:

Screenshot der Nachricht „Hello, React“ im neu erstellten visuellen Entwicklerelement im Power B I-DienstScreenshot showing the hello React message in the newly created developer visual in Power B I service.

Konfigurieren des Datenfelds des VisualsConfigure your visual's data field

Konfigurieren Sie die Datei „capabilities“ des Visuals so, dass nur ein Datenfeld an das Feld Measuredaten des Visuals übermittelt werden kann.Configure your visual's capabilities file so that only one data field can be submitted to the visual's Measure data field.

  1. Öffnen Sie in VS Code im Ordner reactCircleCard die Datei capabilities.json.In VS Code, from the reactCircleCard folder, open capabilities.json.

  2. In ReactCircleCard wird ein einzelner Wert angezeigt: Measure Data.The ReactCircleCard displays a single value, Measure Data. Entfernen Sie das Category Data-Objekt aus dataRoles.Remove the Category Data object from dataRoles.

    Nachdem das Category Data-Objekt entfernt wurde, sieht der Schlüssel dataRoles wie folgt aus:After removing the Category Data object, the dataRoles key looks like this:

    "dataRoles": [
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],
    
  3. Entfernen Sie den gesamten Inhalt des Schlüssels objects (Sie werden ihn später ausfüllen).Remove all the content of the objects key (you'll fill it in later).

    Nach dem Entfernen des Inhalts sieht der Schlüssel objects wie folgt aus:After removing its content, the objects key looks like this:

    "objects": {},
    
  4. Ersetzen Sie die Eigenschaft dataViewMappings durch den folgenden Code.Replace the dataViewMappings property with the code below. max: 1 in measure gibt an, dass nur ein Datenfeld an das Feld Measuredaten des Visuals übermittelt werden kann.max: 1 in measure specifies that only one data field can be submitted to the visual's Measure data field.

    "dataViewMappings": [
        {
            "conditions": [
                {
                    "measure": {
                        "max": 1
                    }
                }
            ],
            "single": {
                "role": "measure"
            }
        }
    ]
    
  5. Speichern Sie die Änderungen, die Sie an capabilities.js vorgenommen haben.Save the changes you made to capabilities.json.

  6. Vergewissern Sie sich, dass pbiviz start ausgeführt wird, und aktualisieren Sie im Power BI-Dienst das kreisförmige React-Kartenvisual.Verify that pbiviz start is running and in Power BI service, refresh your React Circle Card visual. Das Feld Measuredaten akzeptiert nur ein Datenfeld, wie durch max: 1 festgelegt.The Measure data field can except only one data field, as specified by max: 1.

    Screenshot des Felds „Measuredaten“ im kreisförmigen React-Kartenvisual im Power BI-DienstScreenshot showing the measure Data field in the react circle card in Power B I service.

Aktualisieren des Stils des VisualsUpdate the visual's style

In diesem Abschnitt ändern Sie die Form des Visuals in einen Kreis.In this section, you'll turn your visual's shape into a circle. Verwenden Sie die Datei visual.less zum Steuern des Stils des Visuals.Use the visual.less file to control the style of your visual.

  1. Öffnen Sie im Ordner style die Datei visual.less.From the style folder, open visual.less.

  2. Ersetzen Sie den Inhalt von visual.less durch den Code unten.Replace the content of visual.less with the code below.

    .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. Speichern Sie visual.less.Save visual.less.

Festlegen, dass das Visual Eigenschaften von Power BI empfängtSet your visual to receive properties from Power BI

In diesem Abschnitt konfigurieren Sie das Visual so, dass es Daten von Power BI empfängt und Aktualisierungen an die Instanzen in der Datei component.tsx sendet.In this section you'll configure your visual to receive data from Power BI, and send updates to the instances in the component.tsx file.

Rendern von Daten mithilfe von ReactRender data using React

Sie können Daten mithilfe von React rendern.You can render data using React. Die Komponente kann Daten zu Ihrem eigenen Zustand anzeigen.The component can display data from its own state.

  1. Öffnen Sie in VS Code im Ordner reactCircleCard die Datei component.tsx.In VS Code, from the reactCircleCard folder, open component.tsx.

  2. Ersetzen Sie den Inhalt von component.tsx durch den Code unten.Replace the content of component.tsx with the code below.

    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. Speichern Sie component.tsx.Save component.tsx.

Festlegen des Empfangs von Daten durch das VisualSet your visual to receive data

Visuals empfangen Daten als Argument der update-Methode.Visuals receive data as an argument of the update method. In diesem Abschnitt aktualisieren Sie diese Methode für den Empfang von Daten.In this section, you'll update this method to receive data.

Mit dem Code unten werden textLabel und textValue aus DataView ausgewählt und, falls die Daten vorhanden sind, der Zustand der Komponente aktualisiert.The code below selects textLabel and textValue from DataView, and if the data exists, updates the component state.

  1. Öffnen Sie in VS Code im Ordner src die Datei visual.ts.In VS Code, from the src folder, open visual.ts.

  2. Fügen Sie mit dem folgenden Code den Inhalt der ReactCircleCard-Klasse hinzu:Add the content of the ReactCircleCard class, with the following code:

    import { ReactCircleCard, initialState } from "./component";
    
  3. Fügen Sie der update -Methode den folgenden Code hinzu.Add the following code to the update method.

    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. Erstellen Sie eine neue clear-Methode, indem Sie den folgenden Code unter der update-Methode hinzufügen.Create a clear method by adding the following code below the update method.

    private clear() {
        ReactCircleCard.update(initialState);
    }
    
  5. Speichern Sie visual.ts.Save visual.ts

Festlegen des Sendens von Daten durch das VisualSet your visual to send data

In diesem Abschnitt aktualisieren Sie das Visual, damit es Aktualisierungen an Instanzen in der Datei component sendet.In this section, you'll update your visual to send updates to instances in the component file.

  1. Öffnen Sie in VS Code im Ordner src die Datei component.tsx.In VS Code, from the src folder, open component.tsx.

  2. Ersetzen Sie den Inhalt der ReactCircleCard-Klasse durch den folgenden Code.Replace the content of the ReactCircleCard class, with the following code.

    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. Speichern Sie component.tsx.Save component.tsx.

Anzeigen der Änderungen des VisualsView the changes to the visual

Testen Sie das kreisförmige React-Kartenvisual, um die von Ihnen vorgenommenen Änderungen anzuzeigen.Test your React Circle Card visual to view the changes you made.

  1. Vergewissern Sie sich, dass pbiviz start ausgeführt wird, und aktualisieren Sie im Power BI-Dienst das kreisförmige React-Kartenvisual.Verify that pbiviz start is running, and in Power BI service, refresh your React Circle Card visual.

  2. Fügen Sie dem Feld Measuredaten des Visuals Sales hinzu.Add Sales to the visual's Measure data field.

Screenshot des Werts „Sales“, der im kreisförmigen React-Kartenvisual im Power BI-Dienst angezeigt wirdScreenshot of the sales value displayed in the react circle card visual in Power B I service.

Ermöglichen des Änderns der Größe des VisualsMake your visual resizable

Derzeit hat das Visual eine feste Breite und Höhe.Currently, your visual has fixed width and height. In diesem Abschnitt ermöglichen Sie das Ändern der Größe des Visuals.In this section, you'll make the visual resizable.

Nachdem Sie die in diesem Abschnitt beschriebenen Schritte ausgeführt haben, entspricht der Kreisdurchmesser im Visual der minimalen Breite oder Höhe, und Sie können die Größe im Power BI-Dienst ändern.After completing the steps outlined in this section, the circle diameter in your visual will correspond to the minimal width or height size, and you'll be able to resize it in Power BI service.

Speichern Sie die Datei „visual.ts“.Configure the visual.ts file

Rufen Sie die aktuelle Größe des Viewports des Visuals aus dem options-Objekt ab.Get the current size of the visual viewport from the options object.

  1. Öffnen Sie in VS Code im Ordner src die Datei visual.ts.In VS Code, from the src folder, open visual.ts.

  2. Fügen Sie diesen Code ein, um die IViewport-Schnittstelle zu importieren.Insert this code to import the IViewport interface.

    import IViewport = powerbi.IViewport;
    
  3. Fügen Sie der visual-Klasse die viewport-Eigenschaft hinzu.Add the viewport property to the visual class.

    private viewport: IViewport;
    
  4. Fügen Sie in der update-Methode vor ReactCircleCard.update den folgenden Code hinzu.In the update method, before ReactCircleCard.update, add the following code.

    this.viewport = options.viewport;
    const { width, height } = this.viewport;
    const size = Math.min(width, height);
    
  5. Fügen Sie in der update-Methode in ReactCircleCard.update das Element size hinzu.In the update method, in ReactCircleCard.update, add size.

    size,
    
  6. Speichern Sie visual.ts.Save visual.ts.

Konfigurieren der Datei „component.tx“Configure the component.tsx file

  1. Öffnen Sie in VS Code im Ordner src die Datei component.tsx.In VS Code, from the src folder, open component.tsx.

  2. Fügen Sie export interface State den folgenden Code hinzu.Add the following code to export interface State.

    size: number
    
  3. Fügen Sie export const initialState: State den folgenden Code hinzu.Add the following code to export const initialState: State.

    size: 200
    
  4. Gehen Sie in der Methode render folgendermaßen vor:In the render method, do the following:

    1. size wurde const { textLabel, textValue, size } = this.state; hinzugefügt.Add size to const { textLabel, textValue, size } = this.state;. Diese Deklaration sollte nun wie folgt aussehen:This declaration should now look like this:

      const { textLabel, textValue, size } = this.state;
      
    2. Fügen Sie den folgenden Code oberhalb von return hinzu.Add the following code above return.

      const style: React.CSSProperties = { width: size, height: size };
      
    3. Ersetzen Sie die erste return-Zeile <div className="circleCard"> durch:Replace the first return line <div className="circleCard"> with:

      <div className="circleCard" style={style}>
      
  5. Speichern Sie component.tsx.Save component.tsx.

Konfigurieren der VisualdateiConfigure the visual file

  1. Öffnen Sie in VS Code im Ordner style die Datei visual.less.In VS Code, from the style folder, open visual.less.

  2. Ersetzen Sie in .circleCard die Elemente width und height durch min-width und min-height.In .circleCard, replace width and height with min-width and min-height.

    min-width: 200px;
    min-height: 200px;
    
  3. Speichern Sie visual.less.Save visual.less.

Gestalten Ihres Power BI-Visuals als anpassbarMake your Power BI visual customizable

In diesem Abschnitt fügen Sie die Möglichkeit zum Anpassen des Visuals hinzu, sodass Benutzer Änderungen an seiner Farbe und der Rahmenstärke vornehmen können.In this section, you'll add the ability to customize your visual, allowing users to make changes to its color and border thickness.

Hinzufügen von Farbe und Stärke zur Datei „capabilities“Add color and thickness to the capabilities file

Fügen Sie der object-Eigenschaft in capabilities.json die Farbe und Rahmenstärke hinzu.Add the color and border thickness to the object property in capabilities.json.

  1. Öffnen Sie in VS Code im Ordner reactCircleCard die Datei capabilities.json.In VS Code, from the reactCircleCard folder, open capabilities.json.

  2. Fügen Sie der Eigenschaft objects die folgenden Einstellungen hinzu.Add the following settings to the objects property.

    "circle": {
        "displayName": "Circle",
        "properties": {
           "circleColor": {
                "displayName": "Color",
                "description": "The fill color of the circle.",
                "type": {
                    "fill": {
                        "solid": {
                            "color": true
                        }
                    }
                }
            },
            "circleThickness": {
                "displayName": "Thickness",
                "description": "The circle thickness.",
                "type": {
                    "numeric": true
                }
            }
        }
    }
    
  3. Speichern Sie capabilities.json.Save capabilities.json.

Hinzufügen der CircleSettings-Klasse zur Datei „settings“Add a circle settings class to the settings file

Fügen Sie der Datei settings.ts die CircleSettings-Klasse hinzu.Add the CircleSettings class to settings.ts.

  1. Öffnen Sie in VS Code im Ordner src die Datei settings.ts.In VS Code, from the src folder, open settings.ts.

  2. Ersetzen Sie den Code in settings.ts durch folgenden Code:Replace the code in settings.ts with the following code:

    "use strict";
    
    import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
    import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;
    
    export class CircleSettings {
        public circleColor: string = "white";
        public circleThickness: number = 2;
    }
    
    export class VisualSettings extends DataViewObjectsParser {
        public circle: CircleSettings = new CircleSettings();
    }
    
  3. Speichern Sie settings.ts.Save settings.ts.

Hinzufügen einer Methode zum Anwenden von VisualeinstellungenAdd a method to apply visual settings

Fügen Sie der Datei visuals.ts die enumerateObjectInstances-Methode zum Anwenden von Visualeinstellungen und erforderliche Importe hinzu.Add the enumerateObjectInstances method used to apply visual settings, and required imports to the visuals.ts file.

  1. Öffnen Sie in VS Code im Ordner src die Datei visual.ts.In VS Code, from the src folder, open visuals.ts.

  2. Fügen Sie am Anfang von visual.ts die folgenden import-Anweisungen hinzu.Add these import statements at the top of visual.ts.

    import VisualObjectInstance = powerbi.VisualObjectInstance;
    import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
    import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
    import { VisualSettings } from "./settings";
    
  3. Fügen Sie Visual die folgende Deklaration hinzu.Add the following declaration to Visual.

    private settings: VisualSettings;
    
  4. Fügen Sie Visual die enumerateObjectInstances-Methode hinzu.Add the enumerateObjectInstances method to Visual.

    public enumerateObjectInstances(
        options: EnumerateVisualObjectInstancesOptions
    ): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
    
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }
    
  5. Fügen Sie in der Visual-Klasse den folgenden Code zu update hinzu, damit das dataView-Objekt settings empfangen kann.In the Visual class, add the following code to update so that the dataView object will be able to receive settings.

    1. Fügen Sie der if-Anweisung nach const size = Math.min(width, height); den folgenden Code hinzu.Add this code to the if statement after const size = Math.min(width, height);.

      this.settings = VisualSettings.parse(dataView) as VisualSettings;
      const object = this.settings.circle;
      
    2. Fügen Sie ReactCircleCard.update nach size diesen Code hinzu.Add this code to ReactCircleCard.update after size.

      borderWidth: object && object.circleThickness ? object.circleThickness : undefined,
      background: object && object.circleColor ? object.circleColor : undefined,
      }
      
  6. Speichern Sie visual.ts.Save visual.ts.

Bearbeiten der KomponentendateiEdit the component file

Bearbeiten Sie die Komponentendatei, damit sie die geänderte Farbe und Rahmenstärke des Visuals rendern kann.Edit the component file so that it can render the changes to the visual's color and border thickness.

  1. Öffnen Sie in VS Code im Ordner src die Datei component.tsx.In VS Code, from the src folder, open component.tsx.

  2. Fügen Sie State die folgenden Werte hinzu:Add these values to State:

    background?: string,
    borderWidth?: number
    
  3. Ersetzen Sie in der render-Methode die folgenden Codezeilen:In the render method, replace the following code lines:

    1. const { textLabel, textValue, size } = this.state; durch:const { textLabel, textValue, size } = this.state; with:

      const { textLabel, textValue, size, background, borderWidth } = this.state;
      
    2. const style: React.CSSProperties = { width: size, height: size }; durch:const style: React.CSSProperties = { width: size, height: size }; with:

      const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
      
  4. Speichern Sie component.tsx.Save component.tsx.

Überprüfen Ihrer ÄnderungenReview your changes

Experimentieren Sie mit der Farbe und Rahmenstärke des Visuals, die Sie jetzt steuern können.Experiment with the visual's color and border thickness, which you can now control.

  1. Vergewissern Sie sich, dass pbiviz start ausgeführt wird, und aktualisieren Sie im Power BI-Dienst das kreisförmige React-Kartenvisual.Verify that pbiviz start is running, and in Power BI service, refresh your React Circle Card visual.

  2. Wählen Sie die Registerkarte Format aus, und erweitern Sie Kreis.Select the Format tab and expand Circle.

  3. Passen Sie die Einstellungen Farbe und Stärke des Visuals an, und überprüfen Sie die Auswirkungen auf das Visual.Adjust the visual's Color and Thickness settings, and review their effect on the visual.

Screenshot des kreisförmigen React-Kartenvisuals im Power BI-Dienst, in dem die Formatoptionen für Kreis und Rahmenstärke angezeigt werdenA screenshot of the react circle card visual in Power B I service, showing the color and border thickness format options.

Nächste SchritteNext steps