チュートリアル:R を利用した Power BI 視覚エフェクトを作成するTutorial: Create an R-powered Power BI visual

このチュートリアルでは、R を利用した Power BI の視覚エフェクトを作成する方法について説明します。This tutorial describes how to create an R-powered visual for Power BI.

このチュートリアルで学習する内容は次のとおりです。In this tutorial, you learn how to:

  • R を利用した視覚エフェクトを作成するCreate an R-powered visual
  • Power BI Desktop で R スクリプトを編集するEdit the R script in Power BI Desktop
  • 視覚エフェクトにライブラリを追加するAdd libraries to the visual
  • 静的プロパティを追加するAdd a static property

前提条件Prerequisites

作業の開始Getting started

  1. 視覚エフェクト用のサンプル データを準備します。Prepare sample data for the visual. 次の値を Excel データベースまたは .csv ファイルに保存し、Power BI Desktop にインポートできます。You can save these values to an Excel database or .csv file and import it into Power BI Desktop.

    MonthNoMonthNo 合計ユニット数Total Units
    11 23032303
    22 23192319
    33 17321732
    44 16151615
    55 14271427
    66 22532253
    77 11471147
    88 15151515
    99 25162516
    1010 31313131
    1111 31703170
    1212 27622762
  2. 視覚エフェクトを作成するには、PowerShell またはターミナルを開き、次のコマンドを実行します。To create a visual, open PowerShell or Terminal, and run the following command:

    pbiviz new rVisualSample -t rvisual
    

    このコマンドを実行すると、rvisual テンプレートに基づいて新しいフォルダー構造が作成されます。This command creates a new folder structure based on the rvisual template. このテンプレートには、次の R スクリプトを実行する、基本的かつすぐに実行可能な R を利用した視覚エフェクトが含まれています。This template includes a basic, ready-to-run R-powered visual that runs the following R script:

    plot(Values)
    

    Values データ フレームには Values データ ロールの列が含まれます。The Values data frame will contain columns in Values data role.

  3. 開発者向け視覚エフェクトにデータを割り当てるには、視覚エフェクトの ValuesMonthNo合計ユニット数を追加します。Assign data to the developer visual by adding MonthNo and Total units to Values for the visual.

    データを含む R 視覚エフェクト

R スクリプトの編集Editing the R Script

pbiviz を使用して、rvisual テンプレートに基づいて R を利用した視覚エフェクトを作成すると、視覚エフェクトのルート フォルダーに script.r というファイルが作成されます。When you use pbiviz to create the R-powered visual based on the rvisual template, it creates a file called script.r in the root folder of the visual. このファイルには、ユーザーに対して画像を生成するために実行される R スクリプトが格納されています。This file holds the R script that runs to generate the image for a user. Power BI Desktop で R スクリプトを作成できます。You can create your R script in Power BI Desktop.

  1. Power BI Desktop で、 [R スクリプト ビジュアル] を選択します。In Power BI Desktop, select R script visual:

    Power BI Desktop の R スクリプト ビジュアルを示すスクリーンショット。

  2. 次の R コードを [R スクリプト エディター] に貼り付けます。Paste this R code into the R script editor:

    x <- dataset[,1] # get the first column from dataset
    y <- dataset[,2] # get the second column from dataset
    
    columnNames = colnames(dataset) # get column names
    
    plot(x, y, type="n", xlab=columnNames[1], ylab=columnNames[2]) # draw empty plot with axis and labels only
    lines(x, y, col="green") # draw line plot
    
  3. [スクリプトの実行] アイコンを選択して、結果を確認します。Select the Run script icon to see the result.

    線プロットであるスクリプトを実行した結果を示すスクリーンショット。

  4. R スクリプトの準備ができたら、前の手順の 1 つで作成した視覚化プロジェクトの script.r ファイルにそれをコピーします。When your R script is ready, copy it to the script.r file in your visual project created at one of the previous steps.

  5. capabilities.json 内の dataRolesnamedataRoles に変更します。Change the name of dataRoles in capabilities.json to dataRoles. Power BI では、dataset データ フレーム オブジェクトとして R スクリプト視覚エフェクトにデータが渡されますが、R 視覚エフェクトでは dataRoles の名前に従ってデータ フレーム名が取得されます。Power BI passes data as the dataset data frame object for the R script visual, but the R visual gets the data frame name according to dataRoles names.

    {
      "dataRoles": [
        {
          "displayName": "Values",
          "kind": "GroupingOrMeasure",
          "name": "dataRoles"
        }
      ],
      "dataViewMappings": [
        {
          "scriptResult": {
            "dataInput": {
              "table": {
                "rows": {
                  "select": [
                    {
                      "for": {
                        "in": "dataset"
                      }
                    }
                  ],
                  "dataReductionAlgorithm": {
                    "top": {}
                  }
                }
              }
            },
            ...
          }
        }
      ],
    }
    
  6. src/visual.ts ファイルに、画像のサイズ変更をサポートする次のコードを追加します。Add the following code to support resizing the image in the src/visual.ts file.

      public onResizing(finalViewport: IViewport): void {
          this.imageDiv.style.height = finalViewport.height + "px";
          this.imageDiv.style.width = finalViewport.width + "px";
          this.imageElement.style.height = finalViewport.height + "px";
          this.imageElement.style.width = finalViewport.width + "px";
      }
    

視覚化パッケージにライブラリを追加するAdd libraries to visual package

この手順により、視覚エフェクトで corrplot パッケージを使用できるようになります。This procedure allows your visual to use the corrplot package.

  1. 視覚エフェクト用のライブラリの依存関係を dependencies.json に追加します。Add the library dependency for your visual to dependencies.json. ファイルの内容の例を次に示します。Here is an example of the file content:

    {
      "cranPackages": [
        {
          "name": "corrplot",
          "displayName": "corrplot",
          "url": "https://cran.r-project.org/web/packages/corrplot/"
        }
      ]
    }
    

    corrplot パッケージは、相関マトリックスのグラフィカルな表示です。The corrplot package is a graphical display of a correlation matrix. corrplot の詳細については、「corrplot パッケージの概要」を参照してください。For more information about corrplot, see An Introduction to corrplot Package.

  2. これらの変更を行った後、script.r ファイルでパッケージの使用を開始します。After you make these changes, start using the package in your script.r file.

    library(corrplot)
    corr <- cor(dataset)
    corrplot(corr, method="circle", order = "hclust")
    

corrplot パッケージを使用した結果は、次の例のようになります。The result of using corrplot package looks like this example:

corrplot によって作成された 4 つの楕円が表示されている [視覚化] ペインを示すスクリーンショット。

プロパティ ペインに静的プロパティを追加するAdding a static property to the property pane

ユーザーが UI の設定を変更できるようにします。Enable users to change UI settings. これを行うには、R スクリプトのユーザー入力に基づく動作を変更するプロパティをプロパティ ペインに追加します。To do this, add properties to the property pane that change the user-input based behavior of the R script.

corrplot 関数の method 引数を使用して、corrplot を構成できます。You can configure corrplot by using the method argument for the corrplot function. 既定のスクリプトでは、円が使用されます。The default script uses a circle. 視覚エフェクトを変更して、ユーザーが複数のオプションから選択できるようにします。Modify your visual to let the user choose between several options.

  1. capabilities.json ファイルでオブジェクトとプロパティを定義します。Define the object and property in the capabilities.json file. 次に、enumeration メソッドでこのオブジェクト名を使用して、プロパティ ペインからこれらの値を取得します。Then use this object name in the enumeration method to get those values from the property pane.

    {
      "settings": {
      "displayName": "Visual Settings",
      "description": "Settings to control the look and feel of the visual",
      "properties": {
        "method": {
          "displayName": "Data Look",
          "description": "Control the look and feel of the data points in the visual",
          "type": {
            "enumeration": [
              {
                "displayName": "Circle",
                "value": "circle"
              },
              {
                "displayName": "Square",
                "value": "square"
              },
              {
                "displayName": "Ellipse",
                "value": "ellipse"
              },
              {
                "displayName": "Number",
                "value": "number"
              },
              {
                "displayName": "Shade",
                "value": "shade"
              },
              {
                "displayName": "Color",
                "value": "color"
              },
              {
                "displayName": "Pie",
                "value": "pie"
              }
            ]
          }
        }
      }
    }
    
  2. src/settings.ts ファイルを開きます。Open the src/settings.ts file. パブリック プロパティ method を持つ CorrPlotSettings クラスを作成します。Create a CorrPlotSettings class with the public property method. 型は string で、既定値は circle です。The type is string and the default value is circle. 既定値を使用して VisualSettings クラスに settings プロパティを追加します。Add the settings property to the VisualSettings class with the default value:

    "use strict";
    
    import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
    import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;
    
    export class VisualSettings extends DataViewObjectsParser {
      public rcv_script: rcv_scriptSettings = new rcv_scriptSettings();
      public settings: CorrPlotSettings = new CorrPlotSettings();
    }
    
    export class CorrPlotSettings {
      public method: string = "circle";
    }
    
    export class rcv_scriptSettings {
      public provider;
      public source;
    }
    

    これらの手順の後、視覚エフェクトのプロパティを変更できます。After these steps, you can change the property of the visual.

    R 視覚エフェクトの設定

    最後に、R スクリプトは必ずプロパティによって開始されます。Finally, the R script must start with a property. ユーザーがプロパティを変更しない場合、視覚エフェクトでこのプロパティの値が取得されることはありません。If the user doesn't change the property, the visual doesn't get any value for this property.

    プロパティの R ランタイム変数の名前付け規則は <objectname>_<propertyname> です。この場合は settings_method です。For R runtime variables for the properties, the naming convention is <objectname>_<propertyname>, in this case, settings_method.

  3. 次のコードに一致するように、視覚エフェクトの R スクリプトを変更します。Change the R script in your visual to match the following code:

    library(corrplot)
    corr <- cor(dataset)
    
    if (!exists("settings_method"))
    {
        settings_method = "circle";
    }
    
    corrplot(corr, method=settings_method, order = "hclust")
    

最終的な視覚エフェクトは、次の例のようになります。Your final visual looks like the following example:

値が変更された R 視覚エフェクトの設定

次の手順Next steps

R を利用した視覚エフェクトの詳細については、「Power BI で R を利用した Power BI ビジュアルを使用する」をご覧ください。To learn more about R-powered visuals, see Use R-powered Power BI visuals in Power BI.

Power BI Desktop での R を利用した視覚エフェクトの詳細については、「R を使用した Power BI ビジュアルの作成」をご覧ください。For more information about R-powered visuals in Power BI Desktop, see Create Power BI visuals using R.