Selvstudium: Udvikling af en Power BI-visualiseringTutorial: Developing a Power BI visual

Vi gør det nemt for udviklere at tilføje brugerdefinerede visuals i Power BI, som kan bruges i dashboards og rapporter.We’re enabling developers to easily add custom visuals into Power BI for use in dashboard and reports. For at hjælpe dig i gang har vi udgivet koden til alle vores visualiseringer på GitHub.To help you get started, we’ve published the code for all of our visualizations to GitHub.

Ud over visualiseringssystemet stiller vi vores testpakke og -værktøjer til rådighed, så vores community kan udarbejde visuals i høj kvalitet til Power BI.Along with the visualization framework, we’ve provided our test suite and tools to help the community build high-quality custom visuals for Power BI.

I dette selvstudium vises, hvordan du udvikler en brugerdefineret Power BI-visual, der kaldes Circle Card, for at få vist en formateret målingsværdi i en cirkel.This tutorial shows you how to develop a Power BI custom visual named Circle Card to display a formatted measure value inside a circle. Visualen Circle Card understøtter tilpasning af fyldfarve og konturens tykkelse.The Circle Card visual supports customization of fill color and thickness of its outline.

I Power BI Desktop-rapporten er kortene ændret for at blive til visuals af typen Circle Card.In the Power BI Desktop report, the cards are modified to become Circle Cards.

Eksempeloutput af brugerdefineret visual i Power BI

I dette selvstudium lærer du, hvordan du kan:In this tutorial, you learn how to:

  • Opret en brugerdefineret visual i Power BI.Create a Power BI custom visual.
  • Udvikl den brugerdefinerede visualiseringer med visuelle D3-elementer.Develop the custom visual with D3 visual elements.
  • Konfigurer databinding med visualiseringer.Configure data binding with the visual elements.
  • Formatér dataværdier.Format data values.

ForudsætningerPrerequisites

Konfiguration af udviklermiljøSetting up the developer environment

Ud over forudsætningerne er der nogle flere værktøjer, du har brug for at installere.In addition to the prerequisites, there are a few more tools you need to install.

Installation af node.jsInstalling node.js

  1. Hvis du vil installere Node.js, skal du gå til Node.js i en webbrowser.To install Node.js, in a web browser, navigate to Node.js.

  2. Download MSI-installationsprogrammet med de nyeste funktioner.Download the latest feature MSI installer.

  3. Kør installationsprogrammet, og udfør derefter installationstrinnene.Run the installer, and then follow the installation steps. Acceptér vilkårene i licensaftalen og alle standarder.Accept the terms of the license agreement and all defaults.

     Installation af Node.jsNode.js setup

  4. Genstart computeren.Restart the computer.

Installation af pakkerInstalling packages

Nu skal du installere pakken pbiviz.Now you need to install the pbiviz package.

  1. Åbn Windows PowerShell, når computeren er genstartet.Open Windows PowerShell after the computer has been restarted.

  2. Angiv følgende kommando for at installere pbiviz.To install pbiviz, enter the following command.

    npm i -g powerbi-visuals-tools
    

Oprettelse og installation af et certifikatCreating and installing a certificate

WindowsWindows

  1. Du skal køre følgende kommando for at oprette og installere et certifikat.To create and install a certificate, enter the following command.

    pbiviz --install-cert
    

    Den returnerer et resultat, der opretter et adgangsudtryk.It returns a result that produces a passphrase. I dette tilfælde er adgangsudtrykket 15105661266553327 .In this case, the passphrase is 15105661266553327. Guiden til import af certifikatet startes også.It also starts the Certificate Import Wizard.

    Certifikat oprettet via PowerShell

  2. I guiden til import af certifikatet skal du bekræfte, at lagerplaceringen er angivet til den aktuelle bruger.In the Certificate Import Wizard, verify that the store location is set to Current User. Vælg derefter Næste.Then select Next.

    Installation af certifikat

  3. I trinnet Fil, der skal importeres skal du vælge Næste.At the File to Import step, select Next.

  4. I trinnet Beskyttelse af privat nøgle skal du indsætte det adgangsudtryk, du modtog, da du oprettede certifikatet, i feltet Adgangskode. Igen i dette tilfælde er det 15105661266553327 .At the Private Key Protection step, in the Password box, paste the passphrase you received from creating the cert. Again, in this case it is 15105661266553327.

    Kopiér adgangsudtryk

  5. I trinnet Certifikatlager skal du vælge indstillingen Placer alle certifikater i følgende lager.At the Certificate Store step, select the Place all certificates in the Following store option. Vælg derefter Gennemse.Then select Browse.

    Alle certifikater i følgende lager

  6. Vælg Nøglecentre, der er tillid til i vinduet Vælg certifikatlager, og vælg derefter OK.In the Select Certificate Store window, select Trusted Root Certification Authorities and then select OK. Vælg derefter Næste på skærmen Certifikatlager.Then select Next on the Certificate Store screen.

    Rodcertifikat, der er tillid til

  7. Fuldfør importen ved at vælge Udfør.To complete the import, select Finish.

  8. Hvis du modtager en sikkerhedsadvarsel, skal du vælge Ja.If you receive a security warning, select Yes.

    Sikkerhedsadvarsel

  9. Når du får besked om, at importen er fuldført, skal du vælge OK.When notified that the import was successful, select OK.

    Certifikatet er importeret

Vigtigt

Luk ikke Windows PowerShell-sessionen.Do not close the Windows PowerShell session.

OSXOSX

  1. Hvis låsen øverst til venstre er låst, så skal du vælge den for at låse den op.If the lock in the upper left is locked, select it to unlock. Find localhost, og dobbeltklik på certifikatet.Search for localhost and double-click on the certificate.

    Installér SSL-certifikat 1 på OSX

  2. Vælg Hav altid tillid til, og luk vinduet.Select Always Trust and close the window.

    Installér SSL-certifikat 2 på OSX

  3. Indtast dit brugernavn og din adgangskode.Enter your username and password. Vælg Opdater indstillinger.Select Update Settings.

    Installér SSL-certifikat 3 på OSX

  4. Luk alle åbne browsere.Close any browsers that you have open.

Bemærk

Hvis certifikatet ikke genkendes, skal du muligvis genstarte computeren.If the certificate is not recognized, you may need to restart your computer.

Opret en brugerdefineret visualCreating a custom visual

Nu, hvor du har konfigureret miljøet, er tiden inde til at oprette din brugerdefinerede visual.Now that you have set up your environment, it is time to create your custom visual.

Du kan downloade hele kildekoden til dette selvstudium.You can download the full source code for this tutorial.

  1. Kontroller, at pakken Power BI Visual Tools er installeret.Verify that the Power BI Visual Tools package has been installed.

    pbiviz
    

    Du bør se hjælp-outputtet.You should see the help output.

    
         +syyso+/
     oms/+osyhdhyso/
     ym/       /+oshddhys+/
     ym/              /+oyhddhyo+/
     ym/                     /osyhdho
     ym/                           sm+
     ym/               yddy        om+
     ym/         shho /mmmm/       om+
         /    oys/ +mmmm /mmmm/       om+
     oso  ommmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     ymmmy smmmh +mmmm /mmmm/       om+
     +dmd+ smmmh +mmmm /mmmm/       om+
             /hmdo +mmmm /mmmm/ /so+//ym/
                 /dmmh /mmmm/ /osyhhy/
                     //   dmmd
                         ++
    
         PowerBI Custom Visual Tool
    
     Usage: pbiviz [options] [command]
    
     Commands:
    
     new [name]        Create a new visual
     info              Display info about the current visual
     start             Start the current visual
     package           Package the current visual into a pbiviz file
     update [version]  Updates the api definitions and schemas in the current visual. Changes the version if specified
     help [cmd]        display help for [cmd]
    
     Options:
    
     -h, --help      output usage information
     -V, --version   output the version number
     --install-cert  Install localhost certificate
     

  2. Gennemse outputtet, herunder listen over understøttede kommandoer.Review the output, including the list of supported commands.

    Understøttede kommandoer

  3. Du kan oprette et projekt med brugerdefinerede visuals ved at indtaste følgende kommando.To create a custom visual project, enter the following command. CircleCard er navnet på projektet.CircleCard is the name of the project.

    pbiviz new CircleCard
    

    Nyt resultat af CircleCard

    Bemærk

    Du kan oprette det nye projekt på den aktuelle placering i prompten.You create the new project at the current location of the prompt.

  4. Gå til projektmappen.Navigate to the project folder.

    cd CircleCard
    
  5. Slet brugerdefineret visual.Start the custom visual. Din CircleCard-visual kører nu, mens den hostes på din computer.Your CircleCard visual is now running while being hosted on your computer.

    pbiviz start
    

    Start med at køre den brugerdefinerede visual

Vigtigt

Luk ikke Windows PowerShell-sessionen.Do not close the Windows PowerShell session.

Test den brugerdefinerede visualTesting the custom visual

I dette afsnit tester vi den brugerdefinerede visual CircleCard ved at overføre en Power BI Desktop-rapport og derefter redigere rapporten, så den viser den brugerdefinerede visual.In this section, we are going to test the CircleCard custom visual by uploading a Power BI Desktop report and then editing the report to display the custom visual.

  1. Log på PowerBI.com > gå til tandhjulsikonet > vælg derefter Indstillinger.Sign in to PowerBI.com > go to the Gear icon > then select Settings.

    Indstillinger for Power BI

  2. Vælg Udvikler, og markér derefter afkrydsningsfeltet Aktivér udviklervisualisering til test.Select Developer then check the Enable Developer Visual for testing checkbox.

    Indstillinger for udviklerside

  3. Overfør en Power BI Desktop-rapport.Upload a Power BI Desktop report.

    Hent data > Filer > Lokal fil.Get Data > Files > Local File.

    Du kan downloade et eksempel på en Power BI Desktop-rapport, hvis du ikke har oprettet én allerede.You can download a sample Power BI Desktop report if you do not have one created already.

    Hent data Lokal filGet Data Local File

    Hvis du vil have vist rapporten, skal du nu vælge US_Sales_Analysis i sektionen Rapport i navigationsruden til venstre.Now to view the report, select US_Sales_Analysis from the Report section in the navigation pane on the left.

    Desktop-eksempel på brugerdefineret visual

  4. Nu skal du redigere rapporten i Power BI-tjenesten.Now you need to edit the report while in the Power BI service.

    Gå til Rediger rapport.Go to Edit report.

    Rediger rapport

  5. Vælg Udviklervisual i ruden Visualisering.Select the Developer Visual from the Visualizations pane.

    Udviklervisual

    Bemærk

    Denne visualisering repræsenterer den brugerdefinerede visual, som du har startet på din computer.This visualization represents the custom visual that you started on your computer. Den er kun tilgængelig, når udviklerindstillingerne er blevet aktiveret.It is only available when the developer settings have been enabled.

  6. Bemærk, at en visualisering er føjet til rapportlærredet.Notice that a visualization was added to the report canvas.

    Ny visual

    Bemærk

    Dette er en meget simpel visual, der viser det antal gange, opdateringsmetoden er blevet kaldt.This is a very simple visual that displays the number of times its Update method has been called. I denne fase henter visualen ingen data.At this stage, the visual does not yet retrieve any data.

  7. Når du vælger den nye visual i rapporten, skal du gå til ruden Felter > udvide Salg > vælge Antal.While selecting the new visual in the report, Go to the Fields Pane > expand Sales > select Quantity.

    Antal Salg

  8. Derefter kan du teste den nye visual ved at tilpasse størrelsen på visualen, og læg mærke til intervallerne for opdateringsværdierne.Then to test the new visual, resize the visual and notice the update value increments.

    Tilpas størrelsen på en visual

Hvis den brugerdefinerede visual ikke længere skal køre i PowerShell, skal du trykke på Ctrl + C.To stop the custom visual running in PowerShell, enter Ctrl+C. Når du bliver bedt om at afslutte batchjobbet, skal du trykke på Y og derefter trykke på Enter.When prompted to terminate the batch job, enter Y, then press Enter.

Tilføj visualiseringerAdding visual elements

Nu skal du installere JavaScript-biblioteket D3.Now you need to install the D3 JavaScript library. D3 er et JavaScript-bibliotek til oprettelse af dynamiske, interaktive datavisualiseringer i webbrowsere.D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. Det bruger SVG HTML5 og CSS-standarder, der er implementeret i vid udstrækning.It makes use of widely implemented SVG HTML5, and CSS standards.

Nu kan du udvikle den brugerdefinerede visual til at vise en cirkel med tekst.Now you can develop the custom visual to display a circle with text.

Bemærk

Mange tekstposter i dette selvstudium kan kopieres herfra.Many text entries in this tutorial can be copied from here.

  1. Hvis du vil installere D3-biblioteket i PowerShell, skal du angive kommandoen nedenfor.To install the D3 library in PowerShell, enter the command below.

    npm i d3@3.5.5 --save
    

    Installér D3-bibliotek

  2. Hvis du vil installere typedefinitioner for D3-biblioteket, skal du angive kommandoen nedenfor.To install type definitions for the D3 library, enter the command below.

    npm i @types/d3@3.5
    

    Installér D3-bibliotek

    Denne kommando installerer TypeScript-definitioner, der er baseret på JavaScript-filer, så du kan udvikle den brugerdefinerede visual i TypeScript (som indeholder JavaScript).This command installs TypeScript definitions based on JavaScript files, enabling you to develop the custom visual in TypeScript (which is a superset of JavaScript). Visual Studio Code er en ideel IDE til udvikling af TypeScript-programmer.Visual Studio Code is an ideal IDE for developing TypeScript applications.

  3. Start Visual Studio Code.Launch Visual Studio Code.

    Du kan starte Visual Studio Code fra PowerShell ved hjælp af følgende kommando.You can launch Visual Studio Code from PowerShell by using the following command.

    code .
    
  4. I ruden Stifinder skal du udvide mappen node_modules for at kontrollere, at D3-biblioteket blev installeret.In the Explorer pane, expand the node_modules folder to verify that the d3 library was installed.

    D3-bibliotek i Visual Studio Code

  5. Se TypeScript-filen index.d.ts ved at udvide node_modules > @types > D3 i ruden Stifinder.Notice the TypeScript file, index.d.ts, by expanding node_modules > @types > d3 in the Explorer pane.

    Filen Index.d.TS

  6. Vælg filen pbiviz.json.Select the pbiviz.json file.

  7. Hvis du vil registrere D3-biblioteket, skal du angive følgende filreference i externalJS-matrixen.To register the d3 library, enter the following file reference into the externalJS array. Husk at tilføje et komma mellem den eksisterende filreference og den nye filreference.Be sure to add a comma between the existing file reference and the new file reference.

    "node_modules/d3/d3.min.js"
    

    Tilføjelse af node_modules/d3/d3.min.js

  8. Gem ændringerne af filen pbiviz.json.Save the pbiviz.json file changes.

Udvikling af visualiseringerDeveloping the visual elements

Nu kan vi undersøge, hvordan du kan udvikle den brugerdefinerede visual for at få vist en cirkel og eksempeltekst.Now we can explore how to develop the custom visual to show a circle and sample text.

  1. I ruden Stifinder skal du udvide mappen src og derefter vælge visual.ts.In the Explorer pane, expand the src folder and then select visual.ts.

    Bemærk

    Læg mærke til kommentarerne øverst i filen visual.ts.Notice the comments at the top of the visual.ts file. Tilladelsen til at bruge de brugerdefinerede visualpakker i Power BI er gratis i henhold til betingelserne i MIT-licensen.Permission to use the Power BI custom visual packages is granted free of charge under the terms of the MIT License. Som en del af aftalen skal du lade kommentarerne øverst i filen stå.As part of the agreement, you must leave the comments at the top of the file.

  2. Fjern følgende standardlogik for den brugerdefinerede visual fra klassen Visual.Remove the following default custom visual logic from the Visual class.

    • De fire erklæringer om private variabler på klasseniveau.The four class-level private variable declarations.
    • Alle kodelinjer fra konstruktøren.All lines of code from the constructor.
    • Alle kodelinjer fra opdateringsmetoden.All lines of code from the update method.
    • Alle øvrige linjer i modulet, herunder metoderne parseSettings og enumerateObjectInstances.All remaining lines within the module, including the parseSettings and enumerateObjectInstances methods.

    Kontrollér, at modulkoden ser ud som følgende.Verify that the module code looks like the following.

    module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
    
        constructor(options: VisualConstructorOptions) {
    
        }
    
        public update(options: VisualUpdateOptions) {
    
            }
        }
    }
    
  3. Under erklæringen for klassen Visual skal du indsætte følgende egenskaber på klasseniveau.Beneath the Visual class declaration, insert the following class-level properties.

     private host: IVisualHost;
     private svg: d3.Selection<SVGElement>;
     private container: d3.Selection<SVGElement>;
     private circle: d3.Selection<SVGElement>;
     private textValue: d3.Selection<SVGElement>;
     private textLabel: d3.Selection<SVGElement>; 
    

    Egenskaber for filen Visual.TS på klasseniveau

  4. Føj følgende kode til konstruktøren.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);
    

    Denne kode tilføjer en SVG-gruppe i visualen og tilføjer derefter tre figurer: en cirkel og to tekstelementer.This code adds an SVG group inside the visual and then adds three shapes: a circle and two text elements.

    Hvis du vil formatere koden i dokumentet, skal du højreklikke et vilkårligt sted i Visual Studio Code-dokumentet og derefter vælge Formatér dokument.To format the code in the document, right-select anywhere in the Visual Studio Code document, and then select Format Document.

    Formatér dokument

    For at forbedre læsbarheden anbefales det, at du formaterer dokumentet, hver gang du indsætter kodestykker.To improve readability, it is recommended that you format the document every time that paste in code snippets.

  5. Føj følgende kode til opdateringsmetoden.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,
     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,
     cx: width / 2,
     cy: height / 2
    });
    let fontSizeValue: number = Math.min(width, height) / 5;
    this.textValue
     .text("Value")
     .attr({
         x: "50%",
         y: "50%",
         dy: "0.35em",
         "text-anchor": "middle"
     }).style("font-size", fontSizeValue + "px");
    let fontSizeLabel: number = fontSizeValue / 4;
    this.textLabel
     .text("Label")
     .attr({
         x: "50%",
         y: height / 2,
         dy: fontSizeValue / 1.2,
         "text-anchor": "middle"
     })
     .style("font-size", fontSizeLabel + "px");
    

    Denne kode angiver bredden og højden af visualen og initialiserer derefter attributterne og typografierne for visualiseringerne.This code sets the width and height of the visual, and then initializes the attributes and styles of the visual elements.

  6. Gem filen visual.ts.Save the visual.ts file.

  7. Vælg filen capabilities.json.Select the capabilities.json file.

    På linje 14 skal du fjerne hele objektelementet (linje 14-60).At line 14, remove the entire objects element (lines 14-60).

  8. Gem filen capabilities.json.Save the capabilities.json file.

  9. I PowerShell skal du starte den brugerdefinerede visual.In PowerShell, start the custom visual.

    pbiviz start
    

Slå automatisk genindlæsning til/fraToggle auto reload

  1. Gå tilbage til Power BI-rapporten.Navigate back to the Power BI report.

  2. På værktøjslinjen, der flyder over udviklervisualen, skal du vælge Slå automatisk genindlæsning til/fra.In the toolbar floating above the developer visual, select the Toggle Auto Reload.

    Slå automatisk genindlæsning til/fra

    Denne indstilling sikrer, at visualen automatisk genindlæses, hver gang du gemmer projektændringer.This option ensures that the visual is automatically reloaded each time you save project changes.

  3. Fra ruden Felter skal du trække feltet Antal til udviklervisualen.From the Fields pane, drag the Quantity field into the developer visual.

  4. Kontrollér, at visualen ser ud som følgende.Verify that the visual looks like the following.

    Udviklervisual i form af cirkel

  5. Tilpas størrelsen på visualen.Resize the visual.

    Bemærk, at cirklen og tekstværdien skaleres, så det passer til den tilgængelige dimension af visualen.Notice that the circle and text value scales to fit the available dimension of the visual.

    Opdateringsmetoden kaldes løbende i forbindelse med ændring af størrelsen på visualen, og det resulterer i glidende tilpasning af visualiseringer.The update method is called continuously with resizing the visual, and it results in the fluid rescaling of the visual elements.

    Nu har du udviklet visualiseringer.You have now developed the visual elements.

  6. Fortsæt med at køre visualen.Continue running the visual.

Konfiguration af databindingConfiguring data binding

Definer datarollerne og tilknytningerne af datavisninger, og rediger derefter logikken for den brugerdefinerede visual for at få vist værdien og det viste navn for en måling.Define the data roles and data view mappings, and then modify the custom visual logic to display the value and display name of a measure.

Konfiguration af funktionerneConfiguring the capabilities

Rediger filen capabilities.json for at definere datarollen og tilknytningerne af datavisninger.Modify the capabilities.json file to define the data role and data view mappings.

  1. I Visual Studio Code skal du finde filen capabilities.json, gå til matrixen dataRoles og fjerne alt indhold (linje 3-12).In Visual Studio code, in the capabilities.json file, from inside the dataRoles array, remove all content (lines 3-12).

  2. I matrixen dataRoles skal du indsætte følgende kode.Inside the dataRoles array, insert the following code.

    {
     "displayName": "Measure",
     "name": "measure",
     "kind": "Measure"
    }
    

    Matrixen dataRoles definerer nu en enkelt datarolle af typen måling, som hedder måling og vises som Måling.The dataRoles array now defines a single data role of type measure, that is named measure, and displays as Measure. Denne datarolle gør det muligt at overføre enten et målingsfelt eller et felt, der er opsummeret.This data role allows passing either a measure field, or a field that is summarized.

  3. Fra matrixen dataViewMappings skal du fjerne alt indhold (linje 10-31).From inside the dataViewMappings array, remove all content (lines 10-31).

  4. I matrixen dataViewMappings skal du indsætte følgende indhold.Inside the dataViewMappings array, insert the following content.

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

    I matrixen dataViewMappings defineres nu ét felt, der kan overføres til datarollen med navnet måling.The dataViewMappings array now defines one field can be passed to the data role named measure.

  5. Gem filen capabilities.json.Save the capabilities.json file.

  6. Bemærk, at visualen nu kan konfigureres med måling i Power BI.In Power BI, notice that the visual now can be configured with Measure.

    Antal Måling

    Bemærk

    Projektet med visuals indeholder endnu ikke logik, der binder data.The visual project does not yet include data binding logic.

Udforskning af datavisningenExploring the dataview

  1. På værktøjslinjen, der flyder over visualen, skal du vælge Vis datavisning.In the toolbar floating above the visual, select Show Dataview.

    Vis datavisning

  2. Udvid ned til enkelt, og læg mærke til værdien.Expand down into single, and then notice the value.

    Udvid ned til værdi

  3. Udvid ned til metadata og derefter til matrixen columns, og læg især mærke til værdierne for format og displayName.Expand down into metadata, and then into the columns array, and in particular notice the format and displayName values.

    Værdi for Displayname

  4. Hvis du vil skifte tilbage til visualen, skal du vælge Vis datavisning på værktøjslinjen, der flyder over visualen.To toggle back to the visual, in the toolbar floating above the visual, select Show Dataview.

    Skift tilbage

Konfiguration af databindingConfiguring data binding

  1. I Visual Studio Code skal du i filen visual.ts tilføje følgende sætning som den første sætning for opdateringsmetoden.In Visual Studio Code, in the visual.ts file, add the following statement as the first statement of the update method.

    let dataView: DataView = options.dataViews[0];
    

    Datavisning i opdateringsmatrix

    Denne sætning tildeler dataView til en variabel for at give nem adgang og erklærer, at variablen skal referere til objektet dataView.This statement assigns the dataView to a variable for easy access, and declares the variable to reference the dataView object.

  2. I opdateringsmetoden skal du erstatte .text("Value") med følgende.In the update method, replace .text("Value") with the following.

    .text(dataView.single.value as string)
    

    Erstat textValue

  3. I opdateringsmetoden skal du erstatte .text("Label") med følgende.In the update method, replace .text("Label") with the following.

    .text(dataView.metadata.columns[0].displayName)
    

    Erstat textLabel

  4. Gem filen visual.ts.Save the visual.ts file.

  5. I Power BI skal du gennemse visualen, som nu viser værdien og det viste navn.In Power BI, review the visual, which now displays the value and the display name.

Du har nu konfigureret datarollerne og bundet visualen til datavisningen.You have now configured the data roles and bound the visual to the dataview.

I det næste selvstudium lærer du, hvordan du føjer formateringsindstillinger til den brugerdefinerede visual.In the next tutorial you learn how to add formatting options to the custom visual.

FejlfindingDebugging

Se fejlfindingsvejledningen for tips til fejlfinding af et brugerdefineret visual.For tips about debugging your custom visual, see the debugging guide.

Næste trinNext steps