我如何製作此項目:使用版面配置容器進行動態分析
此範例說明如何使用版面配置容器製作動態、互動式工作表內容。版面配置容器支援無格線設計和堆疊視覺化,可讓您廣泛控制分析內容的排列。此外,如同其他容器物件,您可以根據各種條件 (例如變數和選取狀態) 動態呈現不同的資訊。
此範例說明如何建置版面配置容器,以單一物件的形式呈現來自多個圖表的資訊。一些常見的設計方法包括:
-
以對稱方式排列相似物件,並使用樣式來區分不同的資料區段。
-
從版面配置容器內的個別物件移除邊界,然後在完成時,為整個物件新增邊界。
-
根據使用者互動,有條件地顯示不同的物件或資料—在此範例中,使用者可以顯示或隱藏詳細資料的長條圖。
-
建置由多個不同物件並排組成的複合元素—在此範例中,一個模擬開/關切換的互動式按鈕。
-
讓使用者在需要仔細查看資料時,有多種方式可以選取和篩選資料。
最終結果

準備
建立新的應用程式並將 範例載入指令碼 貼到 資料載入編輯器 中的新區段。然後,載入資料。
載入資料後,切換至工作表檢視。
範例載入指令碼
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 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
版面配置行為:回應式
-
字型大小:最大值
-
字型色彩 > 色彩:#006580
-
背景選項 > 使用的色彩:#ffffff
-
-
按一下
以結束樣式面板。
-
按一下面板中的頂端長條,以返回版面配置容器。
請執行下列動作:
-
在 內容 > 圖表 下方,按一下 新增。選取 按鈕。
-
展開項目。將 標籤 設定為 Button_LateTitle。
-
在 大小 下方,設定下列項目:
-
寬度 (%):48
-
高度 (%):9
-
-
在 位置 下方,設定下列項目:
-
X 軸 (%):51
-
Y 軸 (%):1
-
-
按一下 編輯屬性。
-
展開 動作和導覽。
-
按一下新增動作。
-
對於動作,選取選取欄位中的值。
-
對於欄位,選取Late Status。
-
對於值,按一下
。
-
新增下列內容:
='Late' -
按一下套用。
-
展開外觀 > 一般。
-
將Late設定為標籤。
-
展開外觀 > 呈現。
-
點擊
樣式。
-
在 邊框 下方,將 外框 設定為 0 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
版面配置行為:回應式
-
字體大小:最大值
-
字體顏色 > 顏色:#87205d
-
背景選項 > 使用顏色:#ffffff
-
-
按一下
以結束樣式面板。
-
按一下面板中的頂端長條,以返回版面配置容器。
請執行下列動作:
-
在 內容 > 圖表 下,按一下 新增。選取 量表。
-
展開項目。將 標籤 設定為 Gauge_NotLate。
-
在 大小 下方,設定下列項目:
-
寬度 (%):48
-
高度 (%):15
-
-
在 位置 下,設定下列項目:
-
X 軸 (%):1
-
Y 軸 (%): 11
-
-
按一下編輯屬性。
-
新增 Sum(Sales) 作為量值。
-
在屬性面板中,在資料 > 篩選條件之下,按一下新增。
-
選取 Late Status。展開篩選條件。
-
保留預設的值篩選條件類型,並勾選 Not Late核取方塊。這會將視覺化資料篩選為僅包含Late Status值為 Not Late的記錄。
-
展開外觀 > 一般。
-
將顯示標題設定為關閉。
-
展開外觀 > 呈現。
-
在 範圍限制 下方,將 最大值 設定為下列項目:
=Sum({1} Sales) -
將圖表組態從 徑向 變更為 長條。
-
將 方向 從 自動 變更為 自訂,並確定已選取 水平。
-
關閉 使用物件庫,並將 顏色 設定為 #006580。
-
按一下
樣式。
-
在 邊框 下方,將 外框 設定為 0 像素。
-
切換至圖表索引標籤。將值標籤的顏色設定為 #ffffff。
-
按一下
以結束樣式面板。
-
展開外觀 > 量值軸:Sum(Sales)。
-
將標籤與標題設定為無。
-
按一下面板中的頂部長條以返回版面配置容器。
請執行下列動作:
-
在 內容 > 圖表 下,按一下 新增。選取 量表。
-
展開項目。將 標籤 設定為 Gauge_Late。
-
在 大小 下方,設定下列項目:
-
寬度 (%):48
-
高度 (%):15
-
-
在 位置 下方,設定以下項目:
-
X 軸 (%):51
-
Y 軸 (%): 11
-
-
按一下編輯屬性。
-
新增 Sum(Sales) 作為量值。
-
在屬性面板中,在資料 > 篩選條件之下,按一下新增。
-
選取 Late Status。展開篩選條件。
-
保留預設的值篩選條件類型,並勾選 Late核取方塊。這會將視覺化資料篩選為僅包含Late Status值為 Late的記錄。
-
展開外觀 > 一般。
-
將顯示標題設定為關閉。
-
展開外觀 > 呈現。
-
在 範圍限制 下方,將 最大值 設定為下列項目:
=Sum({1} Sales) -
將圖表組態從 徑向 變更為 長條。
-
將 方向 從 自動 變更為 自訂,並確定已選取 水平。
-
關閉 使用物件庫,並將 顏色 設定為 #87205d。
-
按一下
樣式。
-
在 邊框 下方,將 外框 設定為 0 像素。
-
切換至圖表索引標籤。將值標籤的顏色設定為 #ffffff。
-
按一下
以結束樣式面板。
-
展開外觀 > 量值軸:Sum(Sales)。
-
將標籤與標題設定為無。
-
按一下面板中的頂部長條,以返回版面配置容器。
請執行下列動作:
-
在 內容 > 圖表 下,點擊 新增。選取 KPI。
-
展開項目。將 標籤 設定為 KPI_NotLate。
-
在 大小 下方,設定下列項目:
-
寬度 (%):48
-
高度 (%):9
-
-
在 位置 下方,設定以下項目:
-
X 軸 (%):1
-
Y 軸 (%): 27
-
-
按一下編輯屬性。
-
新增 Sum(Sales) 作為量值。
-
在量值的屬性中,將數字格式設定為貨幣。
-
將格式模式變更為:
$ #,##0.00;-$ #,##0.00 -
在屬性面板的資料中,按一下篩選條件之下的新增。
-
選取 Late Status。展開篩選條件。
-
保留預設的值篩選條件類型,並勾選 Not Late核取方塊。這會將視覺化資料篩選為僅包含Late Status值為 Not Late的記錄。
-
展開外觀 > 一般。
-
將顯示標題設定為關閉。
-
展開外觀 > 呈現。
-
點擊
樣式。
-
在 邊框 下方,將 外框 設定為 0 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
版面配置行為:回應式
-
字體大小:最大值
-
關閉顯示第一個 KPI 標題
-
-
按一下
以結束樣式面板。
-
展開外觀 > 色彩。
-
關閉 物件庫色彩。將色彩設定為 #006580。
-
點擊面板中的頂部長條以返回版面配置容器。
請執行下列動作:
-
在 內容 > 圖表 下,點擊 新增。選取 KPI。
-
展開項目。將 標籤 設定為 KPI_Late。
-
在 大小 下方,設定下列項目:
-
寬度 (%):48
-
高度 (%):9
-
-
在 位置 下方,設定下列項目:
-
X 軸 (%): 51
-
Y 軸 (%): 27
-
-
按一下編輯屬性。
-
新增 Sum(Sales) 作為量值。
-
在量值的屬性中,將數字格式設定為貨幣。
-
將格式模式變更為:
$ #,##0.00;-$ #,##0.00 -
在屬性面板的資料中,按一下篩選條件之下的新增。
-
選取 Late Status。展開篩選條件。
-
保留預設的值篩選條件類型,並勾選 Late核取方塊。這會將視覺化資料篩選為僅包含Late Status值為 Late的記錄。
-
展開外觀 > 一般。
-
將顯示標題設定為關閉。
-
展開外觀 > 呈現。
-
點擊
樣式。
-
在 邊框 下方,將 外框 設定為 0 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
版面配置行為:回應式
-
字體大小:最大值
-
關閉顯示第一個 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 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
軸標籤 字型大小:16 像素
-
-
按一下
以結束樣式面板。
-
展開 外觀 > 色彩和圖例。
-
將 色彩 設為 自訂 > 按照運算式。使用下列運算式:
=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 像素
-
值標籤字體大小:14 像素
-
-
按一下
以結束樣式設定面板。
-
展開外觀 > 色彩和圖例。
-
展開外觀 > X 軸:Product Type, Late Status。
-
將標籤和標題設定為僅限標籤。
-
展開外觀 > Y 軸: Sum(Sales)。
-
將標籤和標題設定為僅限標籤。
-
按一下面板中的頂部長條,以返回版面配置容器。
建立三個主要視覺化,將用於在版面配置容器中建立複合式切換按鈕。這個切換開關將允許使用者在長條圖中開啟和關閉數值標籤。
項目 1:切換開關底座
請執行下列動作:
-
在 內容 > 圖表 下,按一下 新增。選取 按鈕。
-
展開項目。將 標籤 設定為 ToggleSwitch_Base。
-
在 大小 下,設定下列項目:
-
寬度 (%):16
-
高度 (%):7
-
-
在 位置 下,設定以下項目:
-
X 軸 (%):83
-
Y 軸 (%): 90
-
-
按一下 編輯屬性。
-
展開 動作和導覽。
-
按一下新增動作。
-
對於 動作,選取 設定變數值。
-
對於 變數,選取 vViewChartValues。
-
對於值,按一下
。
-
新增以下運算式:
=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false())) -
按一下套用。
-
展開外觀 > 一般。
-
將Show Values設定為標籤。
-
展開外觀 > 呈現。
-
點擊
樣式。
-
在 邊框 下,將 外框 設定為 2 像素。
-
將 邊框 顏色設定為 #000000。
-
將 邊框 的 圓角半徑 設定為 0 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
版面配置行為:回應式
-
字型大小: 0.5
-
字型顏色 > 顏色: #000000
-
背景選項 > 使用顏色: #ffffff
-
-
按一下
以結束樣式面板。
-
點擊面板中的頂部長條以返回版面配置容器。
項目 2:代表開啟狀態的按鈕部分
請執行下列動作:
-
在 內容 > 圖表 下方,點擊 新增。選取 按鈕。
-
展開項目。將 標籤 設定為 ToggleSwitch_ON。
-
針對 顯示條件,按一下
。
-
新增下列內容:
=vViewChartValues=true() -
按一下套用。
-
在 大小 下,設定以下項目:
-
寬度 (%):4
-
高度 (%):7
-
-
在 位置 下,設定下列項目:
-
X 軸 (%): 95
-
Y 軸 (%): 90
-
-
按一下 編輯屬性。
-
展開 動作和導覽。
-
按一下新增動作。
-
對於 動作,選取 設定變數值。
-
對於 變數,選取 vViewChartValues。
-
對於值,按一下
。
-
新增以下運算式:
=false() -
按一下套用。
-
展開外觀 > 一般。
-
將On設定為標籤。
-
展開外觀 > 呈現。
-
點擊
樣式。
-
在 邊框 下,將 外框 設定為 2 像素。
-
將 邊框 顏色設定為 #000000。
-
將 邊框 的 圓角半徑 設定為 0 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
版面配置行為:回應式
-
字型大小:0.5
-
字型顏色 > 顏色:#ffffff
-
背景選項 > 使用的顏色: #109600
-
-
按一下
以結束樣式設定面板。
-
按一下面板中的頂端長條,以返回版面配置容器。
項目 3: 代表關閉狀態的按鈕部分
請執行下列動作:
-
在 內容 > 圖表下方,按一下 新增。選取 按鈕。
-
展開項目。將 標籤 設定為 ToggleSwitch_ON。
-
針對 顯示條件,按一下
。
-
新增下列內容:
=vViewChartValues=false() -
按一下套用。
-
在 大小 下,設定以下項目:
-
寬度 (%):4
-
高度 (%):7
-
-
在 位置 下,設定以下項目:
-
X 軸 (%):83
-
Y 軸 (%): 90
-
-
按一下 編輯屬性。
-
展開 動作和導覽。
-
按一下新增動作。
-
對於 動作,選取 設定變數值。
-
對於 變數,選取 vViewChartValues。
-
對於值,按一下
。
-
新增以下運算式:
=true() -
按一下套用。
-
展開外觀 > 一般。
-
將Off設定為標籤。
-
展開外觀 > 呈現。
-
點擊
樣式。
-
在 邊框 下,將 外框 設定為 2 像素。
-
將 邊框 顏色設定為 #000000。
-
將 邊框 的 圓角半徑 設定為 0 像素。
-
切換至圖表索引標籤。設定下列屬性:
-
版面配置行為:回應式
-
字型大小:0.5
-
字型顏色 > 顏色:#ffffff
-
背景選項 > 使用的顏色:#ff001e
-
-
點擊
以離開樣式面板。
-
點擊面板中的頂部長條以返回版面配置容器。
第 4 部分:完成簡報
透過新增標題和邊框來完成版面配置容器。
請執行下列動作:
-
在屬性面板中,展開外觀 > 一般。
-
將標題設定為延遲與非延遲訂單 - 銷售影響。
-
展開外觀 > 呈現。
-
開啟將圖表保持在內部。
-
按一下
樣式。
-
設定框線的下列屬性:
-
外框:2 像素
-
顏色:#7b7a78
-
-
設定陰影的下列屬性:
-
中等大小
-
顏色:#7b7a78
-
結果
退出工作表編輯模式。按一下切換開關按鈕,以在簡易和詳細長條圖之間切換。
版面配置容器,其中 顯示值 已關閉

版面配置容器,其中 顯示值 已開啟

按一下圖頂端的 Not Late 和 Late 標題。請注意,點擊這些元素會選取應用程式中對應的值。
版面配置容器,在欄位 Late Status 中選取了 Not Late。
