Power BI ワッフルチャート　～InfographicDesigner④

![infographicDesignerアイコン.png](https://qiita-image-store.s3.amazonaws.com/0/239983/39b135d7-a52d-5d52-021c-8f000dc663ff.png)
カスタムビジュアルの[InfographicDesigner](https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104380898)を使って、ワッフルチャートを作ってみました。

#ワッフルチャート
![ワッフルグラフ_基本.png](https://qiita-image-store.s3.amazonaws.com/0/239983/afd2b1d0-5ccc-8ab1-ccb7-02dd4a2af3ea.png)![ワッフル4.jpg](https://qiita-image-store.s3.amazonaws.com/0/239983/6ba18cd1-d8f0-78f9-f0ea-d6023b3c91b1.jpeg)

##ワッフルチャートの作り方
###サンプルデータ
|月|売上|
|:-:|--:|
|1月|80|
|2月|20|
|3月|10|
###手順
普通にInfographicDesigner![infoinfographicDesigner縮小アイコン.png](https://qiita-image-store.s3.amazonaws.com/0/239983/e45fb749-a2f6-1cad-c3d6-98c2cd328625.png)でグラフを作る。
![普通のグラフ.png](https://qiita-image-store.s3.amazonaws.com/0/239983/967e2cfd-eb5f-27a0-fea1-312421ffb4b7.png)
[隠し設定画面](https://qiita.com/hrkasno/items/2eba7a218534ff727a47)を開き、Layout設定画面の Bound to を Outer にする。
![ワッフルグラフ_基本の作り方１.png](https://qiita-image-store.s3.amazonaws.com/0/239983/05d579b6-d138-97fb-a5c6-6bffb9afcbaf.png)![ワッフルグラフ_基本の作り方２.png](https://qiita-image-store.s3.amazonaws.com/0/239983/56d58fcc-293b-f4bb-29b9-87bdf1409431.png)
Fill Percentage を`売上`にする
![ワッフルグラフ_基本の作り方３.png](https://qiita-image-store.s3.amazonaws.com/0/239983/a04b6b8e-f658-ec9e-88bd-ac75c617e61a.png)
Multiple Units(分割) をオンにして、Units Per Row(横分割数)を 3 にする。
![ワッフルグラフ_基本の作り方４.png](https://qiita-image-store.s3.amazonaws.com/0/239983/59b743e4-d44a-5222-28c6-fc4b120a1f14.png)

完成！
![ワッフルグラフ_基本.png](https://qiita-image-store.s3.amazonaws.com/0/239983/afd2b1d0-5ccc-8ab1-ccb7-02dd4a2af3ea.png)
Measure の最大値(サンプルデータの場合は`1月`の80)まで、□□□が積み上がります。

####積上げ数を固定する場合
□□□積上げ数を固定(例えば100に)する場合は

Fill Percentage of に100を設定し、
![ワッフルグラフ_基本の作り方５.png](https://qiita-image-store.s3.amazonaws.com/0/239983/6d9a6b9d-0e0e-fc5e-b248-ff2807199f97.png)
Max Y-Valueにも同じく100を設定します。
![ワッフルグラフ_基本の作り方６.png](https://qiita-image-store.s3.amazonaws.com/0/239983/d2c03f0d-fa49-1532-ccf0-7b182e55e55e.png)
完成！
![ワッフルグラフ_最大値固定.png](https://qiita-image-store.s3.amazonaws.com/0/239983/37fd69bc-e329-fa4d-9535-e6bce382f214.png)

この最大値は固定値しか設定できないみたいなのが残念です。
もしメジャー等で動的に設定できたらもっと柔軟に使えるのに。。。


#応用編
ここからは完全にお遊びです。
今までのテクニックを組み合わせてみました。
##レビュー☆評価グラフ
![レビュー☆評価.png](https://qiita-image-store.s3.amazonaws.com/0/239983/46847c36-1413-0d96-e57f-6e803f681af5.png)

##某アクションゲーム風 エネルギーゲージ
![某レトロゲーム縦ゲージ.png](https://qiita-image-store.s3.amazonaws.com/0/239983/28104f0e-16a9-24cb-4b13-67d9bc1696c9.png)
これは<img src="https://qiita-image-store.s3.amazonaws.com/0/239983/6c749e83-a54d-6129-7f01-64059ae5bea0.png" width="100">と<img src="https://qiita-image-store.s3.amazonaws.com/0/239983/66a7fef6-1701-9c01-ea31-4ad707d21bd0.png" width="100">を積上げました。

#おわりに
InfographicDesignerは間違いなく多機能なビジュアルなのですが、
残念なことに、それが使いづらさにも繋がっているのではと感じます。

でも使いこなせばグラフ表現のバリエーションが増えますよ！

というわけで以上になります。
最後までお読みいただきありがとうございます。

カスタムビジュアルInfographicDesignerダウンロードは[こちら](https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104380898)から。

#関連情報
##InfographicDesigner関連の記事
- [①Small Multiple(小さな多数の)グラフ](https://qiita.com/hrkasno/items/a53973d1ce7a987b397f)
- [②複数のデータラベル](https://qiita.com/hrkasno/items/2eba7a218534ff727a47)
- [③折れ線グラフのマーカーを任意の図形にする](https://qiita.com/hrkasno/items/7558f7e54febdfa7f662)
- ④ワッフルチャート　*（現在のページ）*
- [⑤凡例レスな折れ線グラフ](https://qiita.com/hrkasno/items/4c9ca1b1bcd181acffb8)

##同じことを他の手段で
[Power BIカスタムビジュアル「Waffle Chart」](https://qiita.com/ishiayaya/items/358f0919ed039847b112)(@ishiayaya さん)
[Power BIクイックメジャー「星評価」](https://qiita.com/ishiayaya/items/d003f3dce2f492fbf1b4)(@ishiayaya さん)

##参考資料
[(Youtube動画) infographicDesignerチャンネル](https://www.youtube.com/channel/UCr7_fcoDNJGfa-tjhpuf5bw)
[(Youtube動画) Infographic Designer Demo: Using Image](https://www.youtube.com/watch?v=3P4_t6A8nz8)
[(Youtube動画) Power BI Infographics Designer - How to use Power BI infographics Quick and Easy!](https://www.youtube.com/watch?v=m7ybCuiMKg8)
[(Youtube動画) Infographics Power BI Part 1](https://www.youtube.com/watch?v=FvQG0YzIpd4)
[(Youtube動画) Infographics Power BI Part 2](https://www.youtube.com/watch?v=kGT3ebU2bDM)
[(Youtube動画) Infographic Designer Demo: Skyscrapers](https://www.youtube.com/watch?v=AUxc_E3idSY) (サンプルになっているビル模様グラフ)
[(Youtube動画) Infographic Designer Intro](https://www.youtube.com/watch?v=H8sRlqEYf7c) (サンプルにもなっているテレビのワッフルグラフ)