Tableauでライン付き半ドーナツグラフを作ろう

## 半ドーナツグラフについて
Tableauには標準で半円のグラフを作る機能はないですが、メジャーバリューを使用し計算式を組み合わせることで実現することが出来る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/9b1fea4e-5039-fd19-e034-06d156ae708d.png)




以下の計算フィールドを作成し、ドーナツグラフの色に「メジャーネーム」を、角度に「メジャーバリュー」を配置する。

Area1(第2象限のオレンジライン)
```
IF [割合]>=0.5 THEN [割合]-0.5
ELSE 0
END
```
Area2(第2象限のグレーライン)
```
IF [割合]>=0.5 THEN 1-[割合]
ELSE 0.5
END
```
Area3(第3,4象限の白いエリア)
```
1
```
Area4(第1象限のオレンジライン)
```
IF [割合]<=0.5 THEN [割合]
ELSE 0.5
END
```
Area5(第1象限のグレーライン)
```
IF [割合]<=0.5 THEN 0.5-[割合]
ELSE 0
END
```
これらを配置し、Area1,4をオレンジ(などお好みの)色に、Area2,5をグレーに、Area3を白に設定するときれいな半ドーナツグラフになる。
50％以下の場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/f924d878-d9f6-93e8-36d7-d67990cb2edf.png)

50％以上の場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/0c8b111a-ef5c-f6ab-20c8-28a2b3744970.png)

## ライン付き半ドーナツグラフについて
これを応用してライン付き半ドーナツグラフも作ることが可能。
100%を超えているかどうかをラインを使用して分かりやすく表現することが可能。
本記事ではいくつかのパターンを共有する。

### 100%ラインを上部に、最大値を200%に設定するとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/02459cc4-458d-b16e-3a1a-24bb489d0f3a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/dac91e7e-c6e0-093d-4a4f-32438a5870a0.png)

計算フィールドを7つ作成する。
Line1(第1象限の赤ライン)
```
0.005
```
Area1(第2象限のオレンジライン)
```
IF [割合]>=1 THEN [割合]-1
ELSE 0
END
```
Area2(第2象限のグレーライン)
```
IF [割合]>=1 THEN 2-[割合]
ELSE 1
END
```
Area3(第3,4象限の白エリア)
```
1.99
```
Area4(第1象限のオレンジライン)
```
IF [割合]<=1 THEN [割合]
ELSE 1
END
```
Area5(第1象限のグレーライン)
```
IF [割合]<=1 THEN 1-[割合]
ELSE 0
END
```
Line2(第1象限の赤ライン)
```
0.005
```
Line1,2を赤に、Area1,4をオレンジ(などお好みの)色に、Area2,5をグレーに、Area3を白に設定するとライン付き半ドーナツグラフになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/10a8b88e-f8bc-c99b-d51a-2b3c5936c12b.png)

### 100%ラインを右側に、最大値を150%に設定するとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/bbd09e54-3929-0acf-14ee-d2af08c3cf0c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/870eed64-4392-1985-2f70-609693781193.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/c16cc531-e9e6-4879-c188-3fce6f225634.png)

計算フィールドを8つ作成する。
Area1(第1象限のオレンジライン)
```
IF [割合]<=0.5 THEN 0
ELSEIF [割合]<=1 THEN [割合]-0.5
ELSE 0.5
END
```
Area2(第1象限のグレーライン)
```
IF [割合]<=0.5 THEN 0.5
ELSEIF [割合]<=1 THEN 1-[割合]
ELSE 0
END
```
Line(赤ライン)
```
0.01
```
Area3(第4象限のオレンジライン)
```
IF [割合]<=1 THEN 0
ELSEIF [割合]<=1.5 THEN [割合]-1
ELSE 0.5
END
```
Area4(第4象限のグレーライン)
```
IF [割合]<=1 THEN 0.5
ELSEIF [割合]<=1.5 THEN 1.5-[割合]
ELSE 0
END
```
Area5(白エリア)
```
0.49
```
Area6(第2象限のオレンジライン)
```
IF [割合]<=0.5 THEN [割合]
ELSE 0.5
END
```
Area7(第2象限のグレーライン)
```
IF [割合]<=0.5 THEN 0.5-[割合]
ELSE 0
END
```
これらを配置し、Lineを赤に、Area1,3,6をオレンジ(などお好みの)色に、Area2,4,7をグレーに、Area5を白に設定するとライン付き半ドーナツグラフになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687866/7d0bc5f7-fd87-bc19-f423-9127ac54b485.png)

## 原理(簡単に)
半ドーナツグラフとして表示するための値を各領域で計算している。
その象限内の値の時はその分をオレンジラインの値として表示する。
その領域に満たない値の場合はオレンジラインを0、グレーラインをフルの値で固定、
その領域を超える値の場合はオレンジラインをフルの値で固定、グレーラインを0で固定するなどすることで、ライン付き半ドーナツグラフを実現出来ている。

## おわりに
原理まで理解するとややこしいかもしれませんが、ここで用意したパターンをコピペすれば問題なく作成できるかと思います(Tableau初心者の後輩に計算フィールドだけ共有して上手く使ってもらえました)。
是非皆さんもご活用ください。