List-Grid Bar Chart 구현

 학습목표

List-Grid의 필드 유형 변경 기능을 사용해 List-Grid 상에서 Bar Chart를 구현할 수 있습니다.

1. List-Grid Bar Chart 구현

 List-Grid의 필드 유형 변경 기능을 사용하여 Bar Chart를 나타낼 수 있습니다. 

컨트롤 생성

1. Label 컨트롤을 생성합니다.
   - Label :  [UI Bot > Label]
   
   
   
   
2. Lable 컨트롤의 속성을 변경합니다.
   - Text :  "List-Grid Bar Chart 구현"
   - Font - Size : 16
   
   
   
   
3. List-Grid 컨트롤을 생성합니다.
   - List-Grid :  [UI Bot > Grid > List-Grid]
   
   
   

데이터 가져오기

1. [편집 그룹 > Script Editor]를 선택하여 스크립트 에디터 창을 실행합니다.
   
   
   
   
2. Data Source를 마우스 우클릭한 뒤, New를 선택하여 새로운 데이터 소스를 생성합니다.
   
   
   
   
3. Connection 선택창을 클릭하여 원하는 DB에 연결합니다.
   - DB : edu_40
   
   
   
   

4. 데이터를 가져오기 위해 SQL을 작성하고 [Execute] 버튼을 클릭하여 쿼리의 실행 결과를 확인하고 저장합니다.
   

   Discription

   사용된 SQL

   SQl  원본 펼치기

   SELECT 
   		ROW_NUMBER() OVER (ORDER BY T1.sales desc) AS NUM
    		, T1.branch_name 		AS "지점명" 
    		, T1.bev_div 		AS "음료구분" 
    		, T1.customer_cnt 		AS "방문객수" 
    		, T1.sales 		AS "매출" 
    FROM edu_dev_cafe_sales T1 
    ORDER BY T1.sales DESC

   4.3.3 List-Grid Bar Chart의 색상을 설정하기 위해 넘버링이 필요하기 때문에 ROW_NUMBER() 함수를 사용하여 인덱스를 설정하였습니다.

   
   데이터 바인딩 

   List-Grid에 가져온 데이터를 연결합니다.
   - DataSource : Data1

   
   
   
   

List-Grid 디자인

1. List-Grid를 마우스 우클릭하여 디자인 설정 창을 실행합니다.
   
   
   
   
2. 좌측 리스트에서 SQL을 사용해 가져온 데이터 중 ROW_NUMBER() 함수를 사용하여 가져온 필드를 선택하고 [표시]를 비활성화합니다.
   
   
   
   
3. 데이터 정렬을 위해 지점명과 음료구분 필드를 선택한 후, 텍스트 정렬을 Center로 변경합니다.
   - 정렬 > 텍스트 정렬 : Center
   
   
   
   
4. 좌측 리스트에서 Bar Chart로 변경할 필드를 선택하고 필드 유형을 [SingleBarChart]로 변경합니다.
   - 필드 유형 :  SingleBarChart
   
   
   
   

5. [확인] 버튼을 클릭하여 차트가 정상적으로 나오는지 확인합니다.
   

   Discription

   Bar Chart 초기 적용시

   List-Grid에 Bar Chart를 적용시, Y축에 대한 기준값이 일반적인 차트처럼 값에 따라 자동적으로 정해지는 것이 아니라 Defalut 값이 100으로 설정됩니다. 값이 100을 초과할 시, 위와 같은 형태로 출력됩니다.

2. List-Grid Bar Chart 기준값 설정

차트 Y축에 해당하는 기준값을 설정할 수 있습니다.

기준값 연결

1. Label 컨트롤을 생성합니다.
   - Label :  [UI Bot > Label]
   
   
   
   
2. Label 컨트롤의 속성을 변경합니다.
   - NAME : VS_BAR_MAX
   
   
   
   

3. 생성한 Label에 LIst-Grid의 기준값이 될 데이터를 바인딩합니다.

   
   
   
   

4. [실행] 버튼을 클릭하여 데이터가 정상적으로 바인딩 되었는지 확인합니다.
   
   
   
   

5. Label 컨트롤을 숨기기 위해 [Visible]을 비활성화합니다.
   

기준값 연결

1. List-Grid를 마우스 우클릭하여 디자인 설정 창을 실행합니다.
   
   
   
   
2. []을 클릭하여 새로운 필드를 생성하고 [화면 표시명]과 [필드명]을 변경하고 [표시]를 비활성화하여 숨김 처리합니다.
   - 화면 표시명 : Bar Max
   - 필드명 : Bar Max
   
   
   
   
3. [데이터 > 수식]의 [] 버튼을 클릭하여 수식 편집기 창을 실행합니다.
   
   
   
   
4. 수식 편집기 창에 값을 바인딩한 Label의 Name을 ":"과 함께 입력하고 [적용] 버튼을 클릭합니다.
   - Formula : :VS_BAR_MAX
   
   
   
   
5. 차트로 표시할 필드를 다시 선택하고 [백분율 기준 필드]에 생성한 필드를 연결하고 [확인] 버튼을 클릭합니다.
   
   
   
   

6. [실행] 버튼을 클릭하여 차트의 기준값이 정상적으로 설정되었는지 확인합니다.
   

   📌Tip

   
   

   기준값을 데이터 중에서 선택하지 않고 원하는 임의의 값으로 설정하고 싶을 시, 변수 대신 숫자를 입력합니다.

3. List-Grid Bar Chart 색상 설정

차트의 색상을 원하는 색으로 변경할 수 있습니다.

차트 색상 변경

1. List-Grid를 마우스 우클릭하여 디자인 설정 창을 실행합니다.
   
   
   
   
2. []을 클릭하여 새로운 필드를 생성하고 [화면 표시명]과 [필드명]을 변경하고 [표시]를 비활성화하여 숨김 처리합니다.
   - 화면 표시명 : Bar Color
   - 필드명 : Bar Color
   
   
   
   
3. [데이터 > 수식]의 [] 버튼을 클릭하여 수식 편집기 창을 실행합니다.
   
   
   
   

4. 수식 편집기 창에 적용하고 싶은 색상을 헥사코드 형태로 입력하고 [적용] 버튼을 클릭합니다.
   - Formula : '#9fc5e8'
   

   📌Tip

   헥사 코드란?

   색상코드 앞에 '#'과 뒤에 붙는 6자리를 16진수로 나타내는 것으로 HEX COLOR CODE로 나타낼 수 있는 색상의 수는 16의 6제곱인 16,777,216가지입니다.
   

   *6자리 숫자에 숫자가 아닌 문자로 표기되는 이유는 HEX COLOR CODE가 16진수로 표현되기 때문입니다.

   
   

   

   코드 앞자리 숫자가 0에 가까울수록 채도가 감소하여 검은색 계열에 가까워지고, F에 가까울수록 채도가 증가하여 흰색 계열에 가까워지게 됩니다.

   
   

   
   

5. 차트로 표시할 필드를 다시 선택하고 [Color Field]에 생성한 필드를 연결하고 [확인] 버튼을 클릭합니다.
   
   
   
   

6. [실행] 버튼을 클릭하여 차트의 색상이 정상적으로 설정되었는지 확인합니다.
   

차트 색상 그라데이션 설정

1. List-Grid를 마우스 우클릭하여 디자인 설정 창을 실행합니다.
   
   
   
   
2. 차트 색상을 지정했던 필드를 선택하고 수식의 [] 버튼을 클릭하여 수식 편집기 창을 실행합니다.
   
   
   
   

3. 수식 편집기 창에 ROW_NUMBER() 함수를 사용하여 가져온 필드에 원하는 그라디언트 색상을 순차적으로 입력하고 [적용] 버튼을 클릭합니다.
   

   📌Tip

   그라디언트 색상 참고 사이트

   https://webgradients.com/
   

   그라디언트 색상 조합을 알려주는 사이트로 색상 선택에 어려움을 겪을 때 도움을 받을 수 있습니다.

   https://cssgradient.io/

   일반적으로 그라디언트는 양끝의 색만 주어지는 것이 대부분이기 때문에 그라디언트 색상을 골랐다면 위의 사이트를 이용하여 중간에 위치한 색상들을 뽑아낼 수 있습니다.

4. [확인] 버튼을 클릭하여 디자인 설정을 완료하고 [실행] 버튼을 클릭하여 차트의 색상이 정상적으로 설정되었는지 확인합니다.