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.ap-northeast-1.amazonaws.com/0/239983/7b646775-d9e7-12bb-780c-8c846a097345.png)
凡例を消してグラフ線のすぐ横に説明を加えたグラフです。

#このグラフの良いところ
２つのグラフを見比べてみてください。
左のグラフも普通に読み取れるかと思いますが、**右の方が見やすい**人が多いんじゃないでしょうか？

左の よくあるグラフを見るとき、視線が凡例とグラフ線を頻繁に移動するため
脳神経科学的に認知的疲労が増えるらしく、

この負担を軽減することで、**読み手にストレスなくグラフを読んでもらう**ことができるそうです。

詳しくはこちら　⇒　[データ視覚化のデザイン #1｜Go Ando](https://note.mu/goando/n/neb6ea35f1da3)
[![データ視覚化のデザイン#1_凡例はつかわない.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/d8314a14-9e48-2fa8-b26a-8216a0544e55.png)](https://note.mu/goando/n/neb6ea35f1da3)
この他にも見やすいグラフを作るヒントをたくさん書かれていてとても勉強になります！

#凡例レスな折れ線グラフの作り方
##サンプルデータと日付テーブルの準備
このサンプルデータを使います。
![元データ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/32a69817-0bda-c0f0-b091-094b88be487c.png)

日付テーブルも作っておきます。

```text:新しいテーブル
日付テーブル = 
  ADDCOLUMNS(
    CALENDAR( MIN('トランテーブル'[日付]) , MAX('トランテーブル'[日付]) ),
    "年_yyyy年" , FORMAT([Date],"yyyy年")
  )
```
今回、X軸を 年 とするので`年_yyyy年`だけですが、お使いの環境に合わせて必要な項目を加えてください。

次にリレーションを繋ぎます。
![リレーション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/8338ae3f-eb88-728d-5f57-be7fecea8d5e.png)
メジャー項目はこのあとで説明します。

##手順１．表示用項目作成
標準ビジュアルの折れ線グラフだと、データラベルには値（数値）しか表示できません。
そのためカスタムビジュアルInfographicDesignerを使いました。
*※この記事の 隠し設定画面 や レイヤー がわからない人は[こちら](https://qiita.com/hrkasno/items/2eba7a218534ff727a47)を先にお読みください*

まずDAX式で、**X軸の一番右側のデータにだけ`商品`が表示される**ようにメジャーを定義します。つまり
　・一番右側のデータだったら`商品`を表示
　・それ以外は空白を表示
ということです。

では「そのデータが一番右側か／それ以外か」を判断するには？

これは『そのデータの日付のyyyy年』が『トランテーブルに含まれる日付のなかで最大のyyyy年』と同じだったら一番右、とすれば良さそうです。
つまり『yyyy年ごとの売上日のMAX』が『yyyy年フィルタを外したあとの日付のMAX』と同じ、と読み替えます。

<font color="Gray">*このあたりはもっとスマートな考え方や やり方、伝え方がある気がしますが、自分の覚え書きとして。*</font>

メジャーを定義していきます。

```text:新しいメジャー（yyyy年ごとの売上日のMAX）
MAX日付 = MAX('トランテーブル'[日付])
```
```text:新しいメジャー
yyyy年フィルタを外したMAX日付 =
  CALCULATE(
            [MAX日付], 
            ALLSELECTED('日付テーブル'[年_yyyy年])
           )
```
内部的なyyyy年フィルタは外したいけど、スライサーや他ビジュアルのフィルタは残したいので、ALLではなくALLSELECTEDを使います。

```text:新しいメジャー
商品_表示用 = IF(
                [MAX日付] = [yyyy年フィルタを外したMAX日付],
                MAX([商品]),
                ""
               )
```

ちなみにマトリクスにするとこんな感じ
![商品_表示用のマトリクス表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/1cf69d10-a4b7-d1c4-aa3a-ff3f14a5fc16.png)
補足説明を加えると
![マトリクス２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/2ecb0549-a6db-124f-7fcf-6f6f1cbce13f.png)
これで表示用項目の準備ができました。

##手順２．ビジュアル作成
InfographicDesignerをこのように設定します。
![グラフの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/f4026d17-6618-658d-3cb7-d416a244b318.png)
Measureには`金額`を設定したあとで`商品_表示用`を追加します。順番が大事。

続いて隠し設定画面を開き、

shape01レイヤーを削除して
textレイヤーを追加します。
![隠し設定１＿shape削除.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/f02da782-fb06-89fa-9162-7bc60ae4a899.png)　　![隠し設定２＿text追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/be8ef223-c821-b01a-4562-56a99e199cbe.png)

Textを`商品_表示用`に紐付けます。
![隠し設定３＿data紐付け１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/291307c2-a56c-5a08-662e-db4115442ef2.png)　　![隠し設定３＿data紐付け２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/734fc286-bb60-af58-4ef1-8c8ef0a1eabf.png)

Text Colorは`商品`に合わせます。
![隠し設定４＿色付け１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/4be1d4f7-6002-e64b-faa5-70b35bb61220.png)　　![隠し設定４＿色付け２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/6872d9a9-aa78-368c-19c3-0cf7f0062015.png)


表示位置は右揃え＆上下中央揃えにします。
![隠し設定５＿配置.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/1f11c88c-0d81-3ce4-6ef5-44618e2d6b97.png)

完成！
![完成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239983/6d0f42ad-3f8e-9254-0ec1-6e85c7713a77.png)

<font color="LightGray">*【ひとりごと】こういうのを標準グラフで作れたらいいのに・・・*</font>

##あとがき
ほとんどのグラフは、見れば誰でも描かれている情報を読めると思います。
でも、読めるけど…なんとなく見にくい、すんなり理解できない、
なんて感じることはありませんか？
それはもしかしたらグラフをちょこっと変えるだけで改善する…かもしれません。

*カスタムビジュアル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/f014e815693ee50e9e3a)
- ⑤凡例レスな折れ線グラフ　*（現在のページ）*

##参考資料
[データ視覚化のデザイン #1｜Go Ando](https://note.mu/goando/n/neb6ea35f1da3)
[【Power BI】ALLSELECTED関数を使ってみる](https://www.frogwell.co.jp/blogs/powerbiallselected/)