2021年12月21日 に実施されたWebセミナーQlik Tipsの資料です

1. Qlik Tips
Chart Design
2021年12月21日
鈴木 由紀
Senior Solution Architect, Qlik Japan
効果的な色の使用例

2. 2
Qlik Sense Business 入門 ハンズオン Web セミナーのデータをもとにご説明します。

3. 3
テーマによるパレット
①または②でアプリ概要を開き、歯車アイコンをクリック、
アプリのテーマを設定、×で閉じる
① ②
Sense クラッシック
Sense フォーカス Sense Breeze Sense Horizon
テーマを変更すると
チャート等にパレットから
指定した色も自動的に
変更されますのでご注
意ください。

4. 4
パレットからの色指定
パレットから使用した
い色をクリックする
Hex値を入力
使用したい色の
部分をクリック
明るさを
コントロール
Hex値の入力や、色ホイールからの選択により、
パレットに存在しない色を使用することもできます。

5. 5
自分のパレットを作る
自分好みの色の組合せをるツールもあります。
コーポレートカラーを基準に、カラーパターンを作ることもできます。
例：https://mycolor.space/
基準色を指定して、
自動で色の組合せを作るサイト
ホームページなど
画面上の色を調べるツールもあります。
「画面の色を取得」などで検索してみてく
ださい。

6. 6
色はどこで使えるか
シートのヘッダー
①または②でアプリ概要を開き、
歯車アイコンをクリック、
背景色とフォント色を設定、×で閉じる
① ②

7. 7
色はどこで使えるか
標準チャートのプロパティ
項目のドラッグアンドドロップで作成したチャートは
プロパティパネルの「推奨チャート」をオフにします。
• 色の設定は「プレゼンテーション」か「色と凡例」などにあります。
• 「自動」をオフにして「カスタム」にします。
• 単色・軸ごと・メジャー別・数式を使用から選びます。
• 軸ごとで固定色をチェックすると、異なるチャートでも同じ値は
同色となります。
• メジャー別で色を反転をチェックすると、メジャーの昇順・降順
が入れ替わります。
Visualization BundleやDashboard Bundleのオブジェクトは
設定が異なるものもあります。

8. 8
固定色の例
どのチャートでも同じセグメントは同じ色で表示される
直観的でわかりやすいが、
軸数があまり多いと無意味

9. 9
色はどこで使えるか
標準チャートのプロパティー基本的なチャート
円
• 単色(メッコチャート以外)
• 軸ごと
• メジャー別(折れ線、メッコチャート以外)
• 数式を使用
• メジャー別で、マスターアイテムを色のメジャーとして選んだ
場合、ライブラリーカラーをオフにすると配色が選べます。
(ライブラリーカラーは後述)

10. 10
色はどこで使えるか
標準チャートのプロパティーコンボチャート
コンボチャートでは、
全体の色設定に優先して、各メジャー毎に色の設定が可能です。
（単色、数式を使用）

11. 11
色はどこで使えるか
標準チャートのプロパティー複数の色設定を行うチャート

12. 12
色はどこで使えるか
標準チャートのプロパティー地図
地図は色の指定以外に、
不透明度と枠線の色が設定できます。
密度マップでは、限度と各セグメントの色を設定できます。
暗色のベースマップに、不透明度と白の枠線を使った
例
密度マップ

13. 13
色はどこで使えるか
標準チャートのプロパティーで条件による色設定
KPI ゲージ
KPIとゲージでは、
限度による色設定が可能です。
限度は複数設定ができ、数式での設定も可能です。
(例：当年値ー前年値 など）
KPIでは1番目、2番目それぞれに限度が設定できます。
条件付きの色、セグメントの使用を「オン」、ライブラリカラー
を「オフ」で使用します。

14. 14
色はどこで使えるか
テーブル、ピボットテーブル
テーブル、ピボットテーブルでは、
各データ項目ごとに、背景とテキストの色を数式で指定できます。
いずれもif文などを使用して、条件による色分けを行うことができます。
(マイナスを赤字 など）
また、プレゼンテーションのスタイル指定から、
ヘッダーとコンテンツ、カーソルを置いたときの背景とフォントの色を指定できます。

15. 15
色はどこで使えるか
基準線
 棒グラフ（軸基準線あり）
 ボックス プロット
 コンボ チャート（軸基準線あり）
 分布プロット
 ゲージ
 ヒストグラム
 折れ線グラフ（軸基準線あり）
 散布図
 ウォーターフォール グラフ
基準線を持つチャート
基準線を設定すると、
基準線の色と、ラベルの背景を色付きにするかどうかを設定できます。

16. 16
マスターアイテムでの色設定：軸
作成済みのマスターアイテムの軸を編集で開くと、値の色タブで色を指定できます。
軸の同じ値を同じ色で表示することができます。
チャートプロパティの固定色での表示と異なる色を指定したい場合や、特定の値のみ強調したい場合などに使用します。
パレットから
使用したい色
をクリック
値の色タブを
クリック
自動をオフに
してカスタムに
1つの値のみ強調した例
ライブラリーカラーを
オンにする

17. 17
マスターアイテムでの色設定：メジャー
マスターアイテムのメジャーについて、セグメントカラー（条件による色設定）を設定できます。
限度を追加し、セグメント別に色を指定します。
パレットから
各セグメント
に使用したい
色をクリック
自動をオフにし
てカスタムに
限度を割合か
数値から選択
限度を追加
ライブラリーカラーを
オンにする

18. 18
数式の使用
数式には二通りの使用方法があります。
「数式は色分けされています」にチェックがある場合
数式には色の定義を含む必要があります。
例：if(売上>15000000,green(),red())
但し、凡例はサポートされません。
「数式は色分けされています」にチェックがない場合
数式はメジャーとして解釈されます。配色を指定することができます。
例：sum({<[受注日.autoCalendar.Year]={2019}>}販売金額)
/sum({<[受注日.autoCalendar.Year]={2018}>}販売金額)
「メジャー別」を選択した場合には設定できない複雑な数式を使った
グラデーションで表現することができます。

19. 19
項目や変数による色設定
数式に直接に式を書き込むのではなく、色設定の式を項目としてロードしたり、変数で与えることができます。
色を変更したい場合に、チャートを修正する必要がありません。
[色設定]:
LOAD * INLINE
[
クラス;色
プラチナ;RGB(216,156,163)
シルバー;RGB(174,201,159)
ゴールド;RGB(251,199,152)
](delimiter is ';');
スクリプト
変数

20. 20
カラー関数
• チャート オブジェクトのカラー プロパティを設定および評価する数式やデータ ロード スクリプトで使用します。
• 主なカラー関数
• カラー関数 ヘルプ
ARGB、RGB、Color、etc...
カラー関数 説明 構文
ARGB カラープロパティを設定または評価する数式で使用されます。色は alpha のアルファ係数 (不透明度)
を使用した、赤の要素 r、緑の要素 g、青の要素b によって定義されます。
ARGB(alpha,r,g,b)
RGB カラー プロパティを設定または評価する数式で使用されます。色は、0 から 255 の値を使用した、赤の
要素 r、緑の要素 g、青の要素 b により定義されます。
RGB(r,g,b)
Color カラー マップの色番号 n の色表現を返す数式で使用されます。色表現はデュアル値で構成され、テキス
ト表現は 'RGB(r, g, b)' 形式で提供されます。
Color(n)
Colorパレット
計算結果

21. 21
カラー関数
• 定義済みの色の数式で使用できます。各関数は、RGB カ
ラー表現を返します。任意で、アルファ係数のパラメータを指
定できます。その場合、ARGB カラー表現が返されます。ア
ルファ係数 0 は完全な透明に相当し、255 は完全な不透
明色に相当します。アルファの値が入力されていない場合、
255 と見なされます。
定義済みのカラー関数
構文 RGB 値
black ([alpha]) (0,0,0)
blue([alpha]) (0,0,128)
brown([alpha]) (128,128,0)
cyan([alpha]) (0,128,128)
darkgray([alpha]) (128,128,128)
green([alpha]) (0,128,0)
lightblue([alpha]) (0,0,255)
lightcyan([alpha]) (0,255,255)
lightgray([alpha]) (192,192,192)
lightgreen([alpha]) (0,255,0)
lightmagenta([alpha]) (255,0,255)
lightred([alpha]) (255,0,0)
magenta([alpha]) (128,0,128)
red([alpha]) (128,0,0)
white([alpha]) (255,255,255)
yellow([alpha]) (255,255,0)
計算結果

22. 22
例：散布図の色で情報を追加
散布図の色に、チャートの軸やメジャーと異なる項目を軸ごとの色に使用すると、さらに情報を追加することができます。
ただし散布図自体の軸の値は、色の軸のどれかひとつのみに対応している必要があります。
軸：車種
X軸：加速
Y軸：排気量
サイズ：シリンダー数
色：国

23. 23
例：ボタンのオン・オフ
=if($(vButton) = 0,argb(120,200,0,0),argb(255,200,0,0))
透明度でオンとオフを表現
=if($(vButton) = 0,lightgray(),cyan())
色の違いでオンとオフを表現
ボタンを押す都度、色を切り替えて、オンとオフを表現します。

24. 24
例：全体の中の選択表示
Qlikでは通常は、選択されている値に関連するものだけが表示されます。
しかし、選択した値が全体の中でどの位置付けにあるのかを知りたい場合があります。
メジャーと色の設定により、全体を残しつつ、選択した値を別の色で表示することができます。
X軸：Sum({<商品名=>} 販売金額)
Y軸：Avg({<商品名=>}[利益率])
サイズ：Sum({<商品名=>} 粗利)
商品名別に売上と利益率を表示する散布図で、
メジャーで商品名の選択を無視するSet数式を使用
します。
if(match(商品名,商品名),
argb(150,200,0,0),argb(50,0,150,0))
色に数式を使用します。

25. 25
例：閾値外の強調
数式を使用して、ある値より上、または下の色を区別することができます。
月別平均を上回る月は赤で表示しています。
if(sum(販売金額)>sum(total 販売金額)/count(total distinct 年月度),
rgb(200,0,0),rgb(100,100,100))
色を区別する条件式は、軸を無視するためにtotal
を使用します。

26. 26
例：最大値の強調
色に数式を使用して、最大の値のみ、異なる色で強調した例です。
if(rank(sum(販売金額)*-1)=count(distinct total 商品区分名),
rgb(200,0,0),rgb(0,200,0))
売上をマイナスにして逆の順位を求めています。
順位が軸全体の数と等しいものが最大値とみなしています。