만든 방법: 레이아웃 컨테이너를 사용한 동적 분석

이 예에서는 레이아웃 컨테이너를 사용하여 동적이고 대화형 시트 콘텐츠를 만드는 방법을 보여 줍니다. 레이아웃 컨테이너는 그리드 없는 설계와 쌓인 시각화를 지원하므로 분석 콘텐츠의 배열을 광범위하게 제어할 수 있습니다. 또한 다른 컨테이너 개체와 마찬가지로 변수 및 선택 상태 등 다양한 조건에 따라 다른 정보를 동적으로 표시할 수 있습니다.

이 예에서는 여러 차트의 정보를 단일 개체로 표시하는 레이아웃 컨테이너를 구축할 수 있음을 보여 줍니다. 일반적인 설계 접근 방식은 다음과 같습니다.

서로 다른 데이터 섹션을 구분하기 위해 스타일링을 사용하여 유사한 개체를 대칭적으로 배열합니다.
레이아웃 컨테이너 내부의 개별 개체에서 테두리를 제거한 다음, 작업이 끝나면 전체 개체 주위에 테두리를 추가합니다.
사용자 상호 작용에 따라 다양한 개체나 데이터를 조건부로 표시합니다. 이 예에서는 사용자가 세부 정보를 표시하거나 숨길 수 있는 막대형 차트를 사용합니다.
서로 다른 여러 개체를 나란히 배치하여 구성된 복합 요소를 구축합니다. 이 예에서는 켜기/끄기 스위치를 모방한 대화형 버튼이 있습니다.
사용자가 자세히 살펴볼 때 데이터를 선택하고 필터링할 수 있는 여러 가지 방법을 제공합니다.

준비

새 앱을 만들고 로드 스크립트 예를 데이터 로드 편집기의 새 섹션에 붙여넣습니다. 그런 다음 데이터를 로드합니다.

데이터를 로드한 후 시트 보기로 전환합니다.

로드 스크립트 예

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 x 10 정사각형이 되도록 조정합니다.

3부: 레이아웃 컨테이너에 시각화 추가

다음으로, 레이아웃 컨테이너에 시각화를 추가합니다.

다음과 같이 하십시오.

레이아웃 컨테이너를 선택합니다.
속성 패널의 콘텐츠 > 차트에서 추가를 클릭합니다. 버튼을 선택합니다.
항목을 확장합니다. 레이블을 Button_NotLateTitle로 설정합니다.
크기에서 다음을 설정합니다.
- 너비(%): 48
- 높이(%): 9
위치에서 다음을 설정합니다.
- X 축(%): 1
- Y 축(%): 1
속성 편집을 클릭합니다.
작업 및 탐색을 확장합니다.
동작 추가를 클릭합니다.
작업에서 필드에서 값 선택을 선택합니다.
필드에서 Late Status를 선택합니다.
값에서 을 클릭합니다.
다음을 추가합니다.
```
='Not Late'
```
적용을 클릭합니다.
모양 > 일반을 확장합니다.
Not Late을 레이블로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 레이아웃 동작: 반응형
- 글꼴 크기: 최댓값
- 글꼴 색 > 색: #006580
- 배경 옵션 > 사용된 색: #ffffff
스타일링 패널을 종료하려면 을 클릭합니다.
패널의 상위 막대를 클릭하면 레이아웃 컨테이너로 돌아갑니다.

다음과 같이 하십시오.

콘텐츠 > 차트에서 추가를 클릭합니다. 버튼을 선택합니다.
항목을 확장합니다. 레이블을 Button_LateTitle로 설정합니다.
크기에서 다음을 설정합니다.
- 너비(%): 48
- 높이(%): 9
위치에서 다음을 설정합니다.
- X 축(%): 51
- Y 축(%): 1
속성 편집을 클릭합니다.
작업 및 탐색을 확장합니다.
동작 추가를 클릭합니다.
작업에서 필드에서 값 선택을 선택합니다.
필드에서 Late Status를 선택합니다.
값에서 을 클릭합니다.
다음을 추가합니다.
```
='Late'
```
적용을 클릭합니다.
모양 > 일반을 확장합니다.
Late을 레이블로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 레이아웃 동작: 반응형
- 글꼴 크기: 최댓값
- 글꼴 색 > 색: #87205d
- 배경 옵션 > 사용된 색: #ffffff
스타일링 패널을 종료하려면 을 클릭합니다.
패널의 상위 막대를 클릭하면 레이아웃 컨테이너로 돌아갑니다.

다음과 같이 하십시오.

콘텐츠 > 차트에서 추가를 클릭합니다. 게이지를 선택합니다.
항목을 확장합니다. 레이블을 Gauge_NotLate로 설정합니다.
크기에서 다음을 설정합니다.
- 너비(%): 48
- 높이(%): 15
위치에서 다음을 설정합니다.
- X 축(%): 1
- Y 축(%): 11
속성 편집을 클릭합니다.
Sum(Sales)을 측정값으로 추가합니다.
속성 패널의 데이터 > 필터에서 추가를 클릭합니다.
Late Status을 선택합니다. 필터를 확장합니다.
기본 값 필터 유형을 유지하고 Not Late 확인란을 선택합니다. 이는 Late Status 값이 Not Late인 레코드만 필터링하여 시각화 데이터를 표시합니다.
모양 > 일반을 확장합니다.
제목 표시를 끄기로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
범위 제한에서 최대를 다음과 같이 설정합니다.
```
=Sum({1} Sales)
```
차트 구성을 방사형에서 막대형으로 변경합니다.
방향을 자동에서 사용자 지정으로 변경하고 가로가 선택되어 있는지 확인합니다.
라이브러리 사용을 끄고 색을 #006580으로 설정합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 0px로 설정합니다.
차트 탭으로 전환합니다. 값 레이블의 색을 #ffffff로 설정합니다.
스타일링 패널을 종료하려면 을 클릭합니다.
모양 > 측정값 축: Sum(Sales)를 확장합니다.
레이블 및 제목을 없음으로 설정합니다.
패널의 상위 막대를 클릭하면 레이아웃 컨테이너로 돌아갑니다.

다음과 같이 하십시오.

콘텐츠 > 차트에서 추가를 클릭합니다. 게이지를 선택합니다.
항목을 확장합니다. 레이블을 Gauge_Late로 설정합니다.
크기에서 다음을 설정합니다.
- 너비(%): 48
- 높이(%): 15
위치에서 다음을 설정합니다.
- X 축(%): 51
- Y 축(%): 11
속성 편집을 클릭합니다.
Sum(Sales)을 측정값으로 추가합니다.
속성 패널의 데이터 > 필터에서 추가를 클릭합니다.
Late Status을 선택합니다. 필터를 확장합니다.
기본 값 필터 유형을 유지하고 Late 확인란을 선택합니다. 이는 Late Status 값이 Late인 레코드만 필터링하여 시각화 데이터를 표시합니다.
모양 > 일반을 확장합니다.
제목 표시를 끄기로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
범위 제한에서 최대를 다음과 같이 설정합니다.
```
=Sum({1} Sales)
```
차트 구성을 방사형에서 막대형으로 변경합니다.
방향을 자동에서 사용자 지정으로 변경하고 가로가 선택되어 있는지 확인합니다.
라이브러리 사용을 끄고 색을 #87205d로 설정합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 0px로 설정합니다.
차트 탭으로 전환합니다. 값 레이블의 색을 #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인 레코드만 필터링하여 시각화 데이터를 표시합니다.
모양 > 일반을 확장합니다.
제목 표시를 끄기로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 레이아웃 동작: 반응형
- 글꼴 크기: 최댓값
- 첫 번째 KPI 제목 표시를 끕니다.
스타일링 패널을 종료하려면 을 클릭합니다.
모양 > 색을 확장합니다.
라이브러리 색을 끕니다. 색을 #006580으로 설정합니다.
패널의 상위 막대를 클릭하면 레이아웃 컨테이너로 돌아갑니다.

다음과 같이 하십시오.

콘텐츠 > 차트에서 추가를 클릭합니다. KPI를 선택합니다.
항목을 확장합니다. 레이블을 KPI_Late로 설정합니다.
크기에서 다음을 설정합니다.
- 너비(%): 48
- 높이(%): 9
위치에서 다음을 설정합니다.
- X 축(%): 51
- Y 축(%): 27
속성 편집을 클릭합니다.
Sum(Sales)을 측정값으로 추가합니다.
측정값 속성에서 숫자 서식을 화폐로 설정합니다.
서식 패턴을 다음으로 변경합니다.
```
$ #,##0.00;-$ #,##0.00
```
속성 패널의 데이터 > 필터에서 추가를 클릭합니다.
Late Status을 선택합니다. 필터를 확장합니다.
기본 값 필터 유형을 유지하고 Late 확인란을 선택합니다. 이는 Late Status 값이 Late인 레코드만 필터링하여 시각화 데이터를 표시합니다.
모양 > 일반을 확장합니다.
제목 표시를 끄기로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 레이아웃 동작: 반응형
- 글꼴 크기: 최댓값
- 첫 번째 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
```
모양 > 일반을 확장합니다.
제목 표시를 끄기로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
그룹화에서 누적 프레젠테이션으로 전환합니다.
그리드 줄 간격을 사용자 지정으로 설정합니다. 드롭다운에서 줄 없음을 선택합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 축 레이블 글꼴 크기: 16px
스타일링 패널을 종료하려면 을 클릭합니다.
모양 > 색 및 범례를 확장합니다.
색을 사용자 지정 > 표현식별로 설정합니다. 다음 표현식을 사용합니다.
```
=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()
```
적용을 클릭합니다.
속성 편집을 클릭합니다.
모양 > 프레젠테이션을 확장합니다.
값 레이블을 켭니다.
세그먼트 레이블을 켜고, 전체 레이블이 켜져 있는지 확인합니다.
스타일링을 클릭합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 축 레이블 글꼴 크기: 16px
- 값 레이블 글꼴 크기: 14px
스타일링 패널을 종료하려면 을 클릭합니다.
모양 > 색 및 범례를 확장합니다.
모양 > 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을 레이블로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 2px로 설정합니다.
테두리 색을 #000000으로 설정합니다.
테두리의 모서리 반경을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 레이아웃 동작: 반응형
- 글꼴 크기: 0.5
- 글꼴 색 > 색: #000000
- 배경 옵션 > 사용된 색: #ffffff
스타일링 패널을 종료하려면 을 클릭합니다.
패널의 상위 막대를 클릭하면 레이아웃 컨테이너로 돌아갑니다.

항목 2: ON 상태를 나타내는 버튼 부분

다음과 같이 하십시오.

콘텐츠 > 차트에서 추가를 클릭합니다. 버튼을 선택합니다.
항목을 확장합니다. 레이블을 ToggleSwitch_ON로 설정합니다.
조건 표시에서 을 클릭합니다.
다음을 추가합니다.
```
=vViewChartValues=true()
```
적용을 클릭합니다.
크기에서 다음을 설정합니다.
- 너비(%): 4
- 높이(%): 7
위치에서 다음을 설정합니다.
- X 축(%): 95
- Y 축(%): 90
속성 편집을 클릭합니다.
작업 및 탐색을 확장합니다.
동작 추가를 클릭합니다.
작업에서 변수 값 설정을 선택합니다.
변수에서 vViewChartValues를 선택합니다.
값에서 을 클릭합니다.
다음 표현식을 추가합니다.
```
=false()
```
적용을 클릭합니다.
모양 > 일반을 확장합니다.
On을 레이블로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 2px로 설정합니다.
테두리 색을 #000000으로 설정합니다.
테두리의 모서리 반경을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 레이아웃 동작: 반응형
- 글꼴 크기: 0.5
- 글꼴 색 > 색: #ffffff
- 배경 옵션 > 사용된 색: #109600
스타일링 패널을 종료하려면 을 클릭합니다.
패널의 상위 막대를 클릭하면 레이아웃 컨테이너로 돌아갑니다.

항목 3: OFF 상태를 나타내는 버튼 부분

다음과 같이 하십시오.

콘텐츠 > 차트에서 추가를 클릭합니다. 버튼을 선택합니다.
항목을 확장합니다. 레이블을 ToggleSwitch_ON로 설정합니다.
조건 표시에서 을 클릭합니다.
다음을 추가합니다.
```
=vViewChartValues=false()
```
적용을 클릭합니다.
크기에서 다음을 설정합니다.
- 너비(%): 4
- 높이(%): 7
위치에서 다음을 설정합니다.
- X 축(%): 83
- Y 축(%): 90
속성 편집을 클릭합니다.
작업 및 탐색을 확장합니다.
동작 추가를 클릭합니다.
작업에서 변수 값 설정을 선택합니다.
변수에서 vViewChartValues를 선택합니다.
값에서 을 클릭합니다.
다음 표현식을 추가합니다.
```
=true()
```
적용을 클릭합니다.
모양 > 일반을 확장합니다.
Off을 레이블로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
스타일링을 클릭합니다.
테두리에서 윤곽선을 2px로 설정합니다.
테두리 색을 #000000으로 설정합니다.
테두리의 모서리 반경을 0px로 설정합니다.
차트 탭으로 전환합니다. 다음 속성을 설정합니다.
- 레이아웃 동작: 반응형
- 글꼴 크기: 0.5
- 글꼴 색 > 색: #ffffff
- 배경 옵션 > 사용된 색: #ff001e
스타일링 패널을 종료하려면 을 클릭합니다.
패널의 상위 막대를 클릭하면 레이아웃 컨테이너로 돌아갑니다.

4부: 프레젠테이션 마무리

제목과 테두리를 추가하여 레이아웃 컨테이너를 마무리합니다.

다음과 같이 하십시오.

속성 패널에서 모양 > 일반을 확장합니다.
제목을 Late vs. Non-Late Orders - Sales Impact으로 설정합니다.
모양 > 프레젠테이션을 확장합니다.
차트를 내부에 유지를 켭니다.
스타일링을 클릭합니다.
테두리에 다음 속성을 설정합니다.
- 윤곽선: 2px
- 색: #7b7a78
그림자에 다음 속성을 설정합니다.
- 중간 사이즈
- 색: #7b7a78

결과

시트 편집 모드를 종료합니다. 설정/해제 스위치 버튼을 클릭하면 간단한 막대형 차트와 자세한 막대형 차트를 번갈아 볼 수 있습니다.

'값 표시'가 꺼진 레이아웃 컨테이너, 값 레이블 없이 막대형 차트 표시 — 값 표시가 꺼진 레이아웃 컨테이너

'값 표시'가 켜진 레이아웃 컨테이너, 값 레이블이 있는 막대형 차트 표시 — 값 표시가 켜진 레이아웃 컨테이너

차트 상단의 Not Late 및 Late 제목을 클릭합니다. 이러한 요소를 클릭하면 앱에서 해당 값이 선택됩니다.

'지연 상태' 필드에서 선택한 레이아웃 컨테이너. — 필드 Late Status에 선택 항목 Not Late이 있는 레이아웃 컨테이너.

이 페이지가 도움이 되었습니까?

이 페이지 또는 해당 콘텐츠에서 오타, 누락된 단계 또는 기술적 오류와 같은 문제를 발견하면 알려 주십시오!

여기에 피드백을 남겨주십시오.