チュートリアル:Power BI の円形カード視覚化を開発するTutorial: Develop a Power BI circle card visual

開発者は、Power BI の独自の視覚化を作成できます。As a developer you can create your own Power BI visuals. これらの視覚化は、自分で、組織で、またはサードパーティで使用できます。These visuals can be used by you, your organization or by third parties.

このチュートリアルでは、円の中に書式設定された測定値が表示される、円形カードという名前の Power BI 視覚化を開発します。In this tutorial, you'll develop a Power BI visual named circle card that displays a formatted measure value inside a circle. 円形カード視覚化を使用すると、塗りつぶしの色と輪郭の太さのカスタマイズがサポートされます。The circle card visual supports customization of fill color and outline thickness.

このチュートリアルでは、以下の内容を学習します。In this tutorial, you learn how to:

  • 視覚化の開発プロジェクトを作成します。Create a development project for your visual.
  • D3 視覚化要素を使用して視覚化を開発します。Develop your visual with D3 visual elements.
  • データを処理するように視覚化を構成します。Configure your visual to process data.

前提条件Prerequisites

Power BI の独自の視覚化の開発を始める前に、このセクションに記載されているすべてのものがあることを確認してください。Before you start developing your Power BI visual, verify that you have everything listed in this section.

開発プロジェクトを作成するCreate a development project

このセクションでは、円カード視覚化用のプロジェクトを作成します。In this section you'll create a project for the circle card visual.

  1. PowerShell を開き、プロジェクトを作成するフォルダーに移動します。Open PowerShell and navigate to the folder you want to create your project in.

  2. 次のコマンドを入力します。Enter the following command:

    pbiviz new CircleCard
    
  3. プロジェクトのフォルダーに移動します。Navigate to the project's folder.

    cd CircleCard
    
  4. 円形カード視覚化を開始します。Start the circle card visual. これで、お使いのコンピューターでホストされている間、視覚化が実行されるようになりました。Your visual is now running while being hosted on your computer.

    pbiviz start
    

    重要

    チュートリアルを終えるまで、PowerSell ウィンドウを閉じないでください。Do not close the PowerSell window until the end of the tutorial. 視覚化の実行を停止するには、Ctrl + C キーを押し、バッチ ジョブを終了するように求められたら、「Y」と入力して Enter キーを押します。To stop the visual from running, enter Ctrl+C and if prompted to terminate the batch job, enter Y, and press Enter.

Power BI サービスで円形カードを表示するView the circle card in Power BI service

Power BI サービスで円形カード視覚化をテストするため、 US Sales Analysis レポートを使用します。To test the circle card visual in Power BI service, we'll use the US Sales Analysis report. このレポートをダウンロードして、Power BI サービスにアップロードできます。You can download this report and upload it to Power BI service.

また、独自のレポートを使用して、円形カード視覚化をテストすることもできます。You can also use your own report to test the circle card visuals.

注意

続ける前に、視覚化開発者の設定を有効にしてあることを確認してください。Before you continue, verify that you enabled the visuals developer settings.

  1. PowerBI.com にサインインし、 US Sales Analysis レポートを開きます。Sign in to PowerBI.com and open the US Sales Analysis report.

  2. [その他のオプション] > [編集] を選択します。Select More options > Edit.

    Power BI サービスでの [編集] オプションのスクリーンショット。Screenshot of the edit option in Power B I service.

  3. Power BI サービスのインターフェイスの下部にある [新しいページ] ボタンをクリックして、テスト用の新しいページを作成します。Create a new page for testing, by clicking on the New page button at the bottom of the Power BI service interface.

    Power BI サービスでの [新しいページ] ボタンのスクリーンショット。Screenshot of the new page button in Power B I service.

  4. [視覚化] ペインで、 [開発者向けビジュアル] を選択します。From the Visualizations pane, select the Developer Visual.

    [視覚化] ペインの [開発者向けビジュアル] のスクリーンショット。Screenshot of the developer visual in the visualizations pane.

    この視覚化は、コンピューターで実行しているカスタム視覚化を表わします。This visual represents the custom visual that you're running on your computer. カスタム視覚化のデバッグの設定が有効になっている場合にのみ使用できます。It's only available when the custom visual debugging setting is enabled.

  5. 視覚化がレポート キャンバスに追加されたことを確認します。Verify that a visual was added to the report canvas.

    レポートに追加された新しい視覚化のスクリーンショット。Screenshot of the new visual added to the report.

    これは、その update メソッドが呼び出された回数を表示する簡単な視覚化です。This is a simple visual that displays the number of times its update method has been called. この段階では、視覚化にはデータは取得されていません。At this stage, the visual does not retrieve any data.

    注意

    視覚化に接続エラー メッセージが表示される場合は、ブラウザーで新しいタブを開き、https://localhost:8080/assets/status に移動して、ブラウザーでこのアドレスを使用することを承認します。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.

    接続エラーが表示されている新しい視覚化のスクリーンショット。

  6. 新しい視覚化が選択されている状態で、 [フィールド] ペインに移動し、 Sales を選択して、 Quantity を選択します。While the new visual is selected, go to the Fields pane, expand Sales , and select Quantity.

    Power BI サービスでの、US Sales Analysis レポートの Sales テーブルの Quantity フィールドのスクリーンショット。Screenshot of the Power B I service quantity field in the sales table in the U S sales analysis report.

  7. 視覚化がどのように応答するかをテストするには、そのサイズを変更し、視覚化のサイズを変更するたびに Update count の値が増えることを確認します。To test how the visual is responding, resize it and notice that the Update count value increments every time you resize the visual.

    サイズの変更後に異なる更新回数が表示される新しい視覚化のスクリーンショット。Screenshot of the new visual displaying a different update count number, after being resized.

視覚化要素とテキストを追加するAdd visual elements and text

このセクションでは、視覚化を円形に変換し、テキストが表示されるようにする方法について説明します。In this section you'll learn how to turn your visual into a circle, and make it display text.

注意

このチュートリアルでは、Visual Studio Code (VS Code) を使用して、Power BI の視覚化を開発します。In this tutorial, Visual Studio Code (VS Code) is used for developing the Power BI visual.

視覚化のファイルを変更するModify the visuals file

いくつかのコード行を削除して追加することにより、 visual.ts ファイルを設定します。Set up the visual.ts file by deleting and adding a few lines of code.

  1. VS Code でプロジェクトを開きます ( [ファイル] > [フォルダーを開く] )。Open your project in VS Code ( File > Open Folder ).

  2. [エクスプローラー] ペイン[src] フォルダーを展開して、 visual.ts ファイルを選択します。In the Explorer pane , expand the src folder, and select the file visual.ts.

    VS Code での visual.ts ファイルへのアクセスのスクリーンショット。Screenshot of accessing the visual.ts file in V S code.

    重要

    visual.ts ファイルの最上部のコメントに注目してください。Notice the comments at the top of the visual.ts file. Massachusetts Institute of Technology (MIT) ライセンス契約の下で、Power BI の視覚化パッケージを使用する権限が、無料で付与されます。Permission to use the Power BI visual packages is granted free of charge under the terms of the Massachusetts Institute of Technology (MIT) License. 契約の一環として、ファイルの最上部に必ずコメントを残す必要があります。As part of the agreement, you must leave the comments at the top of the file.

  3. visual.ts ファイルから、次のコード行を削除します。Remove the following code lines from the visual.ts file.

    • VisualSettings インポート:The VisualSettings import:

      import { VisualSettings } from "./settings";
      
    • 4 つのクラス レベルのプライベート変数宣言。The four class-level private variable declarations.

    • constructor 内のすべてのコード行。All the lines of code inside the constructor.

    • update メソッド内のすべてのコード行。All the lines of code inside the update method.

    • update メソッドより下のある、 parseSettings メソッドと enumerateObjectInstances メソッドを含む残りのすべてのコード行。All the remaining code lines below the update method, including the parseSettings and enumerateObjectInstances methods.

  4. import セクションの最後に次のコード行を追加します。Add the following lines of code at the end of the import section:

    • IVisualHost - 視覚化ホスト (Power BI) との対話に使用されるプロパティとサービスのコレクション。IVisualHost - A collection of properties and services used to interact with the visual host (Power BI).

      import IVisualHost = powerbi.extensibility.IVisualHost;
      
    • D3 ライブラリD3 library

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

      注意

      セットアップの一部としてこのライブラリをインストールしなかった場合は、D3 JavaScript ライブラリをインストールしますIf you didn't install this library as part of your setup, install the D3 JavaScript library.

  5. Visual クラス宣言の下に、次のクラス レベルのプロパティを挿入します。Below the Visual class declaration, insert the following class level properties. 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. visual.ts ファイルを保存します。Save the visual.ts file.

円要素とテキスト要素を追加するAdd a circle and text elements

D3 スケーラブル ベクター グラフィックス (SVG) を追加します。Add D3 Scalable Vector Graphics (SVG). これにより、円 と 2 つのテキスト要素の 3 つの図形を作成できます。This enables creating three shapes: a circle, and two text elements.

  1. VS Code で visual.ts を開きます。Open visual.ts in VS code.

  2. 次のコードを " コンストラクター "に追加します。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);
    

    ヒント

    読みやすくするため、コード スニペットをプロジェクトにコピーするたびに、ドキュメントの書式を設定することをお勧めします。To improve readability, it's recommended that you format the document every time you copy code snippets into your project. VS Code 内の任意の場所を右クリックして、 [ドキュメントのフォーマット] (Alt + Shift + F) を選択します。Right-click anywhere in VS code, and select Format Document (Alt+Shift+F).

  3. visual.ts ファイルを保存します。Save the visual.ts file.

幅と高さを設定するSet the width and height

視覚化の幅と高さを設定し、視覚化の要素の属性とスタイルを初期化します。Set the width and height of the visual, and initialize the attributes and styles of the visual's elements.

  1. VS Code で visual.ts を開きます。Open visual.ts in VS Code.

  2. update メソッドに次のコードを追加します。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. visual.ts ファイルを保存します。Save the visual.ts file.

(省略可能) 視覚化のファイル内のコードを確認する(Optional) Review the code in the visuals file

visuals.ts ファイルのコードが次のようになっていることを確認します。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");
    }
}

capabilities ファイルを変更するModify the capabilities file

capabilities ファイルから不要なコード行を削除します。Delete unneeded lines of code from the capabilities file.

  1. VS Code でプロジェクトを開きます ( [ファイル] > [フォルダーを開く] )。Open your project in VS Code ( File > Open Folder ).

  2. capabilities.json ファイルを選択します。Select the capabilities.json file.

    VS Code での capabilities.json ファイルへのアクセスのスクリーンショット。Screenshot of accessing the capabilities.json file in V S code.

  3. すべてのオブジェクト要素を削除します (14 - 60 行)。Remove all the objects elements (lines 14-60).

  4. capabilities.json ファイルを保存します。Save the capabilities.json file.

円形カード視覚化を再起動するRestart the circle card visual

視覚化の実行を停止して再起動します。Stop the visual from running and restart it.

  1. 視覚化を実行している PowerShell ウィンドウで、Ctrl + C キーを押し、バッチ ジョブを終了するように求められたら、「Y」と入力して 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. PowerShell で、ビジュアルを開始します。In PowerShell, start the visual.

    pbiviz start
    

追加した要素を使用して視覚化をテストするTest the visual with the added elements

視覚化に新しく追加した要素が表示されることを確認します。Verify that the visual displays the newly added elements.

  1. Power BI サービスで、 Power BI US Sales Analysis レポートを開きます。In Power BI service, open the Power BI US Sales Analysis report. 別のレポートを使用して円形カード視覚化を開発している場合は、そのレポートに移動します。If you're using a different report to develop the circle card visual, navigate to that report.

  2. 視覚化が円の形になっていることを確認します。Make sure that the visual is shaped as a circle.

    円になった円形カード視覚化のスクリーンショット。Screenshot of the circle card visual shaped as a circle.

    注意

    視覚化に何も表示されない場合は、 [フィールド] ペインから Quantity フィールドを開発者向け視覚化にドラッグします。If the visual isn't displaying anything, from the Fields pane, drag the Quantity field into the developer visual.

  3. ビジュアルのサイズを変更します。Resize the visual.

    視覚化の寸法に合わせて円とテキストが拡大縮小されることを確認します。Notice that the circle and text scale to fit the dimensions of the visual. 視覚化のサイズを変更すると update メソッドが呼び出され、その結果、視覚化の要素が再び拡大縮小されます。The update method is called when you resize the visual, and as a result the visual elements get rescaled.

自動再読み込みを有効にするEnable auto reload

プロジェクトの変更を保存するたびに、視覚化が自動的に再度読み込まれるようにするには、この設定を使用します。Use this setting to ensure that the visual is automatically reloaded each time you save project changes.

  1. Power BI US Sales Analysis レポート (または、円形カード視覚化が含まれるプロジェクト) に移動します。Navigate to the Power BI US Sales Analysis report (or to the project that has your circle card visual).

  2. 円形カード視覚化を選択します。Select the circle card visual.

  3. フローティング ツール バーで、 [自動再読み込みの切り替え] を選択します。In the floating toolbar, select Toggle Auto Reload.

    円形カード視覚化のフローティング ツール バーの [自動再読み込みの切り替え] オプションをクリックしたスクリーンショット。Screenshot of clicking the toggle auto reload option, in the circle card visual floating toolbar.

視覚化でデータを処理するGet the visual to process data

このセクションでは、データ ロールとデータ ビュー マッピングを定義します。In this section, you'll define data roles and data view mappings. また、表示されている値の名前を表示するように視覚化を変更します。You'll also modify the visual to display the name of the value it's displaying.

capabilities ファイルを構成するConfigure the capabilities file

capabilities.json ファイルを変更して、データ ロールとデータ ビューのマッピングを定義します。Modify the capabilities.json file to define the data role and data view mappings.

  • データ ロールの定義Defining the data role

    measure 型の単一のデータ ロールで dataRoles 配列を定義します。Define the dataRoles array with a single data role of the type measure. このデータ ロールは measure と呼ばれ、 Measure と表示されます。This data role is called measure , and is displayed as Measure. それを使用して、メジャー フィールドまたは集計されたフィールドのどちらかを渡すことができます。It allows passing either a measure field, or a field that's summed up.

    1. VS Code で capabilities.json ファイルを開きます。Open the capabilities.json file in VS Code.

    2. dataRoles 配列内のすべての内容を削除します (3 - 12 行)。Remove all the content inside the dataRoles array (lines 3-12).

    3. dataRoles 配列に次のコードを挿入します。Insert the following code to the dataRoles array.

      {
          "displayName": "Measure",
          "name": "measure",
          "kind": "Measure"
      }
      
    4. capabilities.json ファイルを保存します。Save the capabilities.json file.

  • データ ビュー マッピングの定義Defining the data view mapping

    dataViewMappings 配列に measure という名前のフィールドを定義します。Define a filed called measure in the dataViewMappings array. このフィールドは、データ ロールに渡すことができます。This field can be passed to the data role.

    1. VS Code で capabilities.json ファイルを開きます。Open the capabilities.json file in VS Code.

    2. dataViewMappings 配列内のすべての内容を削除します ( 10 - 30 行)。Remove all the content inside the dataViewMappings array (lines 10-30).

    3. dataViewMappings 配列に次のコードを挿入します。Insert the following code to the dataViewMappings array.

      {
          "conditions": [
              { "measure": { "max": 1 } }
          ],
          "single": {
              "role": "measure"
          }
      }
      
    4. capabilities.json ファイルを保存します。Save the capabilities.json file.

(省略可能) capabilities ファイルのコードの変更を確認する(Optional) Review the capabilities file code changes

円形カード視覚化に measure フィールドが表示されることを確認し、 [Dataview の表示] オプションを使用して行った変更を確認します。Verify that the circle card visual displays the measure field, and review the changes you made using the Show Dataview option.

  1. Power BI サービスで、 Power BI US Sales Analysis レポートを開きます。In Power BI service, open the Power BI US Sales Analysis report. 別のレポートを使用して円形カード視覚化を開発している場合は、そのレポートに移動します。If you're using a different report to develop the circle card visual, navigate to that report.

  2. 円形カード視覚化を Measure というタイトルのフィールドで構成できることに注意してください。Notice that the circle card visual can now be configured with a field titled Measure. [フィールド] ペインから Measure フィールドに要素をドラッグ アンド ドロップできます。You can drag and drop elements from the Fields pane into the Measure field.

    Power BI サービスの [視覚化] ペインに表示されている円形カードの measure フィールドのスクリーンショット。Screenshot of the circle card measure filed, in the Power BI service visualization pane.

    注意

    ビジュアル プロジェクトには、データ バインド ロジックがまだ含まれていません。The visual project does not yet include data binding logic.

  3. フローティング ツール バーで、 [Dataview の表示] を選択します。In the floating toolbar, select Show Dataview.

    円形カードのフローティング ツール バーにある [Dataview の表示] ボタンのスクリーンショット。Screenshot of the show dataview button, located in the circle card floating toolbar.

  4. 3 つの点を選択して表示を展開し、 single を選択して value を表示します。Select the three dots to expand the display, and select single to view the value.

    円形カードの [Dataview の表示] オプションで表示される value の値のスクリーンショット。Screenshot of the value figure as it's displayed in the circle card show dataview option.

  5. metadata を展開し、 columns 配列を展開して、 formatdisplayName の値を確認します。Expand metadata , then the columns array, and review the format and displayName values.

    円形カードの [Dataview の表示] オプションで表示される format と displayName の値のスクリーンショット。Screenshot of the format and display name values as displayed in the circle card show dataview option.

  6. もう一度ビジュアルに切り替えて、ビジュアルの上に表示されるツールバーで、 [Dataview の表示] を選択します。To toggle back to the visual, in the toolbar floating above the visual, select Show Dataview.

データを使用するように視覚化を構成するConfigure the visual to consume data

visual.ts ファイルを変更し、円形カード視覚化でデータを使用できるようにします。Make changes to the visual.ts file, so that the circle card visual will be able to consume data.

  1. VS Code で visual.ts ファイルを開きます。Open the visual.ts file in VS Code.

  2. 次の行を追加して、powerbi モジュールから DataView インターフェイスをインポートします。Add the following line to import the DataView interface from the powerbi module.

    import DataView = powerbi.DataView;
    
  3. update メソッドで次のようにします。In the update method, do the following:

    • 最初のステートメントとして次のステートメントを追加します。Add the following statement as the first statement. このステートメントにより、簡単にアクセスできるように dataView が変数に割り当てられ、 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];
      
    • .text("Value") を次のコード行に置き換えます。Replace .text("Value") with this line of code:

      .text(<string>dataView.single.value)
      
    • .text("Label") を次のコード行に置き換えます。Replace .text("Label") with this line of code:

      .text(dataView.metadata.columns[0].displayName)
      
  4. visual.ts ファイルを保存します。Save the visual.ts file.

  5. Power BI サービスで視覚化を確認します。Review the visual in Power BI service. 視覚化に、値と表示名が表示されるようになります。The visual now displays the value and the display name.

次のステップNext steps