メインコンテンツへスキップ

「Power BIレポートの表現力をアップするためのコツ 」 ：カスタマビジュアルを使いましょう　(2021年12月)

mceclip0.png

mceclip0.png

初めに

PowerBIツールでレポートを作っていると、業務要件に応じて「こういうことを表現したい！」けど、「PowerBIのデフォルト機能でできる表現が限られていて実現できない」ということはありませんか？

その場合、まずは使えるカスタムビジュアルがないか、MicrosftのビジュアルMarketPlaceから探します。 見つからない場合、要件的に妥協できなければカスタムビジュアルの自作も検討視野に入れるべきと思います。

今回は、レポートの表現力をアップできるカスタムビジュアルを三つをご紹介します。

  • Enhanced Scatter
  • ChicletSlicer
  • lineChart（標準提供）

※次回以降は、カスタムビジュアルの自作方法についてご紹介したいと思います。

 

今回紹介対象となるビジュアルの概要説明

 

■　Enhanced Scatter（散布図）

MS社が提供しているScatter Chartに対して、図形、背景イメージ、マーカー表示、および位置照準線等の複数の機能を拡張しました。

mceclip0.png

https://appsource.microsoft.com/en-us/product/power-bi-visuals/wa104380762?tab=overview

■　ChicletSlicer （チクレットスライサー）

標準スライサーより、ボタン並びの形でスライサーを構成し、テキストだけではなく、ｱｲｺﾝｲﾒｰｼﾞも表現できるようになります。

mceclip1.png

https://appsource.microsoft.com/en-us/product/power-bi-visuals/wa104380756?tab=overview

■ lineChart (折れ線グラフ)

　折れ線グラフは標準ビジュアルです。時系列のデータの過去・現在の可視化だけではなく、予測も表示することが可能。

mceclip2.png

https://docs.microsoft.com/ja-jp/power-bi/visuals/power-bi-line-chart

 

Power BIレポートにて表現したい内容

 

今回の記事サンプルでは、下記の使用例(仮想)を基づいて、前ページで述べていたカスタムビジュアルの使い方を説明します。

  1. ある製造工場では予防保全を実現するために工場現場のIoT化を推進しています。各生産ラインに配置している生産設備の状態を把握するために、設備のセンサー値を定期的にクラウドDBに取得しています。
  2. また、取得したセンサーデータをPowerBIによる見える化し、設備の異常状態もしくは変化を確認できるようにしています。

※今回の記事は②を中心で説明しますが、①のIoT技術を利用してセンサー値をクラウドまで取得する話は別の記事を作成する予定です。

 

上記の要件を実現するサンプルデータのモデル構成は下記を考えています。

 

mceclip3.png

 

 

また、紹介対象の各ビジュアルの役割は下記になります。

  • pEnhanced Scatterを使って各フロアの平面図の上で監視対象機器の配置場所を表します。
  • pChicletSlicerを使って工場の各フロア間の切り替え表示を実現します。
  • pEnhanced Scatterから特定の設備を選択した場合に、当該設備の各センサー値の推移状況および予測状況をlineChartを用いて表示します。

 

いよいよ実際の作成手順に入りますが、まずはデモ画面の完成イメージをご覧ください。

mceclip4.png

サンプル画面作成の手順ー開発環境構成

 

記事サンプルの開発環境は下記通りです。

  • SqlServer Express(2019)

サンプルデータを蓄積するために無償版のDatabaseを用意します。

ダウンロード先：https://www.microsoft.com/ja-jp/sql-server/sql-server-downloads

  • Power BI Desktop 現時点最新版

PowerBI画面を開発するツールです。下記のURLから無償で取得できます。

ダウンロード先： https://powerbi.microsoft.com/ja-jp/downloads/

また、PowerBI DescktopとSqlServer Database間での接続モードは「Direct Query」を利用します。

  • Azure Storage

工場のフロアマップイメージをAuzreストレージにアップロードし、そのURLをEnhanced Scatterに参照させるようにします。

 

mceclip5.png

 

サンプル画面作成の手順ーレポート生成①

 

いよいよ実際の作成手順に入ります。

まず、PowerBI Desktopを開き、新規レポート画面を作成し、利用対象となるカスタムビジュアルをAppStoreからインストールします。

mceclip7.png

 

●　Tips

インストールされたカスタムビジュアルのパッケージファイルは、PowerBIレポートのソースファイル(pbix)に含まれていますので、pbixファイルから取り出して保存して置くことをお進めます。将来万が一当該カスタムビジュアルがAppStoreから消えていた時に（公式以外のものにとって普通あり得るパターン）、保存したパッケージファイルからカスタムビジュアルを再利用可能になります。

mceclip8.png

 

サンプル画面作成の手順ーレポート生成②

 

Sql Serverと「Direct Query」モードで接続し、今回記事作成に利用するテーブルをデータセットとして指定します。

mceclip10.png

mceclip11.png

対象テーブルを取得できたかを確認します。

mceclip13.png

データモデルの関連設定を追加します。

ScatterLayout 「status」とEquitment 「status」の間に、「１対多」のリレーションを作成します。
※その他のテーブルについて、DB側のリレーション設定が継承されますので、PowerBI側の設定作業は不要です。

 

mceclip14.png

 

サンプル画面作成の手順ーフロアマップ作成①

 

EnhancedScatterを利用してフロアマップコンテンツを作成します。

mceclip15.png

フィールド設定

  • 詳細：Equipment[equipment_dispname]を設定し、設備の名称をToolTipで表示します。
  • 凡例：下記の新しい列項目を作成し、設備の状態を表示します。
    Service_name(設備状態)： IF(Equipment[status] = 0, “正常”, IF(Equipment[status] = 1, “警告”,
       IF(Equipment[status] = 2, “エラー”, “正常”)))
  • X軸： Equipment[floor_map_x]を設定し、設備の相対横座標を指定します。
  • Y軸： Equipment[floor_map_y]を設定し、設備の相対縦座標を指定します。

mceclip16.png

  • サイズ：ScatterLayout[size]を設定し、マップ上に表示するアイコンのサイズを指定します。
    ※現状の製品制限によって、サイズ属性は、アイコンが図形(circleやcrossなど)の指定した場合のみ効きます。イメージを指定する場合、何かの数値を入れる必要があるが、サイズ値に応じてイメージの自動スケール調整（拡大また縮小）ができません。
  • イメージ：ScatterLayout[image_url]フロアマップ上に設備状態ごとに表示アイコンを指定します。

mceclip17.png

  • 背景：Floor[floor_image_url]を設定し、フロアマップのバックグラウンドイメージを指定します。

mceclip18.png

 

書式設定

①データの色：設備状態「正常」、「警告」、「エラー」に対して「緑」、「黄」、「赤」のように色付けします。

②X軸：無効。Ｘ軸の目盛線を非表示にします。

③Y軸：無効。Ｙ軸の目盛線を非表示にします。

④凡例：有効。タイトルも有効にします。テキストサイズは「15」ポイントで指定します。

上記以外の書式はとりあえずデフォルト状態で良いです。

上述のフィールド設定と書式設定を実施した後の画面イメージは下記になります。

 

mceclip19.png

 

続けて、 ChicletSlicerを利用してフロアを切り替えるためのボタン部作り方を説明します。

ChicletSlicerを利用してフロア切り替えボタンコンテンツを作成します。

mceclip20.png

pフィールド設定

①カテゴリ：Floor[floor_name]を設定し、階数ボタンの表示文字を指定します。

p書式設定

①全般：階層ボタンは縦向きに表示したいため、向き「垂直」、列「１」行「２」を指定します。
また、複数選択を「無効化」、強制選択を「有効化」を指定します。

②チクレット：テキストサイズ、テキスト色、選択された時の色、ポイントした時の色などを、ご好み
ですが指定しておいた方が良いとおもいます。

上記設定完了後、階数選択ボタンを押下し、フロアマップが切り替えされているかどうかを確認します。

 

mceclip21.png

 

続けて、 lineChartを利用しセンサー値の過去推移と未来予測を表示します。

 

サンプル画面作成の手順ーセンサー値推移状況グラフ作成①

 

lineChartを利用してセンサー値の推移状況「折れ線グラフ」を作成します。

mceclip22.png

pフィールド設定

①軸：SensorData[trans_timestamp]を設定し、X軸にはセンサーデータの採取時刻を指定します。

②値：SensorData[sensor3]を設定し、設備センサー値の推移状況を表示します。

p書式設定

①X軸：連続、線形、開始・終了「自動」、表示単位「自動」のように指定します。

②Y軸：左へ移動、線形、開始・終了「自動」、グリード線「ON」、
表示単位「自動」のように指定します。

③タイトルや背景、影等について、ご好みで指定すれば良いでしょう。

p

p分析設定

【傾向線】
グラフ全体のデータ増減の傾向をわかるようにPowerBIから自動計算し、
線を引いてくれます。

①傾向線：傾向線を１本追加します。

②色：折れ線グラフのデータ色と区別できるような色を指定します。

③スタイル：折れ線と区別できるように、「破線」を指定します。

その他の書式は、デフォルトのままで良いです。

mceclip23.png　mceclip25.png

サンプル画面作成の手引きーセンサー値推移状況グラフ作成②

 

p分析設定(続き)

【予測】
センサー値は、これからどのように変化していくことを予測するモデル
を表示します。

①予測の長さ：予測モデルの期間です。「30」ポイントで指定します。
今回のセンサー値の採取間隔は「4秒」で、予測長さの1ポイント=4秒なのため、
将来2分(120秒)の予測を行う意味で指定します。

②最後を無視：データの最後で予測モデルの推定に使用しない期間数を指定します。
今回は無視する期間を指定しません。

③信頼区間：予測結果が範囲内に入る確率です。「95%」デフォルト値で指定します。
確率が高いほど上限値、下限値は広く取られます。
（全部取れば再現率は100%みたいなあれ）。

④季節性：一定の周期でグラフが変動する場合に使用します。「自動」で指定します。
季節性を2ポイントを指定すると、8秒(４秒×２)毎で将来予測を計算することに
なります。
下図は、季節性のある「10年間東京平均気温」データを予測モデルで表示する
イメージです。

mceclip26.png

mceclip27.png

mceclip29.png

 

おわりに

今回は、 カスタムビジュアル「 EnhancedScatter 」と「ChicletSlicer」を使ってフロアマップの作成、および標準ビジュアル「lineChat」を利用して予測付のデータ推移状況グラフの作成方法について、簡単に紹介させていただきました。

実際に「EnhancedScatter 」を使う際に、意図そのものを実現できない不手際な場面がぶつかりませんか？

次回は、カスタムビジュアルの作成テーマにおいて、 「 EnhancedScatter 」の不手際のところを拡張対応し、よりカッコ良く使いやすいフロアマップを作成したいと思います。

 

 

 

関連記事