Tutorial: Entwickeln eines kreisförmigen Kartenvisuals in Power BITutorial: Develop a Power BI circle card visual

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 ein als kreisförmiges Kartenvisual bezeichnetes Power BI-Visual, mit dem ein formatierter Measurewert in einem Kreis angezeigt wird.In this tutorial, you'll develop a Power BI visual named circle card that displays a formatted measure value inside a circle. Das kreisförmige Kartenvisual unterstützt die Anpassung der Füllfarbe und der Stärke der Kontur.The circle card visual supports customization of fill color and outline thickness.

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 eines Visuals mit visuellen D3-ElementenDevelop your visual with D3 visual elements.
  • Konfigurieren des Visuals für die DatenverarbeitungConfigure your visual to process data.

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 Kartenvisual.In this section you'll create a project for the 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 CircleCard
    
  3. Navigieren Sie zum Projektordner.Navigate to the project's folder.

    cd CircleCard
    
  4. Starten Sie das kreisförmige Kartenvisual.Start the 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

    Schließen Sie das PowerShell-Fenster nicht vor dem Ende des Tutorials.Do not close the PowerSell window until the end of the tutorial. Um die Ausführung des Visuals abzubrechen, drücken Sie 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, enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

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

Zum Testen des kreisförmigen Kartenvisuals im Power BI-Dienst verwenden Sie den Bericht US Sales Analysis.To test the circle card 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 kreisförmige Kartenvisual auch mit einem eigenen Bericht testen.You can also use your own report to test the circle card visuals.

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.

Hinzufügen von visuellen Elementen und von TextAdd visual elements and text

In diesem Abschnitt erfahren Sie, wie Sie das Visual in einen Kreis umwandeln und darin Text anzeigen.In this section you'll learn how to turn your visual into a circle, and make it display text.

Hinweis

In diesem Tutorial wird Visual Studio Code (VS Code) zum Entwickeln des Power BI-Visuals verwendet.In this tutorial, Visual Studio Code (VS Code) is used for developing the Power BI visual.

Ändern der Datei des VisualsModify the visuals file

Passen Sie die Datei visual.ts an, indem Sie einige Codezeilen löschen und hinzufügen.Set up the visual.ts file by deleting and adding a few lines of code.

  1. Öffnen Sie das Projekt in VS Code (Datei > Ordner öffnen).Open your project in VS Code (File > Open Folder).

  2. Erweitern Sie im Explorerbereich den Ordner src, und wählen Sie die Datei visual.ts aus.In the Explorer pane, expand the src folder, and select the file visual.ts.

    Screenshot des Zugriffs auf die Datei „visual.ts“ in VS CodeScreenshot of accessing the visual.ts file in V S code.

    Wichtig

    Beachten Sie die Kommentare am oberen Rand der Datei visual.ts.Notice the comments at the top of the visual.ts file. Die Berechtigung zur Nutzung der Pakete für Power BI-Visuals wird unter den Bedingungen der MIT-Lizenz (Massachusetts Institute of Technology) kostenlos erteilt.Permission to use the Power BI visual packages is granted free of charge under the terms of the Massachusetts Institute of Technology (MIT) License. Als Teil der Vereinbarung müssen Sie die Kommentare im oberen Bereich der Datei beibehalten.As part of the agreement, you must leave the comments at the top of the file.

  3. Entfernen Sie die folgenden Codezeilen aus der Datei visual.ts.Remove the following code lines from the visual.ts file.

    • Mit VisualSettings wird Folgendes importiert:The VisualSettings import:

      import { VisualSettings } from "./settings";
      
    • Die vier privaten Variablendeklarationen auf Klassenebene.The four class-level private variable declarations.

    • Alle Codezeilen innerhalb des KonstruktorsAll the lines of code inside the constructor.

    • Alle Codezeilen innerhalb der update-MethodeAll the lines of code inside the update method.

    • Alle verbleibenden Codezeilen unter der update-Methode, einschließlich der Methoden parseSettings und enumerateObjectInstances.All the remaining code lines below the update method, including the parseSettings and enumerateObjectInstances methods.

  4. Fügen Sie am Ende des Abschnitts „import“ die folgenden Codezeilen hinzu:Add the following lines of code at the end of the import section:

    • IVisualHost: eine Sammlung von Eigenschaften und Diensten, die für die Interaktion mit dem Visualhost (Power BI) verwendet werdenIVisualHost - A collection of properties and services used to interact with the visual host (Power BI).

      import IVisualHost = powerbi.extensibility.IVisualHost;
      
    • D3-BibliothekD3 library

      import * as d3 from "d3";
      type Selection<T extends d3.BaseType> = d3.Selection<T, any,any, any>;
      

      Hinweis

      Wenn Sie diese Bibliothek nicht schon bei der Einrichtung installiert haben, installieren Sie die D3-JavaScript-Bibliothek.If you didn't install this library as part of your setup, install the D3 JavaScript library.

  5. Fügen Sie unter der Visual-Klassendeklaration die folgenden Eigenschaften auf Klassenebene ein.Below the Visual class declaration, insert the following class level properties. Sie müssen nur die Codezeilen hinzufügen, die mit private beginnen.You only need to add the code lines starting with private.

    export class Visual implements IVisual {
        // ...
        private host: IVisualHost;
        private svg: Selection<SVGElement>;
        private container: Selection<SVGElement>;
        private circle: Selection<SVGElement>;
        private textValue: Selection<SVGElement>;
        private textLabel: Selection<SVGElement>;
        // ...
    }
    
  6. Speichern Sie die Datei visual.ts.Save the visual.ts file.

Hinzufügen eines Kreises und von TextelementenAdd a circle and text elements

Fügen Sie die skalierbaren D3-Vektorgrafiken (SVG) hinzu.Add D3 Scalable Vector Graphics (SVG). Dies ermöglicht die Erstellung von drei Formen: einem Kreis und zwei Textelementen.This enables creating three shapes: a circle, and two text elements.

  1. Öffnen Sie visual.ts in VS Code.Open visual.ts in VS code.

  2. Fügen Sie den folgenden Code zum Konstruktor hinzu.Add the following code to the constructor.

    this.svg = d3.select(options.element)
        .append('svg')
        .classed('circleCard', true);
    this.container = this.svg.append("g")
        .classed('container', true);
    this.circle = this.container.append("circle")
        .classed('circle', true);
    this.textValue = this.container.append("text")
        .classed("textValue", true);
    this.textLabel = this.container.append("text")
        .classed("textLabel", true);
    

    Tipp

    Um die Lesbarkeit zu verbessern, wird empfohlen, das Dokument jedes Mal zu formatieren, wenn Sie Codeausschnitte in das Projekt kopieren.To improve readability, it's recommended that you format the document every time you copy code snippets into your project. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle in VS Code, und wählen Sie Dokument formatieren (ALT+UMSCHALT+F) aus.Right-click anywhere in VS code, and select Format Document (Alt+Shift+F).

  3. Speichern Sie die Datei visual.ts.Save the visual.ts file.

Festlegen von Breite und HöheSet the width and height

Legen Sie die Breite und Höhe des Visuals fest, und initialisieren Sie die Attribute und Stile der visuellen Elemente.Set the width and height of the visual, and initialize the attributes and styles of the visual's elements.

  1. Öffnen Sie visual.ts in VS Code.Open visual.ts in VS Code.

  2. Fügen Sie den folgenden Code zur Updatemethode hinzu.Add the following code to the update method.

    let width: number = options.viewport.width;
    let height: number = options.viewport.height;
    this.svg.attr("width", width);
    this.svg.attr("height", height);
    let radius: number = Math.min(width, height) / 2.2;
    this.circle
        .style("fill", "white")
        .style("fill-opacity", 0.5)
        .style("stroke", "black")
        .style("stroke-width", 2)
        .attr("r", radius)
        .attr("cx", width / 2)
        .attr("cy", height / 2);
    let fontSizeValue: number = Math.min(width, height) / 5;
    this.textValue
        .text("Value")
        .attr("x", "50%")
        .attr("y", "50%")
        .attr("dy", "0.35em")
        .attr("text-anchor", "middle")
        .style("font-size", fontSizeValue + "px");
    let fontSizeLabel: number = fontSizeValue / 4;
    this.textLabel
        .text("Label")
        .attr("x", "50%")
        .attr("y", height / 2)
        .attr("dy", fontSizeValue / 1.2)
        .attr("text-anchor", "middle")
        .style("font-size", fontSizeLabel + "px");
    
  3. Speichern Sie die Datei visual.ts.Save the visual.ts file.

(Optional:) Überprüfen des Codes in der Datei des Visuals(Optional) Review the code in the visuals file

Vergewissern Sie sich, dass der Code in der Datei visuals.ts wie folgt aussieht:Verify that the code in the visuals.ts file looks like this:

/*
*  Power BI Visual CLI
*
*  Copyright (c) Microsoft Corporation
*  All rights reserved.
*  MIT License
*
*  Permission is hereby granted, free of charge, to any person obtaining a copy
*  of this software and associated documentation files (the ""Software""), to deal
*  in the Software without restriction, including without limitation the rights
*  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*  copies of the Software, and to permit persons to whom the Software is
*  furnished to do so, subject to the following conditions:
*
*  The above copyright notice and this permission notice shall be included in
*  all copies or substantial portions of the Software.
*
*  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*  THE SOFTWARE.
*/
"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;

export class Visual implements IVisual {
    private host: IVisualHost;
    private svg: Selection<SVGElement>;
    private container: Selection<SVGElement>;
    private circle: Selection<SVGElement>;
    private textValue: Selection<SVGElement>;
    private textLabel: Selection<SVGElement>;

    constructor(options: VisualConstructorOptions) {
        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circleCard', true);
        this.container = this.svg.append("g")
            .classed('container', true);
        this.circle = this.container.append("circle")
            .classed('circle', true);
        this.textValue = this.container.append("text")
            .classed("textValue", true);
        this.textLabel = this.container.append("text")
            .classed("textLabel", true);
    }

    public update(options: VisualUpdateOptions) {
        let width: number = options.viewport.width;
        let height: number = options.viewport.height;
        this.svg.attr("width", width);
        this.svg.attr("height", height);
        let radius: number = Math.min(width, height) / 2.2;
        this.circle
            .style("fill", "white")
            .style("fill-opacity", 0.5)
            .style("stroke", "black")
            .style("stroke-width", 2)
            .attr("r", radius)
            .attr("cx", width / 2)
            .attr("cy", height / 2);
        let fontSizeValue: number = Math.min(width, height) / 5;
        this.textValue
            .text("Value")
            .attr("x", "50%")
            .attr("y", "50%")
            .attr("dy", "0.35em")
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeValue + "px");
        let fontSizeLabel: number = fontSizeValue / 4;
        this.textLabel
            .text("Label")
            .attr("x", "50%")
            .attr("y", height / 2)
            .attr("dy", fontSizeValue / 1.2)
            .attr("text-anchor", "middle")
            .style("font-size", fontSizeLabel + "px");
    }
}

Ändern der Datei mit den FunktionenModify the capabilities file

Löschen Sie nicht benötigte Codezeilen aus der Datei mit den Funktionen.Delete unneeded lines of code from the capabilities file.

  1. Öffnen Sie das Projekt in VS Code (Datei > Ordner öffnen).Open your project in VS Code (File > Open Folder).

  2. Wählen Sie die Datei capabilities.json aus.Select the capabilities.json file.

    Screenshot des Zugreifens auf die Datei „capabilities.json“ in VS CodeScreenshot of accessing the capabilities.json file in V S code.

  3. Entfernen Sie alle Objektelemente (Zeilen 14–60).Remove all the objects elements (lines 14-60).

  4. Speichern Sie die Datei capabilities.json.Save the capabilities.json file.

Neustarten des kreisförmigen KartenvisualsRestart the circle card visual

Beenden Sie die Ausführung des Visuals, und starten Sie es neu.Stop the visual from running and restart it.

  1. Drücken Sie in dem PowerShell-Fenster, in dem das Visual ausgeführt wird, STRG+C. Wenn Sie aufgefordert werden, den Batchauftrag zu beenden, geben Sie „Y“ ein, und drücken Sie die EINGABETASTE.In the PowerShell window running the visual, enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

  2. Starten Sie das Visual in PowerShell.In PowerShell, start the visual.

    pbiviz start
    

Testen des Visuals mit den hinzugefügten ElementenTest the visual with the added elements

Vergewissern Sie sich, dass die neu hinzugefügten Elemente im Visual angezeigt werden.Verify that the visual displays the newly added elements.

  1. Öffnen Sie im Power BI-Dienst den Bericht US Sales Analysis.In Power BI service, open the Power BI US Sales Analysis report. Wenn Sie zum Entwickeln des kreisförmigen Kartenvisuals einen anderen Bericht verwendet haben, navigieren Sie zu diesem Bericht.If you're using a different report to develop the circle card visual, navigate to that report.

  2. Vergewissern Sie sich, dass das Visual ein Kreis ist.Make sure that the visual is shaped as a circle.

    Screenshot des als Kreis dargestellten kreisförmigen KartenvisualsScreenshot of the circle card visual shaped as a circle.

    Hinweis

    Wenn im Visual nichts angezeigt wird, ziehen Sie die Option Quantity aus dem Bereich Felder in das visuelle Entwicklerelement.If the visual isn't displaying anything, from the Fields pane, drag the Quantity field into the developer visual.

  3. Ändern Sie Größe des Visuals.Resize the visual.

    Beachten Sie, dass sich die Skalierung von Kreis und Text nach den verfügbaren Abmessungen des Visuals richtet.Notice that the circle and text scale to fit the dimensions of the visual. Die update-Methode wird aufgerufen, wenn Sie die Größe des Visuals und damit die Skalierung der visuellen Elemente ändern.The update method is called when you resize the visual, and as a result the visual elements get rescaled.

Aktivieren des automatischen erneuten LadensEnable auto reload

Mit dieser Option stellen Sie sicher, dass das Visual bei jedem Speichern von Projektänderungen automatisch neu geladen wird.Use this setting to ensure that the visual is automatically reloaded each time you save project changes.

  1. Navigieren Sie zum Power BI-Bericht US Sales Analysis (oder zu dem Projekt mit Ihrem kreisförmigen Kartenvisual).Navigate to the Power BI US Sales Analysis report (or to the project that has your circle card visual).

  2. Wählen Sie das kreisförmige Kartenvisual aus.Select the circle card visual.

  3. Wählen Sie auf der unverankerten Symbolleiste Automatisches erneutes Laden aktivieren/deaktivieren aus.In the floating toolbar, select Toggle Auto Reload.

    Screenshot des Klickens auf die Option „Automatisches erneutes Laden aktivieren/deaktivieren“ auf der unverankerten Symbolleiste des kreisförmigen KartenvisualsScreenshot of clicking the toggle auto reload option, in the circle card visual floating toolbar.

Verarbeiten von Daten im VisualGet the visual to process data

In diesem Abschnitt definieren Sie Datenrollen und Zuordnungen von Datenansichten.In this section, you'll define data roles and data view mappings. Außerdem ändern Sie das Visual so, dass der Name des dargestellten Werts angezeigt wird.You'll also modify the visual to display the name of the value it's displaying.

Konfigurieren der Datei mit den FunktionenConfigure the capabilities file

Ändern Sie die Datei capabilities.json, um die Datenrollen- und Datenansichtsmappings zu definieren.Modify the capabilities.json file to define the data role and data view mappings.

  • Definieren der DatenrolleDefining the data role

    Definieren Sie das dataRoles-Array mit einer einzelnen Datenrolle vom Typ Measure.Define the dataRoles array with a single data role of the type measure. Diese Datenrolle hat die Bezeichnung measure und wird als Measure angezeigt.This data role is called measure, and is displayed as Measure. Sie ermöglicht die Übergabe eines Measurefelds oder eines zusammengefassten Felds.It allows passing either a measure field, or a field that's summed up.

    1. Öffnen Sie die Datei capabilities.json in VS Code.Open the capabilities.json file in VS Code.

    2. Entfernen Sie den gesamten Inhalt im dataRoles-Array (Zeilen 3–12).Remove all the content inside the dataRoles array (lines 3-12).

    3. Fügen Sie im dataRoles-Array den folgenden Code ein.Insert the following code to the dataRoles array.

      {
          "displayName": "Measure",
          "name": "measure",
          "kind": "Measure"
      }
      
    4. Speichern Sie die Datei capabilities.json.Save the capabilities.json file.

  • Definieren der Zuordnung der DatenansichtDefining the data view mapping

    Definieren Sie eine im dataViewMappings-Array das Feld measure.Define a filed called measure in the dataViewMappings array. Dieses Feld kann an die Datenrolle übergeben werden.This field can be passed to the data role.

    1. Öffnen Sie die Datei capabilities.json in VS Code.Open the capabilities.json file in VS Code.

    2. Entfernen Sie den gesamten Inhalt im dataViewMappings-Array (Zeilen 10–30).Remove all the content inside the dataViewMappings array (lines 10-30).

    3. Fügen Sie im dataViewMappings-Array den folgenden Code ein.Insert the following code to the dataViewMappings array.

      {
          "conditions": [
              { "measure": { "max": 1 } }
          ],
          "single": {
              "role": "measure"
          }
      }
      
    4. Speichern Sie die Datei capabilities.json.Save the capabilities.json file.

(Optional:) Überprüfen der Datei mit den Funktionen auf Codeänderungen(Optional) Review the capabilities file code changes

Vergewissern Sie sich, dass im kreisförmigen Kartenvisual das Feld measure angezeigt wird, und überprüfen Sie mithilfe der Option Datenansicht anzeigen die vorgenommenen Änderungen.Verify that the circle card visual displays the measure field, and review the changes you made using the Show Dataview option.

  1. Öffnen Sie im Power BI-Dienst den Bericht US Sales Analysis.In Power BI service, open the Power BI US Sales Analysis report. Wenn Sie zum Entwickeln des kreisförmigen Kartenvisuals einen anderen Bericht verwendet haben, navigieren Sie zu diesem Bericht.If you're using a different report to develop the circle card visual, navigate to that report.

  2. Beachten Sie, dass das kreisförmige Kartenvisual nun mit einem Feld namens Measure konfiguriert werden kann.Notice that the circle card visual can now be configured with a field titled Measure. Sie können Elemente aus dem Bereich Felder per Drag & Drop in das Feld Measure ziehen.You can drag and drop elements from the Fields pane into the Measure field.

    Screenshot des Felds „Measure“ des kreisförmigen Kartenvisuals im Bereich „Visualisierung“ im Power BI-DienstScreenshot of the circle card measure filed, in the Power BI service visualization pane.

    Hinweis

    Das Visualprojekt enthält noch keine Datenbindungslogik.The visual project does not yet include data binding logic.

  3. Wählen Sie auf der unverankerten Symbolleiste Datenansicht anzeigen aus.In the floating toolbar, select Show Dataview.

    Screenshot der Schaltfläche „Datenansicht anzeigen“ auf der unverankerten Symbolleiste des kreisförmigen KartenvisualsScreenshot of the show dataview button, located in the circle card floating toolbar.

  4. Wählen Sie die drei Punkte aus, um die Ansicht zu erweitern, und wählen Sie Einzeln aus, um den Wert anzuzeigen.Select the three dots to expand the display, and select single to view the value.

    Screenshot des in der Option „Datenansicht anzeigen“ des kreisförmigen Kartenvisuals dargestellten WertsScreenshot of the value figure as it's displayed in the circle card show dataview option.

  5. Erweitern Sie metadata und dann das columns-Array, und überprüfen Sie die Werte von Format und displayName.Expand metadata, then the columns array, and review the format and displayName values.

    Screenshot der in der Option „Datenansicht anzeigen“ des kreisförmigen Kartenvisuals dargestellten Werte „Format“ und „displayName“Screenshot of the format and display name values as displayed in the circle card show dataview option.

  6. Um zum Visual zurückzukehren, wählen Sie in der Symbolleiste über dem Visual Datenansicht anzeigen.To toggle back to the visual, in the toolbar floating above the visual, select Show Dataview.

Konfigurieren des Visuals für die Nutzung von DatenConfigure the visual to consume data

Ändern Sie die Datei visual.ts so, dass das kreisförmige Kartenvisual Daten nutzen kann.Make changes to the visual.ts file, so that the circle card visual will be able to consume data.

  1. Öffnen Sie die Datei visual.ts in VS Code.Open the visual.ts file in VS Code.

  2. Fügen Sie die folgende Zeile hinzu, um die Schnittstelle DataView aus dem Modul powerbi zu importieren.Add the following line to import the DataView interface from the powerbi module.

    import DataView = powerbi.DataView;
    
  3. Führen Sie in der update-Methode folgende Aktionen aus:In the update method, do the following:

    • Fügen Sie die folgende Anweisung als erste Anweisung hinzu.Add the following statement as the first statement. Diese Anweisung weist dataView einer Variable für den einfachen Zugriff zu und deklariert die Variable so, dass sie auf das dataView-Objekt verweist.The statement assigns dataView to a variable for easy access, and declares the variable to reference the dataView object.

      let dataView: DataView = options.dataViews[0];
      
    • Ersetzen Sie .text("Value") durch die folgende Codezeile:Replace .text("Value") with this line of code:

      .text(<string>dataView.single.value)
      
    • Ersetzen Sie .text("Label") durch die folgende Codezeile:Replace .text("Label") with this line of code:

      .text(dataView.metadata.columns[0].displayName)
      
  4. Speichern Sie die Datei visual.ts.Save the visual.ts file.

  5. Überprüfen Sie das Visual im Power BI-Dienst.Review the visual in Power BI service. Das Visual zeigt nun den Wert und den Anzeigenamen an.The visual now displays the value and the display name.

Nächste SchritteNext steps