フィルター パネルの例

このヘルプ トピックでは、フィルター パネルでスタイルやその他のプロパティをカスタマイズして、さまざまな機能目的を達成する方法の例について紹介します。

例 1 - コンパクトなデザイン

フィルター パネルに多数のリストボックスを追加することで、さまざまな軸にまたがるデータの絞り込みが可能になります。

シート上のスペースを節約し、他のビジュアライゼーションを優先的に表示する場合は、 必要に応じて展開および折りたたみできるように、フィルター パネルをコンパクトなデザインにできます。

次の手順を実行します。

1. 新しいアプリを作成し、ロード スクリプトの例 を データ ロード エディター の新しいセクションに貼り付けます。次に、データをロードします。

2. シート ビューに切り替えます。シート プロパティで、 [グリッドの間隔] を 42 に設定します。

3. シートに [フィルター パネル] をドラッグします。

4. [軸の追加] をクリックします。Country を選択します。

5. プロパティ パネルで、 [項目を追加] をクリックします。Item Type を選択します。

6. [項目を追加] ボタンを使用して、他の 4 つの軸をリストボックスとして追加します。

   • Order Year

   • Order Priority

   • Region

   • Sales Channel

7. 追加したリストボックスを 1 つずつ展開し、 [プレゼンテーション] > [リストボックスを折りたたむ] を [常に] に設定します。

8. プロパティ パネルで、 [スタイル] > [プレゼンテーション] を展開します。

9. [スタイル指定] をクリックします。

10. [フィルター パネル] タブで、次のプロパティを設定します。

    • タイトルのフォントサイズ: 18 px

    • タイトルのフォントの色: 16 進コード #ffffff

    • 背景色: 16 進コード #87205d

    • 影: 小、16 進コード #000000

11. [リストボックス] タブで、次のプロパティを設定します。

    • ヘッダーのフォント サイズ: 14 px

12. フィルター パネルのサイズを、シート グリッド上の 2 x 10 のスペースに変更します。

分析モードに切り替えます。必要に応じてリストボックスを展開して、選択を実行できます。

例 2 - リッチなデザイン

フィルター パネルは主にデータのフィルタリングに使用されますが、データのビジュアライゼーションにも使用できます。リッチなデザインを取り入れることで、分析担当者はさまざまな選択をしながらより深い洞察を得ることができます。

次の手順を実行します。

1. 新しいアプリを作成し、ロード スクリプトの例 を データ ロード エディター の新しいセクションに貼り付けます。次に、データをロードします。

2. シート表示に切り替え、 [フィルター パネル] をシート上にドラッグします。

3. [軸の追加] をクリックします。Item Type を選択します。

4. Item Type リストボックスをクリックしてプロパティを展開します。

5. [プレゼンテーション] を展開します。

6. [ヒストグラム] の設定をオンにします。

7. [頻度の表示]ドロップ ダウン メニューで [相対頻度 (%)] を選択します。

8. [リストボックスを折りたたむ] を [Never] (なし) に設定します。

9. [ソート] を展開します。

10. [ソート] を [カスタム] に設定します。

11. すべてのオプションをクリアし、 [数式によるソート] をオンにします。

12. [降順] を選択します。

13. [数式] で、次の数式を入力します。

    Count([Item Type])

14. プロパティ パネルで、 [スタイル] > [一般] を展開します。

15. [タイトルの表示] をオフにします。

16. [スタイル] > [プレゼンテーション] を展開します。

17. [スタイル指定] をクリックします。

18. [リストボックス] タブで、次のプロパティを設定します。

    • ヘッダー:

      • フォント: Inter, sans-serif

      • フォント サイズ: 18px

    • コンテンツ:

      • フォント: Inter, sans-serif

19. フィルター パネルのサイズを小さな長方形に変更します (例: 3 x 4 マス)。

例 3 - 集中型デザイン

フィルター パネルのデザインは、ユーザーにどのような選択方法を提供するかに応じて異なります。たとえば、特定の機能を制限して、より限定的かつ集中的な操作でユーザーがデータを使用できるように促すことができます。

次のようなシナリオが想定されます。

• 特定の軸でフィルタリングすると、値を 1 つずつ選択したときに最も多くのインサイトが得られる場合、または複数の値を選択しても意味のあるインサイトが得られない場合。このような場合は、チェックボックス モードを使用して範囲の選択を無効化することで、分析を誘導できます。

• 項目内での値の検索によってインサイトを得られない場合、または望ましくない場合。

• データのフィルタリング時に、選択ツール バーなどの面倒な要素を最小限に抑えたい場合。

次の手順を実行します。

1. 新しいアプリを作成し、ロード スクリプトの例 を データ ロード エディター の新しいセクションに貼り付けます。次に、データをロードします。

2. シート表示に切り替え、 [フィルター パネル] をシート上にドラッグします。

3. [軸の追加] をクリックします。Item Type を選択します。

4. Item Type リストボックスをクリックしてプロパティを展開します。

5. [検索] を [非表示] に設定します。

6. [選択ツール バーを表示] をオフにします。

7. [プレゼンテーション] を展開します。

8. [チェックボックス モード] をオンにします。

9. プロパティ パネルで、 [スタイル] > [一般] を展開します。

10. [タイトルの表示] をオフにします。

11. フィルター パネルのサイズを小さな長方形に変更します (例: 3 x 4 マス)。

例 4 - グリッド デザイン

小規模で定義されたデータセットを使用するフィルター パネルでは、グリッドモードを使用できます。特に、時間ベースの軸をグリッド状に整理して表示する場合に有効です。

次の手順を実行します。

1. 新しいアプリを作成し、ロード スクリプトの例 を データ ロード エディター の新しいセクションに貼り付けます。次に、データをロードします。

2. シート表示に切り替え、 [フィルター パネル] をシート上にドラッグします。

3. [軸の追加] をクリックします。Order Year を選択します。

4. Order Year リストボックスをクリックしてプロパティを展開します。

5. [タイトルの表示] をオフにします。

6. [プレゼンテーション] を展開します。

7. [リストボックスを折りたたむ] を [Never] (なし) に設定します。

8. [データ表示方法] で、 [グリッド] を選択します。

9. [表示可能最大列] を [カスタム] に設定します。

10. [最大列] を 3 に設定します。

11. フィルター パネルにリストボックスとして Order Quarter を追加します。

12. Order Quarter リストボックスをクリックしてプロパティを展開します。

13. [タイトルの表示] をオフにします。

14. [プレゼンテーション] を展開します。

15. [リストボックスを折りたたむ] を [Never] (なし) に設定します。

16. [データ表示方法] で、 [グリッド] を選択します。

17. [並べ替え順] を [列] に設定します。

18. [表示可能最大行] を [カスタム] に設定します。

19. [最大行] を 1 に設定します。

20. フィルター パネルにリストボックスとして Order Month を追加します。

21. Order Month リストボックスをクリックしてプロパティを展開します。

22. [タイトルの表示] をオフにします。

23. [プレゼンテーション] を展開します。

24. [リストボックスを折りたたむ] を [Never] (なし) に設定します。

25. [データ表示方法] で、 [グリッド] を選択します。

26. [表示可能最大列] を [カスタム] に設定します。

27. [最大列] を 4 に設定します。

28. プロパティ パネルで、 [スタイル] > [一般] を展開します。

29. [タイトルの表示] をオフにします。

30. プロパティ パネルで、 [スタイル] > [プレゼンテーション] を展開します。

31. [スタイル指定] をクリックします。

32. [フィルター パネル] タブで、次のプロパティを設定します。

    • 背景色: #83af9b

33. [リストボックス] タブで、次のプロパティを設定します。

    • コンテンツ:

      • フォント: Fredoka One, fantasy

      • テキスト サイズ: 15px

      • テキスト サイズ: 太字

      • テキスト カラー: #000000

    • 選択状態 > Possible (可能): #000000

    • 背景色: #83af9b

34. フィルター パネルのサイズを、表示に適したサイズに変更します (例: 3 x 3) 。

さらなる機能強化: レイアウト コンテナを備えた複合フィルター パネル

応答性と操作性をさらに高めるために、上記のフィルター パネルを、レイアウト コンテナ内に 3 つのフィルター パネルを埋め込んだ構成として作成することもできます。下の画像は、その例を示しています。

例 5 - 組織のカラー パレットに合わせた調整

フィルター パネルは、組織のカラー パレットに合わせてスタイルを調整できます。背景色や文字色の設定に加え、フィルター パネル内の選択状態に応じた配色を指定できます。選択項目を、既定の緑色ではなく、自社ブランドのメイン カラーで表示するように設定することもできます。

カスタム テーマを使用して、すべてのビジュアライゼーションや選択ツール バーに色を設定することで、組織の配色を一貫して適用することもできます。詳細については、「カスタム テーマ」を参照してください。

この例では、次のブランド カラーを反映したフィルター パネルを作成します。

• メイン カラー: 16 進コード #3100ff

• セカンダリ カラー: 16 進コード #9ba7ff

次の手順を実行します。

1. 新しいアプリを作成し、サンプル データを データ ロード エディター の新しいセクションに貼り付けます。次に、データをロードします。

2. シート表示に切り替え、 [フィルター パネル] をシート上にドラッグします。

3. [軸の追加] をクリックします。Item Type を選択します。

4. プロパティ パネルで、 [項目を追加] をクリックします。Order Year を選択します。

5. [項目を追加] ボタンを使用して、他の 3 つの軸をリストボックスとして追加します。

   • Order Priority

   • Region

   • Sales Channel

6. プロパティ パネルで、 [スタイル] > [一般] を展開します。

7. [タイトルの表示] をオフにします。

8. [スタイル] > [プレゼンテーション] を展開します。

9. [スタイル指定] をクリックします。

10. [フィルター パネル] タブで、次のプロパティを設定します。

    • 影: 小、16 進コード #000000

11. [リストボックス] タブで、次のプロパティを設定します。

    • ヘッダーのフォント サイズ: 14 px

    • 選択状態:

      • 選択済み: 16 進数 #3100ff

      • 代替: 16 進数 #9ba7ff

      • 除外: #bebebe

      • 選択除外: #7b7a78

      • 可能: #ffffff

12. フィルター パネルのサイズをシートの片側に収まる長方形に変更します (例: 3 x 12 マス)。

分析モードに切り替えます。フィルター パネルで選択を実行し、配色を確認します。

ロード スクリプトの例

Sales:
LOAD 
Dual([Order Month Text], [Order Month Num]) as [Order Month],

* INLINE [
Order ID,Order Date,Order Year,Order Quarter,Order Month Text,Order Month Num,Region,Country,Item Type,Sales Channel,Order Priority,Ship Date,Units Sold,Unit Price,Unit Cost,Total Revenue,Total Cost,Total Profit
522840487,2/8/2021,2021,Q1,Feb,2,Central America and the Caribbean,Honduras,Household,Offline,H,2/13/2017,8974,668.27,502.54,5997054.98,4509793.96,1487261.02
832401311,2/19/2021,2021,Q1,Feb,2,Asia,Mongolia,Personal Care,Offline,C,2/23/2014,4901,81.73,56.67,400558.73,277739.67,122819.06
419123971,11/19/2021,2021,Q4,Nov,11,Asia,Sri Lanka,Cosmetics,Offline,M,12/18/2016,6952,437.2,263.33,3039414.4,1830670.16,1208744.24
441619336,12/30/2021,2021,Q4,Dec,12,Asia,Turkmenistan,Household,Offline,L,1/20/2011,3830,668.27,502.54,2559474.1,1924728.2,634745.9
795490682,6/30/2022,2022,Q2,Jun,6,Central America and the Caribbean,Honduras,Snacks,Online,L,7/26/2016,2225,152.58,97.44,339490.5,216804,122686.5
158535134,10/27/2022,2022,Q4,Oct,10,Australia and Oceania,Australia,Office Supplies,Online,C,11/25/2015,2924,651.21,524.96,1904138.04,1534983.04,369155
955357205,1/5/2022,2022,Q1,Jan,1,Europe,United Kingdom,Household,Online,L,2/14/2012,282,668.27,502.54,188452.14,141716.28,46735.86
259353148,4/7/2022,2022,Q2,Apr,4,Sub-Saharan Africa,Djibouti,Cosmetics,Offline,H,4/19/2014,7215,437.2,263.33,3154398,1899925.95,1254472.05
450563752,6/9/2022,2022,Q2,Jun,6,Australia and Oceania,Australia,Cereal,Offline,H,7/2/2013,682,205.7,117.11,140287.4,79869.02,60418.38
705784308,10/30/2022,2022,Q4,Oct,10,Middle East and North Africa,Libya,Clothes,Offline,H,11/17/2010,6116,109.28,35.84,668356.48,219197.44,449159.04
505716836,10/13/2022,2022,Q4,Oct,10,Central America and the Caribbean,Haiti,Cosmetics,Offline,H,11/16/2013,1705,437.2,263.33,745426,448977.65,296448.35
807025039,7/25/2023,2023,Q3,Jul,7,Central America and the Caribbean,Belize,Clothes,Offline,M,9/7/2016,5498,109.28,35.84,600821.44,197048.32,403773.12
166460740,10/24/2023,2023,Q4,Oct,10,Europe,Lithuania,Office Supplies,Offline,H,11/17/2010,8287,651.21,524.96,5396577.27,4350343.52,1046233.75
462405812,4/23/2023,2023,Q2,Apr,4,Asia,Turkmenistan,Office Supplies,Online,M,5/20/2013,5010,651.21,524.96,3262562.1,2630049.6,632512.5
816200339,8/14/2023,2023,Q3,Aug,8,Middle East and North Africa,Libya,Fruits,Online,L,9/30/2015,673,9.33,6.92,6279.09,4657.16,1621.93
555990016,5/20/2023,2023,Q2,May,5,Sub-Saharan Africa,Djibouti,Cereal,Online,H,6/17/2017,8656,205.7,117.11,1780539.2,1013704.16,766835.04
231145322,7/5/2023,2023,Q3,Jul,7,Middle East and North Africa,Pakistan,Cosmetics,Offline,L,8/16/2013,9892,437.2,263.33,4324782.4,2604860.36,1719922.04
986435210,11/6/2023,2023,Q4,Nov,11,North America,Mexico,Household,Offline,C,12/12/2014,6954,668.27,502.54,4647149.58,3494663.16,1152486.42
217221009,10/28/2023,2023,Q4,Oct,10,Australia and Oceania,Federated States of Micronesia,Beverages,Online,C,11/15/2014,9379,47.45,31.79,445033.55,298158.41,146875.14
670854651,7/20/2024,2024,Q3,Jul,7,Australia and Oceania,Samoa,Cosmetics,Online,H,8/7/2013,9654,437.2,263.33,4220728.8,2542187.82,1678540.98
213487374,10/21/2024,2024,Q4,Oct,10,Europe,Spain,Household,Offline,L,11/30/2012,4513,668.27,502.54,3015902.51,2267963.02,747939.49
663110148,9/18/2024,2024,Q3,Sep,9,Middle East and North Africa,Lebanon,Clothes,Online,L,10/8/2012,7884,109.28,35.84,861563.52,282562.56,579000.96
827844560,3/18/2024,2024,Q1,Mar,3,Sub-Saharan Africa,Kenya,Vegetables,Online,L,4/7/2012,6457,154.06,90.93,994765.42,587135.01,407630.41
430915820,2/17/2024,2024,Q1,Feb,2,North America,Mexico,Personal Care,Offline,L,3/20/2012,6422,81.73,56.67,524870.06,363934.74,160935.32
240470397,7/7/2024,2024,Q3,Jul,7,Australia and Oceania,Australia,Beverages,Offline,H,7/11/2014,9389,47.45,31.79,445508.05,298476.31,147031.74
559427106,7/30/2024,2024,Q3,Jul,7,North America,Mexico,Personal Care,Offline,M,8/8/2015,5767,81.73,56.67,471336.91,326815.89,144521.02
665095412,2/10/2025,2025,Q1,Feb,2,Sub-Saharan Africa,Mozambique,Household,Offline,L,2/15/2012,5367,668.27,502.54,3586605.09,2697132.18,889472.91
];

drop fields [Order Month Text], [Order Month Num];