Zelfstudie: Een visual van een cirkelkaart ontwikkelen in Power BITutorial: Develop a Power BI circle card visual

Als ontwikkelaar kunt u uw eigen Power BI-visuals maken.As a developer you can create your own Power BI visuals. Deze visuals kunnen door uzelf worden gebruikt, door uw organisatie of door derden.These visuals can be used by you, your organization or by third parties.

In deze zelfstudie ontwikkelt u een Power BI-visual met de naam CircleCard waarin een opgemaakte meetwaarde wordt weergegeven in een cirkel.In this tutorial, you'll develop a Power BI visual named circle card that displays a formatted measure value inside a circle. U kunt de opvulkleur en randbreedte van de visual van een cirkelkaart aanpassen.The circle card visual supports customization of fill color and outline thickness.

In deze zelfstudie leert u het volgende:In this tutorial, you learn how to:

  • Een ontwikkelingsproject maken voor uw visual.Create a development project for your visual.
  • De visual ontwikkelen met visuele D3-elementen.Develop your visual with D3 visual elements.
  • De visual configureren voor het verwerken van gegevens.Configure your visual to process data.

VereistenPrerequisites

Voordat u begint met het ontwikkelen van uw Power BI-visual controleert u of u over alles beschikt wat hieronder wordt vermeld.Before you start developing your Power BI visual, verify that you have everything listed in this section.

Een ontwikkelingsproject makenCreate a development project

In dit gedeelte maakt u een project voor de visual CircleCard.In this section you'll create a project for the circle card visual.

  1. Open PowerShell en navigeer naar de map waarin u het project wilt maken.Open PowerShell and navigate to the folder you want to create your project in.

  2. Voer de volgende opdracht in:Enter the following command:

    pbiviz new CircleCard
    
  3. Navigeer naar de projectmap.Navigate to the project's folder.

    cd CircleCard
    
  4. Start de visual CircleCard.Start the circle card visual. Uw visual wordt nu uitgevoerd terwijl deze wordt gehost op uw computer.Your visual is now running while being hosted on your computer.

    pbiviz start
    

    Belangrijk

    Laat het venster van PowerShell geopend tot het einde van de zelfstudie.Do not close the PowerSell window until the end of the tutorial. Als u het uitvoeren van de visual wilt stoppen, drukt u op Ctrl + C. Als wordt gevraagd of u de batchtaak wilt beëindigen, typt u Y in en drukt u op Enter.To stop the visual from running, enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

De cirkelkaart weergeven in de Power BI-serviceView the circle card in Power BI service

Om de visual van de cirkelkaart te testen in de Power BI-service, gebruiken we het rapport US Sales Analysis.To test the circle card visual in Power BI service, we'll use the US Sales Analysis report. U kunt dit rapport downloaden en uploaden naar de Power BI-service.You can download this report and upload it to Power BI service.

U kunt ook uw eigen rapport gebruiken om de visual van een cirkelkaart te testen.You can also use your own report to test the circle card visuals.

Notitie

Controleer eerst of u de instellingen voor het ontwikkelen van visuals hebt ingeschakeld.Before you continue, verify that you enabled the visuals developer settings.

  1. Meld u aan bij PowerBI.com en open het rapport US Sales Analysis.Sign in to PowerBI.com and open the US Sales Analysis report.

  2. Selecteer Meer opties > Bewerken.Select More options > Edit.

    Schermopname van de optie Bewerken in de Power B I-service.Screenshot of the edit option in Power B I service.

  3. Maak een nieuwe pagina om te testen door op de knop Nieuwe pagina te klikken onderaan de interface van de Power BI-service.Create a new page for testing, by clicking on the New page button at the bottom of the Power BI service interface.

    Schermopname van de knop Nieuwe pagina in de Power B I-service.Screenshot of the new page button in Power B I service.

  4. Selecteer de visual Ontwikkelaar in het deelvenster Visualisaties.From the Visualizations pane, select the Developer Visual.

    Schermopname van de visual Ontwikkelaar in het deelvenster Visualisaties.Screenshot of the developer visual in the visualizations pane.

    Deze visual (of visualisatie) staat voor de aangepaste visual die op uw computer wordt uitgevoerd.This visual represents the custom visual that you're running on your computer. Deze optie is alleen beschikbaar wanneer de instelling Aangepaste visuele foutopsporing inschakelen met de visual voor ontwikkelaars is ingeschakeld.It's only available when the custom visual debugging setting is enabled.

  5. Kijk of er een visual is toegevoegd aan het rapportcanvas.Verify that a visual was added to the report canvas.

    Schermopname van een nieuwe visual die aan het rapport is toegevoegd.Screenshot of the new visual added to the report.

    Dit is een eenvoudige visual die aangeeft hoe vaak de Update-methode van de visual is aangeroepen.This is a simple visual that displays the number of times its update method has been called. Op dit moment is dat nul omdat de visual nog geen gegevens ophaalt.At this stage, the visual does not retrieve any data.

    Notitie

    Als in de visual een bericht over een verbindingsfout wordt weergegeven, opent u een nieuw tabblad in de browser, gaat u naar https://localhost:8080/assets/status en geeft u uw browser toestemming om dit adres te gebruiken.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.

    Schermopname van de nieuwe visual met een bericht over een verbindingsfout.

  6. Selecteer de nieuwe visual, ga naar het deelvenster Velden , vouw Sales uit en selecteer Quantity.While the new visual is selected, go to the Fields pane, expand Sales , and select Quantity.

    Schermopname van het veld Quantity in de Power B I-service in de tabel Sales in het rapport U S Sales Analysis.Screenshot of the Power B I service quantity field in the sales table in the U S sales analysis report.

  7. Als u wilt testen hoe de visual reageert, wijzigt u het formaat van de visual. U ziet dan dat de waarde voor Update count telkens wordt verhoogd wanneer u het formaat van de visual wijzigt.To test how the visual is responding, resize it and notice that the Update count value increments every time you resize the visual.

    Schermopname van de nieuwe visual met een ander aantal updates, nadat het formaat van de visual is gewijzigd.Screenshot of the new visual displaying a different update count number, after being resized.

Visuele elementen en tekst toevoegenAdd visual elements and text

In dit gedeelte leert u hoe u van het visuele element een cirkel maakt en hoe u er tekst in kunt weergeven.In this section you'll learn how to turn your visual into a circle, and make it display text.

Notitie

In deze zelfstudie wordt Visual Studio Code (VS Code) gebruikt voor het ontwikkelen van de Power BI-visual.In this tutorial, Visual Studio Code (VS Code) is used for developing the Power BI visual.

Het visual-bestand wijzigenModify the visuals file

Pas het bestand visual.ts aan door een paar regels code te verwijderen en toe te voegen.Set up the visual.ts file by deleting and adding a few lines of code.

  1. Open het project in VS Code ( File > Open Folder ).Open your project in VS Code ( File > Open Folder ).

  2. Vouw in het deelvenster Explorer de map src uit en selecteert het bestand visual.ts.In the Explorer pane , expand the src folder, and select the file visual.ts.

    Schermopname van het bestand visual.ts in V S Code.Screenshot of accessing the visual.ts file in V S code.

    Belangrijk

    Bekijk de opmerkingen bovenaan het bestand visual.ts.Notice the comments at the top of the visual.ts file. U ziet dat u in overeenstemming met de voorwaarden van de MIT-licentie (Massachusetts Institute of Technology) gratis gebruik kunt maken van de pakketten met aangepaste Power BI-visuals.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 onderdeel van de overeenkomst moet u de opmerkingen aan de bovenkant van het bestand laten staan.As part of the agreement, you must leave the comments at the top of the file.

  3. Verwijder de volgende regels met code uit het bestand visual.ts.Remove the following code lines from the visual.ts file.

    • De regel voor het importeren van de VisualSettings :The VisualSettings import:

      import { VisualSettings } from "./settings";
      
    • De vier declaraties voor privévariabelen op klasseniveau.The four class-level private variable declarations.

    • Alle coderegels binnen de constructor.All the lines of code inside the constructor.

    • Alle coderegels binnen de methode update.All the lines of code inside the update method.

    • Alle resterende coderegels binnen de methode update , waaronder de methoden parseSettings en enumerateObjectInstances.All the remaining code lines below the update method, including the parseSettings and enumerateObjectInstances methods.

  4. Voeg de volgende regels met code toe aan het einde van de sectie import:Add the following lines of code at the end of the import section:

    • IVisualHost : een verzameling eigenschappen en services die kunnen worden gebruikt voor interactie met de visual-host (Power BI).IVisualHost - A collection of properties and services used to interact with the visual host (Power BI).

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

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

      Notitie

      Als u deze bibliotheek niet hebt geselecteerd tijdens de installatie, installeert u de D3-bibliotheek van JavaScript.If you didn't install this library as part of your setup, install the D3 JavaScript library.

  5. Voeg onder de klassedeclaratie Visual de volgende eigenschappen op klasseniveau in.Below the Visual class declaration, insert the following class level properties. U hoeft alleen de coderegels toe te voegen die beginnen met private.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. Sla het bestand visual.ts op.Save the visual.ts file.

Een cirkel en tekstelementen toevoegenAdd a circle and text elements

Voeg D3 SVG (Scalable Vector Graphics) toe.Add D3 Scalable Vector Graphics (SVG). Hierdoor kunt u drie vormen maken: een cirkel en twee tekstelementen.This enables creating three shapes: a circle, and two text elements.

  1. Open visual.ts in VS Code.Open visual.ts in VS code.

  2. Voeg de volgende code toe aan de constructor.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);
    

    Tip

    Om de leesbaarheid te verbeteren, wordt het aanbevolen om het document steeds opnieuw op te maken als u codefragmenten hebt ingevoegd.To improve readability, it's recommended that you format the document every time you copy code snippets into your project. Klik hiervoor met de rechtermuisknop ergens in VS Code en selecteer Format Document (Alt+Shift+F).Right-click anywhere in VS code, and select Format Document (Alt+Shift+F).

  3. Sla het bestand visual.ts op.Save the visual.ts file.

De breedte en hoogte instellenSet the width and height

Stel de breedte en hoogte van de visual in, om vervolgens de kenmerken en stijlen van de elementen van de visual te initialiseren.Set the width and height of the visual, and initialize the attributes and styles of the visual's elements.

  1. Open visual.ts in VS Code.Open visual.ts in VS Code.

  2. Voeg de volgende code toe aan de updatemethode.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. Sla het bestand visual.ts op.Save the visual.ts file.

(Optioneel) De code in het visual-bestand controleren(Optional) Review the code in the visuals file

Controleer of de code in het bestand visual.ts er als volgt uitziet: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");
    }
}

Het capabilities-bestand wijzigenModify the capabilities file

Verwijder overbodige regels met code uit het capabilities-bestand.Delete unneeded lines of code from the capabilities file.

  1. Open het project in VS Code ( File > Open Folder ).Open your project in VS Code ( File > Open Folder ).

  2. Selecteer het bestand capabilities.json.Select the capabilities.json file.

    Schermopname van het bestand capabilities.json in V S Code.Screenshot of accessing the capabilities.json file in V S code.

  3. Verwijder alle objectelementen (regels 14-60).Remove all the objects elements (lines 14-60).

  4. Sla het bestand capabilities.json op.Save the capabilities.json file.

De visual CircleCard opnieuw startenRestart the circle card visual

Stop de uitvoering van de visual en start deze opnieuw.Stop the visual from running and restart it.

  1. Druk hiervoor in het PowerShell-venster met de visual op Ctrl + C. Als wordt gevraagd of u de batchtaak wilt beëindigen, typt u Y in en drukt u op Enter.In the PowerShell window running the visual, enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

  2. Start de visual in PowerShell.In PowerShell, start the visual.

    pbiviz start
    

De visual testen met de toegevoegde elementenTest the visual with the added elements

Controleer of de zojuist toegevoegde elementen worden weergegeven in de visual.Verify that the visual displays the newly added elements.

  1. Open in de Power BI-service het rapport US Sales Analysis.In Power BI service, open the Power BI US Sales Analysis report. Als u een ander rapport gebruikt voor het ontwikkelen van een cirkelkaart, gaat u naar dat rapport.If you're using a different report to develop the circle card visual, navigate to that report.

  2. Zorg ervoor dat de visual de vorm van een cirkel heeft.Make sure that the visual is shaped as a circle.

    Schermopname van de cirkelkaart, in de vorm van een cirkel.Screenshot of the circle card visual shaped as a circle.

    Notitie

    Als de visual leeg is, sleept u het veld Quantity vanuit het deelvenster Fields naar de visual Ontwikkelaar.If the visual isn't displaying anything, from the Fields pane, drag the Quantity field into the developer visual.

  3. Wijzig het formaat van de visual.Resize the visual.

    U ziet dat de schaal van de cirkel en tekst wordt aangepast aan de afmetingen van de visual.Notice that the circle and text scale to fit the dimensions of the visual. De methode Update wordt aangeroepen wanneer u het formaat van de visual wijzigt, en als gevolg hiervan wordt de schaal van de visuele elementen opnieuw aangepast.The update method is called when you resize the visual, and as a result the visual elements get rescaled.

Automatisch opnieuw laden inschakelenEnable auto reload

U kunt instellen dat de visual automatisch opnieuw wordt geladen wanneer u projectwijzigingen opslaat.Use this setting to ensure that the visual is automatically reloaded each time you save project changes.

  1. Ga naar het rapport US Sales Analysis (of naar het project met uw visual van een cirkelkaart).Navigate to the Power BI US Sales Analysis report (or to the project that has your circle card visual).

  2. Selecteer de visual van de cirkelkaartSelect the circle card visual.

  3. Selecteer Automatisch opnieuw laden in-/uitschakelen op de zwevende werkbalk.In the floating toolbar, select Toggle Auto Reload.

    Schermopname van het klikken op de optie voor automatisch opnieuw laden in-/uitschakelen op de zwevende werkbalk van de visual van een cirkelkaart.Screenshot of clicking the toggle auto reload option, in the circle card visual floating toolbar.

Gegevens verwerken in de visualGet the visual to process data

In dit gedeelte definieert u gegevensrollen en toewijzingen van gegevensweergaven.In this section, you'll define data roles and data view mappings. U gaat de visual ook aanpassen om de naam weer te geven van de waarde in de visual.You'll also modify the visual to display the name of the value it's displaying.

Het capabilities-bestand configurerenConfigure the capabilities file

Bewerk het bestand capabilities.json zo dat de toewijzingen voor de gegevensrol en gegevensweergave worden gedefinieerd.Modify the capabilities.json file to define the data role and data view mappings.

  • De gegevensrol definiërenDefining the data role

    Definieer de matrix dataRoles met één gegevensrol van het type Measure.Define the dataRoles array with a single data role of the type measure. Deze gegevensrol krijgt de naam measure en wordt weergegeven als Measure.This data role is called measure , and is displayed as Measure. Door deze gegevensrol kan er nu een meetveld worden doorgegeven, of een samengevat veld.It allows passing either a measure field, or a field that's summed up.

    1. Open het bestand capabilities.json in VS Code.Open the capabilities.json file in VS Code.

    2. Verwijder alle inhoud van de matrix dataRoles (regels 3-12).Remove all the content inside the dataRoles array (lines 3-12).

    3. Voeg de volgende code toe aan de matrix dataRoles.Insert the following code to the dataRoles array.

      {
          "displayName": "Measure",
          "name": "measure",
          "kind": "Measure"
      }
      
    4. Sla het bestand capabilities.json op.Save the capabilities.json file.

  • De toewijzing van de gegevensweergave definiërenDefining the data view mapping

    Definieer een bestand met de naam measure in de matrix dataViewMappings.Define a filed called measure in the dataViewMappings array. Dit veld kan worden doorgegeven aan de gegevensrol.This field can be passed to the data role.

    1. Open het bestand capabilities.json in VS Code.Open the capabilities.json file in VS Code.

    2. Verwijder alle inhoud van de matrix dataViewMappings (regels 10-30).Remove all the content inside the dataViewMappings array (lines 10-30).

    3. Voeg de volgende code toe aan de matrix dataViewMappings.Insert the following code to the dataViewMappings array.

      {
          "conditions": [
              { "measure": { "max": 1 } }
          ],
          "single": {
              "role": "measure"
          }
      }
      
    4. Sla het bestand capabilities.json op.Save the capabilities.json file.

(Optioneel) De codewijzigingen in het capabilities-bestand controleren(Optional) Review the capabilities file code changes

Controleer of in de visual van de cirkelkaart het veld measure wordt weergegeven en controleer de wijzigingen die u hebt aangebracht met behulp van de op Show Dataview.Verify that the circle card visual displays the measure field, and review the changes you made using the Show Dataview option.

  1. Open in de Power BI-service het rapport US Sales Analysis.In Power BI service, open the Power BI US Sales Analysis report. Als u een ander rapport gebruikt voor het ontwikkelen van een cirkelkaart, gaat u naar dat rapport.If you're using a different report to develop the circle card visual, navigate to that report.

  2. U ziet dat de visual nu kan worden geconfigureerd met een veld met de naam Measure.Notice that the circle card visual can now be configured with a field titled Measure. U kunt elementen vanuit het deelvenster Velden slepen naar het veld Measure.You can drag and drop elements from the Fields pane into the Measure field.

    Schermopname van het omkaderde veld Measure in het deelvenster Visualisaties van de Power BI-service.Screenshot of the circle card measure filed, in the Power BI service visualization pane.

    Notitie

    Het visualproject bevat nog geen logica voor gegevensbinding.The visual project does not yet include data binding logic.

  3. Selecteer DataView weergeven op de zwevende werkbalk.In the floating toolbar, select Show Dataview.

    Schermopname van de knop DataView weergeven op de zwevende werkbalk van de visual van de cirkelkaart.Screenshot of the show dataview button, located in the circle card floating toolbar.

  4. Selecteer de drie puntjes om de weergave uit te vouwen en selecteer enkel om de waarde weer te geven.Select the three dots to expand the display, and select single to view the value.

    Schermopname van de waarde voor value zoals deze wordt weergegeven met de optie DataView weergeven.Screenshot of the value figure as it's displayed in the circle card show dataview option.

  5. Vouw metadata uit en daarna de matrix columns. Bekijk vervolgens de waarden voor format en displayName.Expand metadata , then the columns array, and review the format and displayName values.

    Schermopname van de waarde voor format en displayName zoals deze worden weergegeven met de optie DataView weergeven.Screenshot of the format and display name values as displayed in the circle card show dataview option.

  6. Als u weer terug wilt naar de visual, selecteert u DataView weergeven in de werkbalk die boven de visual zweeft.To toggle back to the visual, in the toolbar floating above the visual, select Show Dataview.

De visual configureren om gegevens te gebruikenConfigure the visual to consume data

Pas het bestand visual.ts zo aan dat de visual van de cirkelkaart gegevens kan gebruiken.Make changes to the visual.ts file, so that the circle card visual will be able to consume data.

  1. Open het bestand visual.ts in VS Code.Open the visual.ts file in VS Code.

  2. Voeg de volgende regel toe om de DataView-interface te importeren uit de powerbi-module.Add the following line to import the DataView interface from the powerbi module.

    import DataView = powerbi.DataView;
    
  3. Ga als volgt te werk in de update -methode:In the update method, do the following:

    • Voeg de volgende instructie toe als de eerste instructie.Add the following statement as the first statement. Deze instructie wijst dataView toe aan een variabele voor eenvoudige toegang en declareert de variabele om te verwijzen naar het object dataView.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];
      
    • Vervang .text("waarde") door deze regel code:Replace .text("Value") with this line of code:

      .text(<string>dataView.single.value)
      
    • Vervang .text("label") door deze regel code:Replace .text("Label") with this line of code:

      .text(dataView.metadata.columns[0].displayName)
      
  4. Sla het bestand visual.ts op.Save the visual.ts file.

  5. Bekijk de visual in de Power BI-service.Review the visual in Power BI service. In de visual worden nu de waarde en de weergavenaam weergegeven.The visual now displays the value and the display name.

Volgende stappenNext steps