---
title: 【初心者向け】ゼロから学ぶQlik Senseのデータ分析 第6回 テーブルセルの背景色の設定【ヒートマップも作成できる】
description: 初心者向けシリーズ「ゼロから学ぶQlik Senseのデータ分析」の第6回の記事です。テーマは、テーブルセルの背景色の設定【ヒートマップも作成できる】です。
---

[Qlik Senseナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/qliksense)

# [【初心者向け】ゼロから学ぶQlik Senseのデータ分析 第6回 テーブルセルの背景色の設定【ヒートマップも作成できる】](https://knowledge.insight-lab.co.jp/qliksense/beginner/background-color-table-cell)

 作成者: [Deck](https://knowledge.insight-lab.co.jp/qliksense/author/deck)｜2017年2月02日

こんにちは。Deckです。

今回はQlik Senseを使って、テーブルの背景色を2色に変更する方法を学びましょう。

売上予算を達成したかどうかで色分けを行っていきます。

 

## 1.Qlik Senseでテーブルセルの背景色の設定をする

例えば、売上金額を月ごとに集計した表があるとします。

毎月売上予算を達成する目標があったとすると、

- 予算達成→青
- 予算達成できず→赤

このような色分けがしてあるとわかりやすいですね？

 

サンプルとして使用するデータは[第5回](https://knowledge.insight-lab.co.jp/qliksense/beginner/drill-down-analysis-master-item)と同様です。

今回のチャート作成に使用するデータは、以下からダウンロードできます。

[**サンプルファイルはこちら**](https://knowledge.insight-lab.co.jp/hubfs/Qlik%20Sense/SAMPLEFILE/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89Qlik_Sense_%E7%AC%AC%E4%BA%94%E5%9B%9E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%87%E3%83%BC%E3%82%BF.zip)

 

zipファイルを解凍した後、新規Qlik Senseのアプリを作成し、以下ファイルを取り込んで下さい。

- **「注文明細サンプル.csv」**
- **「商品マスタ.csv」**

 

 

Qlik Senseを使ったデータの読み込み方がわからない方は、以下の記事を参考にしてください。  
**第2回ドラッグ＆ドロップでデータのロードの記事はこちら**

では、準備はいいでしょうか？

 

### テーブルの準備

 

まず、ピボット テーブルを新規作成します。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E7%A9%BA%E3%81%AE%E3%83%94%E3%83%9C%E3%83%83%E3%83%88%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90.png>

軸を注文年月・数式を売上高・予算達成率とします。  
ここでは、例として売上の予算を1億5千万円としてみます。  
売上高の数式は　「　Sum(\[売上金額\])　」  
予算達成率は　「　Sum(\[売上金額\]) / 150000000　」  
と入力します。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/2-Aug-27-2020-10-07-37-12-AM.png>

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E3%83%A1%E3%82%B8%E3%83%A3%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A.png>

正しく軸と数式の設定ができればこの画像のようなテーブルになります。  
引き継ぎ、背景色の設定をしましょう。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/3-Aug-27-2020-10-07-38-13-AM.png>

 

### カラー表現の設定

テーブルの背景色を設定しましょう。  
「背景カラー表現」をクリックして、入力ボックスに次の式を入力します。

`If( Sum([売上金額]) >= 150000000, //売上金額は150万円を超えているか？ RGB(220,230,240), //150万円を超えている場合は青い背景色 RGB(240,200,200) //超えていない場合は赤い背景色 )`

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E8%83%8C%E6%99%AF%E3%82%AB%E3%83%A9%E3%83%BC%E8%A1%A8%E7%8F%BE%E3%81%AF%E3%81%93%E3%81%93%E3%81%AB%E3%81%82%E3%82%8B.png>  
<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E8%83%8C%E6%99%AF%E8%89%B2%E3%81%AE%E6%95%B0%E5%BC%8F%E3%82%92%E7%B7%A8%E9%9B%86_small.png>

上で入力した式にあるIfは「指定した条件が満たされているかどうかで結果が2通りに変わる」関数です。  
今回の色分け基準は売上金額が予算達成しているかどうかなので、それぞれの意味はこのようになっています。

- Sum(\[売上金額\]) >= 150000000　……　売上高は**150000000円以上か？**
- RGB(220,230,240)　……　条件式が満たされている場合(予算達成)**青い背景にする**  
  RGBの引数は順にRed(赤),Green(緑),Blue(青)を示しています。  
  数値の範囲は0~255で、数値が大きいほどその色が明るくなります。
- RGB(240,200,200)　……　条件式が満たされていない場合(予算達成できず)**赤い背景にする**

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/4-Aug-27-2020-10-07-37-61-AM.png>  
カラー表現の数式を入力すると、「売上高」の列に予算達成できたかのパターンが浮かび上がってきました。  
同じように、「予算達成率」にもカラー表現を設定してテーブルが完成します。  
<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/1-1-Aug-27-2020-10-07-34-37-AM.png>

売上予算を達成できている月は背景が青く、そうでない月は背景が赤くなっていますね。  
背景色を変えることで、どの月が予算を達成できているか一目でわかるようになりました。

 

### 売上の高い月・低い月が一目で分かるテーブルの作成

ここからは、さらにステップアップし、ヒートマップを表示するパターンを試してみましょう。  
<http://qliksense-i-ways.com/qliksense/未分類/【初心者向け】ゼロから学ぶqlik-senseのデータ分析七/>

 

## 2.Qlik Senseでヒートマップを作成する

このチャートをベースにヒートマップを作成します。

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/1-2-4.png>

このテーブルは「予算を達成しているか・そうでないか」を把握するには十分ですが、  
今回は「それぞれの月の売上は平均と比べてどうか」を考えてみましょう。

 

「背景カラー表現」編集画面に次の数式を入力します。  
<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E8%83%8C%E6%99%AF%E3%82%AB%E3%83%A9%E3%83%BC%E8%A1%A8%E7%8F%BE%E3%81%AF%E3%81%93%E3%81%93%E3%81%AB%E3%81%82%E3%82%8B_b.png>

`ColorMix2( Sum([売上金額]) / Avg(total Aggr(Sum([売上金額]),注文年月)) -1, //売上平均と今月の売上を比較する rgb(255, 33, 0), //売上が低いときは赤色 rgb(0, 255, 33), //売上が高いときは緑色 rgb(255,255,255) //売上が平均的なときは白 )`

<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E8%A8%AD%E5%AE%9A.png>

 

ColorMix2はQlik Senseのチャート関数で、-1～+1の範囲の値に対しそれぞれ色を指定できる関数です。  
それぞれの行の意味を見ていきます。

 

Sum(売上金額)　…　売上金額の合計です。

Avg(total Aggr(Sum\[売上金額\]),注文年月))　…　各月の売上金額の平均です。

「それぞれの注文年月ごとに売上金額の合計を集計し、その平均を計算する」という意味合いです。

少し難しいですが、ここでは「おまじない」と考えてしまっても大丈夫です。

ちょうど平均の場合は0になってほしいので、最後に-1をしています。

Rgb(赤,緑,青)　…　上から順に

「計算結果が-1のときの色」

「計算結果が1のときの色」

「計算結果が0のときの色」です。

サンプルから色を変える場合は指定する順番に注意しましょう。

この数式では、売上と配色の関係はこのようになります。

 

売上金額と配色の関係

| **小** |   |   |   |   |   |   |   |   |   |   |   |   | **大** |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |

 

 

上の数式を適用した結果が次の画像です。  
<https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81_.png>

これでチャート完成です。

左側の列は平均と比較した売上の良し悪し、右側の列は予算達成できたかどうかが直感的にわかるようになっています。

チャートの用途に応じていろいろな見せ方があるので、使い分けができるようになりましょう！

 

[**第7回「カレンダー メジャーで前年対比」の記事はこちら**](https://knowledge.insight-lab.co.jp/qliksense/beginner/qlik-sense3-2-calendar-measure)

 

**[『ゼロからわかる！Qlik Sense入門講座』の目次は、こちら](https://knowledge.insight-lab.co.jp/qliksense/beginner-table-of-contents)**

[完全な記事を表示](https://knowledge.insight-lab.co.jp/qliksense/beginner/background-color-table-cell)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Deck"
  },
  "dateModified" : "2020-12-03T06:15:12.920Z",
  "datePublished" : "2017-02-02T07:00:20Z",
  "headline" : "【初心者向け】ゼロから学ぶQlik Senseのデータ分析 第6回 テーブルセルの背景色の設定【ヒートマップも作成できる】",
  "image" : {
    "@type" : "ImageObject",
    "height" : 548,
    "url" : "https://download.insight-lab.co.jp/hubfs/Imported_Blog_Media/%E3%82%A2%E3%82%A4%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81_.png",
    "width" : 625
  },
  "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/qliksense/beginner/background-color-table-cell",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "QlikSenseナレッジ"
  }
}
```