【kintone】チェックボックスを使ったグラフ

複数選択ができるチェックボックス！
今回はチェックボックスを使った場合のグラフです！

# アンケート結果の集計
仮に、筆箱の中アンケートがあったとします。
筆箱の中に「えんぴつ／ボールペン／筆ペン」どの筆記用具があるかアンケートを
9人に答えてもらったという設定です。

## アプリの準備
| フィールドの種類 | フィールド名 | 備考 |
|:-:|:-:|:-:|
| 文字列(1行)  | なまえ  |   |
| チェックボックス  | 筆箱の中身| えんぴつ／ボールペン／筆ペン |


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/236bbb00-fb15-af48-7832-001706b3bbcf.png" width=400px>

## グラフの設定

| 設定 | 設定内容 |
|:-:|:-:|
| グラフの種類  | 縦棒グラフ  |
|分類する項目（大項目）   | 筆箱の中身  |
|集計方法|レコード数|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/b42cbeac-f011-cc3f-a606-63d97ec7f5d6.png)

この縦棒グラフの読み方はと言うと、
えんぴつは5件、筆ペンは5件、ボールペンは4件。
人は9人いるので

* 9人中の5人はえんぴつを持っている。
* 9人中の5人は筆ペンを持っている。
* 9人中の4人はボールペンを持っている。

となります。

注意点としては、例えば、
**えんぴつとボールペンを両方持っている人数は不明**です。

次はこのように複数持っている人の人数を集計してみたいと思います。

# 条件の使い方
グラフの条件設定はちょっと特殊です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/7fbf46d9-4a59-cd0f-9d46-ea1eab2a3957.png)
このように、一番右のボックスでは複数選択できます。複数選ぶと「または」でつながることになります。

えんぴつとボールペンを選択した場合、「えんぴつまたはボールペンを持っている」という意味になります。

「えんぴつまたはボールペンを持っている」とは

* えんぴつをもっているがボールペンを持っていない
* ボールペンをもっているがえんぴつを持っていない
* えんぴつもボールペンも両方持っている

この3通りの状態のことです。

条件を追加すると「かつ」でつなぐことになります
下記の条件だと「えんぴつを持っている」かつ「ボールペンを持っている」となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/dbebff42-ccb0-3f3c-8009-c2f2e52e0595.png)


次はえんぴつを持っている人について考えてみたいと思います。

## えんぴつを持っている人

えんぴつを持っている人というのは下記の様に設定します。

| 条件にするフィールド| 選択項目 | 内容 |
|:-:|:-:|:-:|
| 筆箱の中身  | 次のいずれかを含む  |  えんぴつ |



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/622d38d1-a7a0-908a-cd07-2dfb39995dcb.png)

これだと、**とにかくえんぴつを持っていればカウントされる**ので

* えんぴつだけを持っている人
* えんぴつとボールペンを持っている人
* えんぴつと筆ペンを持っている人
* えんぴつもボールペンも筆ペンも持っている人

が全部カウントされてしまいます。


## えんぴつ「だけ」を持っている人
えんぴつ「だけ」を持っている人は下記のように2つ設定します

| 条件にするフィールド| 選択項目 | 内容 |
|:-:|:-:|:-:|
| 筆箱の中身  | 次のいずれかを含む  |  えんぴつ |
| 筆箱の中身  | 次のいずれも含まない  | ボールペン、筆ペン |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/ce512ffe-7d2b-3626-96b2-acd3dfa60831.png)

条件を増やすと「かつ」という言葉でつながります。
そのため、上記2つの条件を言葉で表すと

**「筆箱の中身にえんぴつがある」　かつ　「筆箱の中身にボールペンも筆ペンもない」**

という意味になり、「えんぴつだけがある」という条件になります。

ベン図で表すとこんな感じ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/3b3ece9d-5455-b9a2-79c0-5ce7059e681e.png" width=400px>

グラフはこのようになります。

| 設定 | 設定内容 |
|:-:|:-:|
| グラフの種類  | 縦棒グラフ  |
|分類する項目（大項目）   | --- |
|集計方法|レコード数|

| 条件にするフィールド| 選択項目 | 内容 |
|:-:|:-:|:-:|
| 筆箱の中身  | 次のいずれかを含む  |  えんぴつ |
| 筆箱の中身  | 次のいずれも含まない  | ボールペン、筆ペン |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d41534ef-3212-292f-8637-60db4fdb1728.png)


### いずれも含まないだけでもいいのでは？
下記のいずれも含まないの設定だけで、「鉛筆だけを持っている人」がカウントできるのではないか？と思うかも知れません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/6c05303e-9258-9112-4161-436994f5adb9.png)

しかしこれだと、**「何も持ってない人」も含まれてしまいます。**要注意です。

## えんぴつとボールペンを持っている人
「えんぴつとボールペン両方を持っている」は、2通りの解釈ができます。


① とにかく「えんぴつ」と「ボールペン」を両方持っていて、「筆ペン」は持ってても持ってなくても良い
② 「えんぴつ」と「ボールペン」を両方持っていて、「筆ペン」は持っていない

それぞれ、先程のベン図で表すと
①**とにかく「えんぴつ」と「ボールペン」を両方持っていて、「筆ペン」は持ってても持ってなくても良い**は、灰色の部分になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/78d1254b-5d1c-2278-0bc5-36a3866b10df.png" width=400>


②**「えんぴつ」と「ボールペン」を両方持っていて、「筆ペン」は持っていない**は、紫の部分になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/5d43693c-5e11-5980-ab5a-611e1d309daa.png" width=400>

### ①のグラフ
**とにかく「えんぴつ」と「ボールペン」を両方持っていて、「筆ペン」は持ってても持ってなくても良い**
は割と簡単です。
「えんぴつを持っている」かつ「ボールペンを持っている」の下記条件でOKです。
筆ペンは持っていても持っていなくてもOKなので条件に入れる必要はありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/dbebff42-ccb0-3f3c-8009-c2f2e52e0595.png)

結果は以下のようになります。

| グラフ | 一覧 |
|:-:|:-:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/03e9fd2e-c742-b0c0-08a6-2aa7e5985834.png)  |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/af30bf52-c478-ecbc-8a5c-f6814b63a9cc.png) |

### ②のグラフ
**「えんぴつ」と「ボールペン」を両方持っていて、「筆ペン」は持っていない**
は①のグラフに「筆ペンを持っていない」という条件を付け加えればOKです。
条件は下記となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/0d464c7b-f2e6-d3fe-7c55-d2eaaa109837.png)

結果は以下のようになります。

| グラフ | 一覧|
|:-:|:-:|
|  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d04c6b5f-7246-0242-0fae-7e26c50c7827.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/86346891-ec40-5367-7c4f-2b549d1c78e8.png)  |

# まとめ
複数選択ができるフィールドを使ってグラフを描く時は、ベン図などを描いて条件を設定しましょう。
表示したいデータのみ表示できるようになるとグラフ活用の幅が広がりそうです＾＾