【Qlik Sense】レイアウトコンテナで「差」をつけるダッシュボードデザイン

はじめに

　今回は、2023年12月 (Client-Managed 版では February 2024以降) に新しく追加された「レイアウトコンテナ」について紹介します。

レイアウトコンテナとは

　作成したオブジェクトをPowerPointのように自由に配置したり重ねたりできるものです。今まで以上にデザイン性の高いダッシュボードを作成することが可能になりました。

　以下の例では、売上の棒グラフと利益の棒グラフを2つ重ねて、あたかも１つのチャートであるかのように表現しています。

●できること

• グリッドに関わらず自由にオブジェクトを配置する
• チャートをグループ化する
• チャートを組み合わせて新しいビジュアライゼーションを作成する
• 複合KPIを作成する
• 条件に基づいて、一部チャートの表示/非表示を指定する
  
  

●制限事項

• メジャーや軸をコンテナにドロップして、レイアウトコンテナ内にチャートを作成することはできない
• レイアウトコンテナ内に、コンテナ、トレリスコンテナ、レイアウトコンテナを追加することはできない
• レイアウトコンテナ内のチャートのコピー＆ペーストは、キーボード ショートカットはサポートされていない（右クリックでは可能）
• レイアウトコンテナ内のオブジェクトのホバーメニューが使用できない（※本記事の「できない」を解決 -応用編- にて、拡大↔縮小の解決策を記載しています）

レイアウトコンテナの使い方 -基礎編-

①レイアウトコンテナの作成

1.  [アセットパネル] > [カスタムオブジェクト] >  [Qlik Dashboard bundle] から、 [Layout container] をシートにドラッグします。

2.  [コンテンツを追加] を押下し、[チャート] から任意のオブジェクトを作成します。今回は散布図を作成します。

②ビジュアライゼーションの編集

1. チャートのサイズ・位置を変更します。方法は以下の2種類です。

   1. レイアウトコンテナ内のオブジェクトをクリックして調整
   2. プロパティで数値を入力して調整
      
      
      
      
      
      

2. レイアウトコンテナ内のビジュアライゼーションを編集します。[プロパティの編集] を押下すると、チャートの軸やメジャー、スタイルなどを編集することができます。

3. ビジュアライゼーションを削除するには、[削除] を押下します。

③レイアウトコンテナの編集

1. レイアウトコンテナのタイトルやホバーメニューを設定します。必要であれば並列ステートの設定も行います。

2. [スタイル指定] から、レイアウトコンテナのタイトルのフォントや背景、境界線、影を設定します。

3. [チャートを内部に保つ] は、チャートをレイアウトコンテナ内に完全に収める設定です。

4. [グリッド線を表示] をオンにすると、コンテナ内にグリッドが表示されます。視覚的にチャートをそろえて配置できるようになります。

   • 行と列のマスの数を指定できます。任意の数値を入力してください。
   • [チャートをグリッドにスナップする] をオンにすると、チャートをグリッドに沿って配置できます。

④オブジェクトの追加

1. レイアウトコンテナの [コンテンツ] から [追加] を押下します。

2. 散布図を作成したときと同じ手順で、任意のオブジェクトを作成します。今回はⅱの４オブジェクトと、ⅲの４オブジェクトを作成しました。

⑤複数オブジェクトの配置

1. オブジェクトの順序を並べ替えます。上に位置しているほどレイアウトコンテナの上層に、下に位置しているほどレイアウトコンテナの下層に配置されていることになります。

   
   

2. 作成したオブジェクトを画像のように重ねて配置します。売上と利益の金額に応じたランクを表現することができました。

    

「できない」を解決 -応用編-

①チャートを拡大できない！？

　例えばこちらのダッシュボードで、横棒グラフを拡大して全体を見たい、という時。

　おそらく通常はホバーメニューの「全画面」で拡大表示をすると思います。しかしレイアウトコンテナ内に配置したオブジェクトでは「ホバーメニュー」が機能しません。

　※レイアウトコンテナ自体のホバーメニューは使用できますが、レイアウトコンテナ内のオブジェクトすべてが拡大の対象になります。

　ただ、オブジェクトを拡大して確認したい、というシチュエーションは多々あるかと思います。

　というわけで、応用編では「オブジェクトを拡大できない問題」を、レイアウトコンテナの機能を使用して解決していこうと思います。

②変数とボタンで解決！

1. 変数を作成します。（名前：vEnlarge_chart、説明：チャート拡大表示用、定義：0）

2. レイアウトコンテナ内にボタンオブジェクトを配置します。[追加] > [ボタン] から追加してください。また、ラベルに「売上金額_拡大ボタン」と入力します。

3. ボタンの動作設定を行います。[プロパティの編集] > [アクションとナビゲーション] > [アクションの追加] から以下の設定を行ってください。

   • ⅰ）アクション：「変数値の設定」を選択
   • ⅱ）変数：1. で作成した変数を選択
   • ⅲ）値：「='売上'」と入力

4. ボタンのビジュアルを整えます。[スタイル] から以下の設定を行ってください。

   • 4-ⅰ）基本設定：タイトル表示はOFF、ラベルは「=''」と入力
   • 4-ⅱ）アイコン：アイコン表示はON、アイコンは「Expand」を選択、位置は「右」
   • 4-ⅲ）プレゼンテーション：[スタイル指定] > [チャート] から、フォント色を黒、背景色を白に設定
   • 4-ⅳ）作成したボタンを任意の位置に配置します。

5. 拡大後に表示したい棒グラフを複製し、画面全体に配置します。ここでは「売上金額_拡大用」とします。

6. 5.で複製した棒グラフの [売上金額_拡大用] > [条件の表示] に、「=vEnlarge_chart='売上'」と入力します。（「1.の変数 = 3-ⅲの値」を用いています。）

7. 2.～4.を繰り返し、今度は縮小用のボタンを作成します。相違点は以下の3つです。

   • 2.ラベルに「売上金額_縮小ボタン」と入力します。
   • 3-ⅲ）値：「=0」と入力
   • 4-ⅱ）アイコン：アイコン表示はON、アイコンは「Collapse」を選択、位置は「右」
     
     

8. 7.で作成した [売上金額_縮小ボタン] > [条件の表示] に、「=vEnlarge_chart<>0」と入力します。

9. 以上です。編集モードを終了してボタンを操作すると、棒グラフが拡大 ↔ 縮小します。1.～の手順を繰り返すと、「利益 | ランキング」の棒グラフも同様に拡大 ↔ 縮小できます。

こんなダッシュボードを作ってみた！

　基礎編・応用編の内容から、以下画像のようなデザイン性の高いダッシュボードが作成可能になります。画面左側のような「メニューバー」を作成することも可能です。

　※以下は実際に Qlik AI Reality Tour Tokyo のイベントで使用した、弊社オリジナルのダッシュボードです。（上：拡大前、下：拡大時） 

おわりに

　本記事で解説してきたようにレイアウトコンテナを用いると、かなりデザイン性が高く、高機能なダッシュボードを作成することができます。簡単に使用することができるので、この機会にぜひ試してみてください。