作成方法: レイアウトコンテナを使用した動的分析

この例では、レイアウトコンテナを使用した動的かつインタラクティブなシートコンテンツを作成する方法を紹介します。レイアウトコンテナはグリッドに制約されないデザインと積み上げビジュアライゼーションをサポートしており、分析コンテンツの配置を柔軟に制御できます。さらに、他のコンテナオブジェクトと同様に、変数や選択状態などのさまざまな条件に応じて異なる情報を動的に表示できます。

この例では、複数のチャートの情報を 1 つのオブジェクトとして表示する、レイアウトコンテナを構築する方法を示しています。一般的な設計手法としては、次のようなものがあります。

類似するオブジェクトを対称的に配置し、スタイルを使用してデータの異なるセクションを区別する。
レイアウトコンテナ内の個々のオブジェクトの境界線を削除し、完了したらオブジェクト全体に境界線を追加する。
ユーザーの操作に応じて異なるオブジェクトまたはデータを条件付きで表示する (この例では、ユーザーが詳細を表示または非表示にできる棒グラフ)。
複数の異なるオブジェクトを並べて配置した複合要素を構築する (この例では、オン/オフスイッチのように動作するインタラクティブボタン)。
ユーザーがデータを詳しく調べる必要があるときに、複数の方法でデータを選択およびフィルタリングできるようにする。

準備

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

データをロードしたら、シート表示に切り替えます。

ロードスクリプトの例

SET DateFormat='M/D/YYYY';

Sales:

Load 

date(Now()-Offset,'MM/DD/YYYY') as [Order Date],

* Inline [

Order ID,Offset,Product Type,Shipment Status,Fulfillment Center,Sales,Late Status,Days Late
1,30,Electronics,Delivered,10036,9950,Not Late,
2,30,Office Supplies,Delivered,10036,4412,Not Late,
3,30,Office Supplies,Delivered,10038,7480,Late,3
4,30,Home Improvement,Delivered,10035,665,Late,4
5,30,Home Improvement,Delivered,10038,594,Not Late,
6,30,Home Improvement,Stalled,10038,8267,Not Late,
7,30,Clothing,Delivered,10035,1014,Not Late,
8,30,Cleaning Products,Delivered,10036,6999,Late,1
9,30,Electronics,Delivered,10036,733,Not Late,
10,29,Office Supplies,Delivered,10036,3487,Not Late,
11,29,Office Supplies,Delivered,10035,7343,Not Late,
12,29,Office Supplies,Delivered,10036,9239,Late,14
13,27,Cleaning Products,Delivered,10037,1463,Not Late,
14,27,Cleaning Products,Stalled,10035,4688,Not Late,
15,27,Home Improvement,Delivered,10038,5539,Late,2
16,27,Clothing,Delivered,10035,8388,Not Late,
17,27,Office Supplies,Delivered,10035,7560,Not Late,
18,27,Office Supplies,Delivered,10035,5738,Not Late,
19,27,Office Supplies,Delivered,10035,5469,Not Late,
20,26,Home Improvement,Delivered,10037,1435,Not Late,
21,26,Office Supplies,Delivered,10036,5962,Late,1
22,26,Clothing,Delivered,10035,4020,Late,7
23,26,Electronics,Delivered,10036,3888,Late,5
24,25,Office Supplies,Delivered,10037,6496,Not Late,
25,25,Clothing,Delivered,10038,4215,Late,11
26,25,Home Improvement,Delivered,10036,1801,Not Late,
27,25,Grocery,Delivered,10036,6471,Not Late,
28,24,Home Improvement,In Transit,10036,4578,Not Late,
29,24,Office Supplies,Cancelled,10037,3493,Not Late,
30,24,Office Supplies,Cancelled,10035,6572,Not Late,
31,24,Electronics,In Transit,10037,6691,Not Late,
32,24,Office Supplies,In Transit,10038,2721,Late,9
33,24,Grocery,In Transit,10035,8300,Not Late,
34,23,Grocery,In Transit,10035,840,Not Late,
35,23,Office Supplies,In Transit,10036,8972,Not Late,
36,23,Cleaning Products,Stalled,10036,9474,Not Late,
37,23,Home Improvement,In Transit,10038,1935,Not Late,
38,23,Office Supplies,In Transit,10036,1748,Not Late,
39,23,Seasonal,In Transit,10037,1948,Not Late,
40,22,Office Supplies,In Transit,10035,3121,Not Late,
41,22,Electronics,In Transit,10036,7377,Not Late,
42,22,Cleaning Products,In Transit,10037,1492,Not Late,
43,22,Office Supplies,Stalled,10037,7801,Late,6
44,22,Office Supplies,In Transit,10035,4663,Not Late,
45,22,Grocery,In Transit,10035,4649,Not Late,
46,21,Seasonal,In Transit,10038,2612,Not Late,
47,20,Clothing,In Transit,10036,8880,Late,4
48,20,Office Supplies,In Transit,10036,1391,Late,8
49,20,Cleaning Products,Cancelled,10037,1307,Not Late,
50,20,Home Improvement,In Transit,10037,6424,Not Late,
51,20,Grocery,In Transit,10035,5051,Not Late,
52,20,Cleaning Products,In Transit,10035,1286,Not Late,
53,19,Cleaning Products,In Transit,10038,8719,Not Late,
54,19,Office Supplies,In Transit,10037,8576,Not Late,
55,19,Seasonal,In Transit,10038,2866,Not Late,
56,19,Electronics,Stalled,10035,5186,Late,3
57,19,Clothing,In Transit,10038,4079,Not Late,
58,19,Office Supplies,In Transit,10038,706,Not Late,
59,19,Seasonal,In Transit,10036,6111,Not Late,
60,19,Clothing,In Transit,10036,5677,Not Late,
61,19,Home Improvement,In Transit,10037,3993,Not Late,
62,19,Office Supplies,In Transit,10037,1625,Not Late,
63,19,Seasonal,In Transit,10035,5805,Not Late,
64,19,Home Improvement,In Transit,10035,4453,Not Late,
65,19,Office Supplies,In Transit,10038,2252,Not Late,
66,18,Electronics,In Transit,10038,8362,Not Late,
67,18,Clothing,In Transit,10037,4182,Not Late,
68,18,Cleaning Products,In Transit,10038,9044,Not Late,
69,18,Clothing,In Transit,10035,6531,Not Late,
70,18,Office Supplies,In Transit,10035,8408,Not Late,
71,17,Home Improvement,Stalled,10038,9629,Not Late,
72,17,Seasonal,Preparation,10035,2128,Not Late,
73,17,Home Improvement,Cancelled,10038,1024,Not Late,
74,17,Office Supplies,Preparation,10037,9684,Late,2
75,17,Electronics,Preparation,10036,6753,Late,2
76,16,Clothing,Preparation,10036,3192,Not Late,
77,16,Office Supplies,Preparation,10038,3954,Not Late,
78,16,Office Supplies,Preparation,10035,8377,Not Late,
79,16,Office Supplies,Preparation,10038,2334,Not Late,
80,15,Grocery,Preparation,10037,7178,Not Late,
81,15,Office Supplies,Preparation,10037,1188,Not Late,
82,15,Electronics,Preparation,10035,4908,Not Late,
83,15,Electronics,Preparation,10035,3552,Not Late,
84,15,Clothing,Preparation,10037,875,Not Late,
85,14,Office Supplies,Preparation,10038,7886,Late,4
86,14,Home Improvement,Cancelled,10036,2358,Late,1
87,14,Clothing,Preparation,10037,8368,Not Late,
88,14,Grocery,Preparation,10037,142,Not Late,
89,14,Office Supplies,Preparation,10037,5537,Not Late,
90,14,Home Improvement,Preparation,10035,3231,Not Late,
91,14,Clothing,Preparation,10036,2283,Not Late,
92,14,Office Supplies,Preparation,10038,5952,Not Late,
93,13,Office Supplies,Preparation,10038,5513,Not Late,
94,13,Home Improvement,Preparation,10036,5871,Not Late,
95,13,Grocery,Preparation,10038,4425,Not Late,
96,13,Clothing,Preparation,10037,500,Late,1
97,13,Electronics,Preparation,10037,9792,Not Late,
98,13,Seasonal,Preparation,10035,4576,Not Late,
99,13,Office Supplies,Preparation,10038,228,Not Late,
100,13,Cleaning Products,Preparation,10037,3086,Late,1
101,13,Office Supplies,Preparation,10038,2329,Not Late,
102,12,Home Improvement,Preparation,10036,8862,Not Late,
103,12,Office Supplies,Preparation,10037,3991,Not Late,
104,12,Office Supplies,Preparation,10037,5435,Not Late,
105,12,Grocery,Preparation,10038,2476,Not Late,
106,12,Clothing,Preparation,10037,8362,Not Late,
107,12,Seasonal,Preparation,10035,1496,Not Late,
108,12,Electronics,Preparation,10038,3210,Not Late,
109,11,Clothing,Preparation,10038,7692,Not Late,
110,11,Cleaning Products,Preparation,10037,1585,Not Late,
111,11,Home Improvement,Cancelled,10037,1874,Not Late,
112,11,Office Supplies,Preparation,10037,869,Not Late,
113,11,Office Supplies,Preparation,10036,8578,Not Late,
114,10,Office Supplies,Preparation,10036,684,Not Late,
115,10,Electronics,Preparation,10036,9889,Not Late,
116,10,Office Supplies,Preparation,10036,4256,Not Late,
117,8,Seasonal,Preparation,10038,9288,Late,7
118,8,Office Supplies,Cancelled,10038,1534,Not Late,
119,8,Seasonal,Preparation,10038,7496,Not Late,
120,8,Electronics,Preparation,10036,8454,Late,3
121,8,Office Supplies,Stalled,10038,1063,Late,
122,8,Office Supplies,Preparation,10037,5958,Not Late,
123,8,Seasonal,Preparation,10036,686,Not Late,
124,8,Grocery,Preparation,10036,1799,Not Late,
125,8,Clothing,Stalled,10036,8485,Not Late,
126,7,Office Supplies,Preparation,10036,6451,Not Late,
127,7,Office Supplies,Pending,10036,1212,Not Late,
128,7,Electronics,Pending,10037,9037,Not Late,
129,7,Electronics,Pending,10037,6522,Late,20
130,7,Electronics,Pending,10038,8865,Late,4
131,7,Clothing,Cancelled,10036,7929,Not Late,
132,6,Seasonal,Pending,10038,9082,Not Late,
133,6,Office Supplies,Pending,10037,6563,Not Late,
134,6,Seasonal,Pending,10038,3513,Not Late,
135,5,Office Supplies,Pending,10035,2340,Not Late,
136,5,Cleaning Products,Pending,10035,590,Not Late,
137,5,Office Supplies,Pending,10035,542,Not Late,
138,5,Cleaning Products,Pending,10035,4809,Not Late,
139,5,Grocery,Cancelled,10035,1743,Not Late,
140,5,Office Supplies,Pending,10035,8312,Not Late,
141,4,Clothing,Pending,10035,5895,Not Late,
142,4,Clothing,Pending,10037,4882,Not Late,
143,4,Clothing,Pending,10037,9106,Not Late,
144,3,Office Supplies,Pending,10036,7422,Late,1
145,3,Clothing,Pending,10038,2686,Not Late,
146,3,Office Supplies,Pending,10037,698,Late,3
147,3,Office Supplies,Pending,10035,9514,Not Late,
148,2,Home Improvement,Pending,10037,6206,Late,2
149,2,Office Supplies,Pending,10035,9158,Not Late,
150,1,Electronics,Cancelled,10036,3204,Not Late,

];

drop field Offset;

パート 1: 変数を作成する

最初に、変数を作成します。この変数は、後で追加する条件の基準として使用されます。変数の値は、ボタンオブジェクトとのインタラクションによって分析中に変更されます。

次の変数を作成します。[定義] を =false() に設定します。

vViewChartValues

変数の作成

パート 2: レイアウトコンテナを作成する

次の手順を実行します。

アセットパネルで [ カスタムオブジェクト] > Dashboard bundle を開き、Layout container をシートにドラッグします。
コンテナのサイズをシートグリッド上で 17×10 マスになるように調整します。

パート 3: レイアウトコンテナにビジュアライゼーションを追加する

次に、レイアウトコンテナにビジュアライゼーションを追加します。

次の手順を実行します。

レイアウトコンテナを選択します。
プロパティパネルの [コンテンツ] > [チャート] で、 [追加] をクリックします。[ボタン] を選択します。
アイテムを展開します。[ラベル] を Button_NotLateTitle に設定します。
[サイズ] で、次を設定します。
- 幅 (%): 48
- 高さ (%): 9
[位置] で、次を設定します。
- X 軸 (%): 1
- Y 軸 (%): 1
[プロパティを編集] をクリックします。
[アクションとナビゲーション] を展開します。
[アクションの追加] をクリックします。
[アクション] で、 [項目のすべての値を選択] を選択します。
[項目] で、Late Status を選択します。
[値] で、をクリックします。
以下を追加します:
```
='Not Late'
```
[適用] をクリックします。
[スタイル] > [一般] を展開します。
[ラベル] に Not Late を設定します。
[スタイル] > [プレゼンテーション] を展開します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- レイアウトの動作: 応答性が高い
- フォントサイズ: 最大値
- フォントの色> 色: #006580
- 背景のオプション> 使用している色: #ffffff
をクリックしてスタイルパネルを終了します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。[ボタン] を選択します。
アイテムを展開します。[ラベル] を Button_LateTitle に設定します。
[サイズ] で、次を設定します。
- 幅 (%): 48
- 高さ (%): 9
[位置] で、次を設定します。
- X 軸 (%): 51
- Y 軸 (%): 1
[プロパティを編集] をクリックします。
[アクションとナビゲーション] を展開します。
[アクションの追加] をクリックします。
[アクション] で、 [項目のすべての値を選択] を選択します。
[項目] で、Late Status を選択します。
[値] で、をクリックします。
以下を追加します:
```
='Late'
```
[適用] をクリックします。
[スタイル] > [一般] を展開します。
[ラベル] に Late を設定します。
[スタイル] > [プレゼンテーション] を展開します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- レイアウトの動作: 応答性が高い
- フォントサイズ: 最大値
- フォントの色> 色: #87205d
- 背景のオプション> 使用している色: #ffffff
をクリックしてスタイルパネルを終了します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。[ゲージ] を選択します。
アイテムを展開します。[ラベル] を Gauge_NotLate に設定します。
[サイズ] で、次を設定します。
- 幅 (%): 48
- 高さ (%): 15
[位置] で、次を設定します。
- X 軸 (%): 1
- Y 軸 (%): 11
[プロパティを編集] をクリックします。
メジャーとして Sum(Sales) を追加します。
プロパティパネルの [データ] > [フィルター] で、 [追加] をクリックします。
Late Status を選択します。フィルターを展開します。
既定の [値] フィルタータイプをそのままにして、 Not Late チェックボックスをオンにします。これにより、ビジュアライゼーションデータは Not Late の Late Status 値を含むレコードのみにフィルタリングされます。
[スタイル] > [一般] を展開します。
[タイトルの表示] を [オフ] に設定します。
[スタイル] > [プレゼンテーション] を展開します。
[範囲限度] で、 [最大] を次に設定します。
```
=Sum({1} Sales)
```
チャートの構成を [放射状] から [棒] に変更します。
[方向] を [自動] から [カスタム] に変更し、 [水平] が選択されていることを確認します。
[ライブラリを使用] をオフにし、 [色] を #006580 に設定します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 0 px に設定します。
[チャート] タブに切り替えます。[値ラベル] の色を #ffffff に設定します。
をクリックしてスタイルパネルを終了します。
[スタイル] > [メジャー軸: Sum(Sales)] を展開します。
[ラベルとタイトル] を [なし] に設定します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。[ゲージ] を選択します。
アイテムを展開します。[ラベル] を Gauge_Late に設定します。
[サイズ] で、次を設定します。
- 幅 (%): 48
- 高さ (%): 15
[位置] で、次を設定します。
- X 軸 (%): 51
- Y 軸 (%): 11
[プロパティを編集] をクリックします。
メジャーとして Sum(Sales) を追加します。
プロパティパネルの [データ] > [フィルター] で、 [追加] をクリックします。
Late Status を選択します。フィルターを展開します。
既定の [値] フィルタータイプをそのままにして、 Late チェックボックスをオンにします。これにより、ビジュアライゼーションデータは Late の Late Status 値を含むレコードのみにフィルタリングされます。
[スタイル] > [一般] を展開します。
[タイトルの表示] を [オフ] に設定します。
[スタイル] > [プレゼンテーション] を展開します。
[範囲限度] で、 [最大] を次に設定します。
```
=Sum({1} Sales)
```
チャートの構成を [放射状] から [棒] に変更します。
[方向] を [自動] から [カスタム] に変更し、 [水平] が選択されていることを確認します。
[ライブラリを使用] をオフにし、 [色] を #87205d に設定します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 0 px に設定します。
[チャート] タブに切り替えます。[値ラベル] の色を #ffffff に設定します。
をクリックしてスタイルパネルを終了します。
[スタイル] > [メジャー軸: Sum(Sales)] を展開します。
[ラベルとタイトル] を [なし] に設定します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。KPI を選択します。
アイテムを展開します。[ラベル] を KPI_NotLate に設定します。
[サイズ] で、次を設定します。
- 幅 (%): 48
- 高さ (%): 9
[位置] で、次を設定します。
- X 軸 (%): 1
- Y 軸 (%): 27
[プロパティを編集] をクリックします。
メジャーとして Sum(Sales) を追加します。
メジャーのプロパティで、 [数値書式] を [通貨] に設定します。
[書式パターン] を次に変更します。
```
$ #,##0.00;-$ #,##0.00
```
プロパティパネルの [データ] > [フィルター] で、 [追加] をクリックします。
Late Status を選択します。フィルターを展開します。
既定の [値] フィルタータイプをそのままにして、 Not Late チェックボックスをオンにします。これにより、ビジュアライゼーションデータは Not Late の Late Status 値を含むレコードのみにフィルタリングされます。
[スタイル] > [一般] を展開します。
[タイトルの表示] を [オフ] に設定します。
[スタイル] > [プレゼンテーション] を展開します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- レイアウトの動作: 応答性が高い
- フォントサイズ: 最大値
- [最初の KPI タイトルを表示] をオフにします
をクリックしてスタイルパネルを終了します。
[スタイル] > [色] を展開します。
[ライブラリの色] をオフにします。色を #006580 に設定します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。KPI を選択します。
アイテムを展開します。[ラベル] を KPI_Late に設定します。
[サイズ] で、次を設定します。
- 幅 (%): 48
- 高さ (%): 9
[位置] で、次を設定します。
- X 軸 (%): 51
- Y 軸 (%): 27
[プロパティを編集] をクリックします。
メジャーとして Sum(Sales) を追加します。
メジャーのプロパティで、 [数値書式] を [通貨] に設定します。
[書式パターン] を次に変更します。
```
$ #,##0.00;-$ #,##0.00
```
プロパティパネルの [データ] > [フィルター] で、 [追加] をクリックします。
Late Status を選択します。フィルターを展開します。
既定の [値] フィルタータイプをそのままにして、 Late チェックボックスをオンにします。これにより、ビジュアライゼーションデータは Late の Late Status 値を含むレコードのみにフィルタリングされます。
[スタイル] > [一般] を展開します。
[タイトルの表示] を [オフ] に設定します。
[スタイル] > [プレゼンテーション] を展開します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- レイアウトの動作: 応答性が高い
- フォントサイズ: 最大値
- [最初の KPI タイトルを表示] をオフにします
をクリックしてスタイルパネルを終了します。
[スタイル] > [色] を展開します。
[ライブラリの色] をオフにします。色を #87205d に設定します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。[棒グラフ] を選択します。
アイテムを展開します。[ラベル] を BarChart_Simple に設定します。
[条件の表示] で、をクリックします。
以下を追加します:
```
=vViewChartValues=false()
```
[適用] をクリックします。
[サイズ] で、次を設定します。
- 幅 (%): 81
- 高さ (%): 62
[位置] で、次を設定します。
- X 軸 (%): 1
- Y 軸 (%): 37
[プロパティを編集] をクリックします。
Product Type を軸として追加します。
別の軸 (Late Status) を追加します。

Product Type が [グループ] として、Late Status が [棒] としてリストされるようになりました。
メジャーとして Sum(Sales) を追加します。
メジャーのプロパティで、 [数値書式] を [通貨] に設定します。
[書式パターン] を次に変更します。
```
$ #,##0.00;-$ #,##0.00
```
[スタイル] > [一般] を展開します。
[タイトルの表示] を [オフ] に設定します。
[スタイル] > [プレゼンテーション] を展開します。
[グループ化] から [積み上げ] プレゼンテーションに切り替えます。
[グリッド線の間隔] を [カスタム] に設定します。ドロップダウンで [線なし] を選択します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- 軸ラベルのフォントサイズ: 16 px
をクリックしてスタイルパネルを終了します。
[スタイル] > [色と凡例] を展開します。
[色] を [カスタム] > [数式を使用] に設定します。次の数式を使用します。
```
=if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d'))
```
[凡例の表示] を [オフ] に設定します。
[スタイル] > [X 軸: Product Type, Late Status] を展開します。
[ラベルとタイトル] を [ラベルのみ] に設定します。
[スタイル] > [Y 軸: Sum(Sales)] を展開します。
[ラベルとタイトル] を [ラベルのみ] に設定します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

次の手順を実行します。

[コンテンツ] > [チャート] で、BarChart_Simple を右クリックし、 [複製] をクリックします。
アイテムを展開します。[ラベル] を BarChart_Detailed に設定します。
[条件の表示] で、をクリックします。
以下を追加します:
```
=vViewChartValues=true()
```
[適用] をクリックします。
[プロパティを編集] をクリックします。
[スタイル] > [プレゼンテーション] を展開します。
[値ラベル] をオンにします。
[セグメントラベル] をオンにし、 [合計ラベル] がオンになっていることを確認します。
[スタイル指定] をクリックします。
[チャート] タブに切り替えます。次のプロパティを設定します。
- 軸ラベルのフォントサイズ: 16 px
- 値ラベルのフォントサイズ: 14 px
をクリックしてスタイルパネルを終了します。
[スタイル] > [色と凡例] を展開します。
[スタイル] > [X 軸: Product Type, Late Status] を展開します。
[ラベルとタイトル] を [ラベルのみ] に設定します。
[スタイル] > [Y 軸: Sum(Sales)] を展開します。
[ラベルとタイトル] を [ラベルのみ] に設定します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

レイアウトコンテナに複合スイッチボタンを作成するために使用される 3 つのマスタービジュアライゼーションを作成します。このトグルスイッチを使用すると、ユーザーは棒グラフの値ラベルのオン/オフを切り替えることができます。

アイテム 1: トグルスイッチベース

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。[ボタン] を選択します。
アイテムを展開します。[ラベル] を ToggleSwitch_Base に設定します。
[サイズ] で、次を設定します。
- 幅 (%): 16
- 高さ (%): 7
[位置] で、次を設定します。
- X 軸 (%): 83
- Y 軸 (%): 90
[プロパティを編集] をクリックします。
[アクションとナビゲーション] を展開します。
[アクションの追加] をクリックします。
[アクション] で、 [変数値を設定] を選択します。
[変数] で、vViewChartValues を選択します。
[値] で、をクリックします。

次の数式を追加します。

=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false()))

[適用] をクリックします。
[スタイル] > [一般] を展開します。
[ラベル] に Show Values を設定します。
[スタイル] > [プレゼンテーション] を展開します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 2 px に設定します。
[境界] の色を #000000 に設定します。
[境界] の [角の半径] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- レイアウトの動作: 応答性が高い
- フォントサイズ: 0.5
- フォントの色> 色: #000000
- 背景のオプション> 使用している色: #ffffff
をクリックしてスタイルパネルを終了します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

アイテム 2: オン状態を表すボタン部分

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。[ボタン] を選択します。
アイテムを展開します。[ラベル] を ToggleSwitch_ON に設定します。
[条件の表示] で、をクリックします。
以下を追加します:
```
=vViewChartValues=true()
```
[適用] をクリックします。
[サイズ] で、次を設定します。
- 幅 (%): 4
- 高さ (%): 7
[位置] で、次を設定します。
- X 軸 (%): 95
- Y 軸 (%): 90
[プロパティを編集] をクリックします。
[アクションとナビゲーション] を展開します。
[アクションの追加] をクリックします。
[アクション] で、 [変数値を設定] を選択します。
[変数] で、vViewChartValues を選択します。
[値] で、をクリックします。
次の数式を追加します。
```
=false()
```
[適用] をクリックします。
[スタイル] > [一般] を展開します。
[ラベル] に On を設定します。
[スタイル] > [プレゼンテーション] を展開します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 2 px に設定します。
[境界] の色を #000000 に設定します。
[境界] の [角の半径] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- レイアウトの動作: 応答性が高い
- フォントサイズ: 0.5
- フォントの色> 色: #ffffff
- 背景のオプション> 使用している色: #109600
をクリックしてスタイルパネルを終了します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

アイテム 3: オフ状態を表すボタン部分

次の手順を実行します。

[コンテンツ] > [チャート] で、 [追加] をクリックします。[ボタン] を選択します。
アイテムを展開します。[ラベル] を ToggleSwitch_ON に設定します。
[条件の表示] で、をクリックします。
以下を追加します:
```
=vViewChartValues=false()
```
[適用] をクリックします。
[サイズ] で、次を設定します。
- 幅 (%): 4
- 高さ (%): 7
[位置] で、次を設定します。
- X 軸 (%): 83
- Y 軸 (%): 90
[プロパティを編集] をクリックします。
[アクションとナビゲーション] を展開します。
[アクションの追加] をクリックします。
[アクション] で、 [変数値を設定] を選択します。
[変数] で、vViewChartValues を選択します。
[値] で、をクリックします。
次の数式を追加します。
```
=true()
```
[適用] をクリックします。
[スタイル] > [一般] を展開します。
[ラベル] に Off を設定します。
[スタイル] > [プレゼンテーション] を展開します。
[スタイル指定] をクリックします。
[境界] で [枠線] を 2 px に設定します。
[境界] の色を #000000 に設定します。
[境界] の [角の半径] を 0 px に設定します。
[チャート] タブに切り替えます。次のプロパティを設定します。
- レイアウトの動作: 応答性が高い
- フォントサイズ: 0.5
- フォントの色> 色: #ffffff
- 背景のオプション> 使用している色: #ff001e
をクリックしてスタイルパネルを終了します。
パネル上部のバーをクリックすると、レイアウトコンテナに戻ります。

パート 4: プレゼンテーションの完成

タイトルと境界を追加して、レイアウトコンテナを完成させます。

次の手順を実行します。

プロパティパネルで、 [スタイル] > [一般] を展開します。
タイトルを「Late vs. Non-Late Orders - Sales Impact」に設定します。
[スタイル] > [プレゼンテーション] を展開します。
[チャートを内部に保つ] をオンにします。
[スタイル指定] をクリックします。
[境界] に次のプロパティを設定します。
- 枠線: 2 px
- 色: #7b7a78
[影] に次のプロパティを設定します。
- 標準サイズ
- 色: #7b7a78

結果

シート編集モードを終了します。トグルスイッチボタンをクリックすると、シンプルな棒グラフと詳細な棒グラフが切り替わります。

値ラベルのない棒グラフが表示されている、「値の表示」をオフにしたレイアウトコンテナ — [値の表示] をオフにしたレイアウトコンテナ

値ラベルがある棒グラフが表示されている、「値の表示」をオンにしたレイアウトコンテナ — [値の表示] をオンにしたレイアウトコンテナ

チャート上部の Not Late および Late のタイトルをクリックします。これらの要素をクリックすると、アプリ内で対応する値が選択されることがわかります。

「Late Status」項目で選択されたレイアウトコンテナ。 — Late Status 項目で Not Late が選択されたレイアウトコンテナ。

このページは役に立ちましたか?

このページまたはコンテンツにタイポ、ステップの省略、技術的エラーなどの問題が見つかった場合はお知らせください。

こちらにフィードバックをお寄せください

作成方法: レイアウト コンテナを使用した動的分析

準備

ロード スクリプトの例

パート 1: 変数を作成する

パート 2: レイアウト コンテナを作成する

パート 3: レイアウト コンテナにビジュアライゼーションを追加する

パート 4: プレゼンテーションの完成

結果

このページは役に立ちましたか?

作成方法: レイアウトコンテナを使用した動的分析

ロードスクリプトの例

パート 2: レイアウトコンテナを作成する

パート 3: レイアウトコンテナにビジュアライゼーションを追加する