【kintone】積み上げと100％積み上げのグラフ

今回は積み上げなし、積み上げ、100%積み上げのグラフを比べてみたいと思います。

# 積み上げグラフと100%積み上げグラフの違い

積み上げグラフには「積み上げ」、「100%積み上げ」の2種類あります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/3ba31694-8875-167d-31a8-34936b695069.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d14674ad-b417-4b46-dbab-f2f40e668a96.png)

「積み上げ」と、「100%積み上げ」の違いですが、「100%積み上げ」の方は全体を100%としたグラフになっています。

例えば、2015年は果物全体で1,926千t収穫して、りんごは777千t収穫したので、

```math
\frac{777}{1926} \times 100 \fallingdotseq 40.3 \\
```
というわけで40.3%となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c49c841e-6bf8-c1b1-d2cd-edc72cf24418.png)

# 積み上げ設定ができるグラフ

下記グラフで積み上げの設定ができます。

* 横棒グラフ
* 縦棒グラフ
* 面グラフ
* 曲線面グラフ

それぞれの積み上げ、積み上げなし、100%積み上げグラフの違いを比べてみます。
アプリとレコードは前回の記事と同様のものを使用しています。
前回の記事：[【kintone】いろいろなグラフ（集計方法が1つの場合）](https://qiita.com/juri_don/items/7d2a3180f5fbc4a46e12)

## 横棒グラフ

| 設定| グラフ | 
|:-:|:-:|
|  集合（積み上げなし） | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/33c7c041-1e9d-6961-a311-3e4c445f8220.png) |
| 積み上げ  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/7d351a6d-bc0a-e402-aed1-9a7a7f3cfd46.png)  |  
|  100%積み上げ |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d286a910-f954-49a1-6b4a-65a1ba4c88d4.png) |   

## 縦棒グラフ
| 設定| グラフ | 
|:-:|:-:|
|  集合（積み上げなし） | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/01ee223b-e36b-0a68-c3b4-16360967c25d.png)|
| 積み上げ  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/5cbde1cc-4340-76d7-91b1-c0d4f1881fbe.png)|  
|  100%積み上げ |   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/68a8b979-eb1e-b89f-cb36-db10293f76ca.png)|  


## 面グラフ
| 設定| グラフ | 
|:-:|:-:|
|  集合（積み上げなし） | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e6872aca-8bbb-71fa-4d28-4638c512905c.png)|
| 積み上げ  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/86193949-21a1-5386-88a2-fadeb284d695.png)|  
|  100%積み上げ | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/4fa4ee52-2374-f0e0-c716-db006a77e4e7.png)  |  

## 曲線面グラフ
| 設定| グラフ | 
|:-:|:-:|
|  積み上げなし | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/dd1fd61d-07d7-dacc-7113-478797bd4075.png)|
| 積み上げ  | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/4916a54f-b257-7b9f-dcbb-c22d0ebf51f0.png)|  
|  100%積み上げ |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/9953df37-a4c5-ff1e-ab13-a15cdebf328f.png) | 

# 積み上げグラフ、100%積み上げグラフ使い分けの注意 

こちらは100%積み上げグラフ。
生活用品、おもちゃ、食品の売れた個数を比べるグラフです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c018121d-ed29-8630-b577-18cde67ff306.png)

日に日におもちゃが売れる個数が増えていく・・・！！
用に見えますが、通常の積み上げグラフに切り替えてみると・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/f3ae786f-6e94-28bf-25d6-5b9c0fe00ea8.png)

実は売れた個数はめちゃめちゃ減ってました。

100%積み上げグラフは、全体を100とした場合の割合が表示される仕様なので、データを読み間違えてしまう事があるかも知れません。

このグラフのレコードはこのような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/abd5df3a-9e5e-f986-9987-133692a80b35.png)

クロス集計表にするとこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/032ef59d-40e5-3305-dd4f-47496375ce7c.png)

1週間で全体として1920個も減ってしまっている！のに、100%積み上げグラフだとこうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c018121d-ed29-8630-b577-18cde67ff306.png)

おもちゃの売れた個数が増えているように見える！！！
グラフの見せ方によって印象が変わってしまいますね。

# まとめ

積み上げの設定についてでした。
積み上げグラフと100%積み上げグラフだと印象が随分変わってしまいます。

日常の中でもたまに見かける、「〇〇率の推移」のようなグラフは、「全体がどのくらいなのか？」ということにも気をつけて見てみるといいかも知れませんね。