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/886cad12-650e-1012-8405-f8af4de71c89.png)
*※この記事で出てくる、隠し設定画面 や レイヤー がわからない人は、[Power BI 複数のデータラベル](https://qiita.com/hrkasno/items/2eba7a218534ff727a47)を参照*

#折れ線グラフのマーカー
標準の折れ線グラフのマーカーは
あらかじめ用意されている記号しか使用できません。
![普通の折れ線のマーカー8種類.png](https://qiita-image-store.s3.amazonaws.com/0/239983/5a21cc73-84a9-da22-5f9d-95c99121b4a1.png)
これを★などの好きな図形にします。

#作り方
##サンプルデータ
|月|商品|売上|
|:-:|:-:|--:|
|1月|商品A|80|
|1月|商品B|60|
|1月|商品C|30|
|2月|商品A|20|
|2月|商品B|90|
|2月|商品C|40|
|3月|商品A|10|
|3月|商品B|50|
|3月|商品C|70|
##マーカーを変更
まず普通にInfographicDesignerで折れ線グラフを作ります。
![普通に作っただけ.png](https://qiita-image-store.s3.amazonaws.com/0/239983/c22de6a4-1435-ace7-7a05-539565501cb5.png)
このマーカー(●)を変更します。

shapeの図形変更画面を開き
![shape変更画面.png](https://qiita-image-store.s3.amazonaws.com/0/239983/0a157145-3912-15f0-0c90-3dbc93636f04.png)
★印を選びます
![shape変更設定.png](https://qiita-image-store.s3.amazonaws.com/0/239983/7a29bedd-3c31-4da9-1425-b10c22abcd69.png)
完成！！
![★印にした.png](https://qiita-image-store.s3.amazonaws.com/0/239983/7763ae22-50ef-9dc1-da96-77729f5bba04.png)
★になりました

##任意の画像を挿入
図形の代わりに画像も設定できます。

画像レイヤーを挿入
![画像の挿入.png](https://qiita-image-store.s3.amazonaws.com/0/239983/ce039464-365d-7b61-76a6-b8c76fe56db3.png)
Uploadボタンで画像ファイルを取り込みます。
![アップロード画面.png](https://qiita-image-store.s3.amazonaws.com/0/239983/dcc51d85-edbf-4b6c-95be-38448b4b0504.png)
取り込んだ画像を選択します。
![画像選択.png](https://qiita-image-store.s3.amazonaws.com/0/239983/021652eb-48de-3ee1-b295-eac94cdffb19.png)
縦幅と横幅は勝手に引き延ばされます。
もし見栄えが悪くなって困るときはKeep Ratioをオンにして縦横比を固定します。
![縦横比を固定を選択.png](https://qiita-image-store.s3.amazonaws.com/0/239983/7f879c15-10ab-17f8-d5dd-2e8c088b6803.png)
完成！！
![画像マーカー.png](https://qiita-image-store.s3.amazonaws.com/0/239983/275fe654-76cc-af38-186d-def67f09fa95.png)

##図形をいくつか重ね合わせ
shapeレイヤーを追加して
■ と ● と ★ を重ねてみたり。
![図形重ねわせ.png](https://qiita-image-store.s3.amazonaws.com/0/239983/a6f7c798-0e4a-d219-de06-d81de654cba4.png)

###重ね合わせ順の設定
レイヤーを前面や背面に移動させるには
移動させたいレイヤーを編集中にして
ひし餅みたいなアイコンで移動させます。
![重ね合わせ設定.png](https://qiita-image-store.s3.amazonaws.com/0/239983/0eb87a18-bc78-a110-7616-05581cb507c1.png)

##2種類以上の図形を同時に使う
shape や image のデータ紐付け(Data-Binding)画面で設定します。
![使い分け設定画面.png](https://qiita-image-store.s3.amazonaws.com/0/239983/9df0c4f5-c2eb-c034-e6bf-c5bfab2ccda1.png)

###`商品`で分ける場合
![商品ごとに図形を変える設定.png](https://qiita-image-store.s3.amazonaws.com/0/239983/8f3ded83-dd65-4316-e48e-5b63a3a086d1.png)![図形いろいろ.png](https://qiita-image-store.s3.amazonaws.com/0/239983/ac668ca4-40cc-54fe-829a-c16ea9b56cda.png)
###`月`で分ける場合
![月ごとに図形を変える設定.png](https://qiita-image-store.s3.amazonaws.com/0/239983/54dc487d-9182-435b-becb-851c80bbaa98.png)![月ごとに図形を変える.png](https://qiita-image-store.s3.amazonaws.com/0/239983/17a7f194-bf6a-cae8-2600-a39e2ab7e332.png)
###`売上`で分ける場合
![売上ごとに図形を変える設定.png](https://qiita-image-store.s3.amazonaws.com/0/239983/5f90ab6c-b1ae-51be-1929-9b305523c404.png)![値ごとに図形を変える.png](https://qiita-image-store.s3.amazonaws.com/0/239983/910eee56-bc4c-a4c6-ccb2-ec96cd6a8b8a.png)

#おわりに
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/f014e815693ee50e9e3a)
- [⑤凡例レスな折れ線グラフ](https://qiita.com/hrkasno/items/4c9ca1b1bcd181acffb8)

##InfographicDesigner関連の記事2
- [Power BI Tips - 値によって画像を変更する](https://qiita.com/yossihard/items/0ade0778201b80727be2)(@yossihard さん)
- [Power BI Tips - 値によって画像の塗りつぶし範囲と色を変える](https://qiita.com/yossihard/items/cc46ea8c74923012ee1f)(@yossihard さん)

##参考資料
[(Youtube動画) infographicDesignerチャンネル](https://www.youtube.com/channel/UCr7_fcoDNJGfa-tjhpuf5bw)
[(Youtube動画) Infographic Designer Demo: Data Binding of Text Box](https://www.youtube.com/watch?v=9FzuzA3MB8I)
[(Youtube動画) Infographic Designer Demo: Bar Chart for Car Sales](https://www.youtube.com/watch?v=v6eIuKfubCE)
[(Youtube動画) Infographic Designer Demo: Using Image](https://www.youtube.com/watch?v=3P4_t6A8nz8)
[(Youtube動画) Infographic Designer Demo: Bar Chart with Multiple Icons](https://www.youtube.com/watch?v=1qkH5F3_Y-o)
[(Youtube動画) Power BI Infographics Designer - How to use Power BI infographics Quick and Easy!](https://www.youtube.com/watch?v=m7ybCuiMKg8)