# 원통형, 고가-저가-종가, 고가-저가-시가-종가 도표 ## Content ```원통형```, ```고가-저가-종가```, ```고가-저가-시가-종가``` 도표는 통화 또는 기타 자산의 시간별 가격 변동을 표시하는 데 적합합니다. 이 도표의 가로 축에는 시간이 정렬되고 고가, 저가, 시가, 종가를 나타내는 셰이프에 데이터 값이 인코딩됩니다. ### 원통형 ```원통형``` 도표는 시가 및 종가 값을 나타내는 사각형을 사용하여 가격 요소를 인코딩합니다. 시가 값이 종가 값보다 크면 시각형에 배경색이 채워집니다. 고가 및 저가 값은 사각형 위쪽과 아래쪽에서 투영되는 세로 선으로 표시됩니다. 예를 들어 [원통형 데모](/activereportsjs/demos/Reports/CandlestickPlot/purejs)는 가상 회사의 주가 변동을 보여 줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/CandlestickExample.png) ### 고가-저가-종가 ```고가-저가-종가``` 도표는 표식 1개가 있는 선을 사용하여 가격 요소를 인코딩합니다. 표식은 종가 값을 나타냅니다. 선의 위쪽 및 아래쪽 끝은 각각 고가 및 저가 값을 나타냅니다. 예를 들어 [고가-저가-종가 데모](/activereportsjs/demos/Reports/HighLowClosePlot/purejs)는 가상 회사의 주가 변동을 보여 줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/HighLowCloseExample.png) ### 고가-저가-시가-종가 ```고가-저가-시가-종가``` 도표는 표식 2개가 있는 선을 사용하여 가격 요소를 인코딩합니다. 선 왼쪽에 있는 표식은 시가 값을, 오른쪽에 있는 표식은 종가 값을 나타냅니다. 선의 위쪽 및 아래쪽 끝은 각각 고가 및 저가 값을 나타냅니다. 예를 들어 [고가-저가-시가-종가 데모](/activereportsjs/demos/Reports/HighLowOpenClosePlot/purejs)는 가상 회사의 주가 변동을 보여 줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/HighLowOpenCloseExample.png) ```원통형```, ```고가-저가-종가``` 또는 ```고가-저가-시가-종가``` 도표 템플릿과 다음 섹션에서 설명하는 해당 속성을 사용하여 차트를 구성할 수 있습니다. 다음 데모를 사용하여 도표 속성을 살펴볼 수 있습니다. 링크를 열고 [보고서 탐색기](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#report-explorer)를 토글한 다음, ```도표 - 도표 1``` 노드를 선택하고 [속성 패널](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#properties-panel)을 사용하여 구성을 수정합니다. * [원통형 데모](/activereportsjs/demos/Reports/CandlestickPlot/purejs) * [고가-저가-종가 데모](/activereportsjs/demos/Reports/HighLowClosePlot/purejs) * [고가-저가-시가-종가 데모](/activereportsjs/demos/Reports/HighLowOpenClosePlot/purejs) 아래 나열된 보고서 파일을 다운로드하여 [독립 실행형 보고서 디자이너](/activereportsjs/docs/v2.2/ReportAuthorGuide/Get-Started-With-Designer-App)에서 열 수도 있습니다. * [원통형 보고서](/activereportsjs/demos/en/sample/Reports/CandlestickPlot/purejs/candlestick.rdlx-json) * [고가-저가-종가 보고서](/activereportsjs/demos/en/sample/Reports/HighLowClosePlot/purejs/high-low-close.rdlx-json) * [고가-저가-시가-종가 보고서](/activereportsjs/demos/en/sample/Reports/HighLowOpenClosePlot/purejs/high-low-open-close.rdlx-json) ### 데이터 값 ```원통형```, ```고가-저가-종가```, ```고가-저가-시가-종가``` 도표의 ```값``` [컬렉션](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#collection)은 시각화하려는 가격 요소가 포함된 데이터 값을 결정합니다. 컬렉션 항목에는 서너 개의 [바인딩된 필드 참조](/activereportsjs/docs/v2.2/ReportAuthorGuide/Expressions/references#data-set-fields)이거나 고급 [식](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#expression)이어야 하는 ```값``` 속성이 포함되어 있습니다. 식에 있는 ```high```, ```low```, ```open```, ```close``` 레이블은 해당 값을 구성하는 데 도움이 됩니다. 예를 들어 [원통형 데모](/activereportsjs/demos/Reports/CandlestickPlot/purejs)에는 다음 데이터 값이 있습니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/CandlestickValue.png) ### 범주 인코딩 ```원통형```, ```고가-저가-종가```, ```고가-저가-시가-종가``` 도표의 ```범주 인코딩```은 도표가 위의 ```데이터 값```을 나타내는 셰이프를 생성하는 기간을 결정하는 속성 집합입니다. * ```범주```는 일반적으로 날짜를 나타내는 [바인딩된 필드 참조](/activereportsjs/docs/v2.2/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. 예를 들어 [고가-저가-종가 데모](/activereportsjs/demos/Reports/HighLowClosePlot/purejs)는 각 데이터 레코드의 ```High```, ```Low```, ```Close```, ```Date``` 필드를 포함하는 데이터 집합에 바인딩되었습니다. 도표의 ```범주```는 ```{Date}``` 식으로 설정되었습니다. * ```범주 정렬``` 구성은 범주 값이 표시되는 순서를 결정합니다. ### 원통형, 고가-저가-종가, 고가-저가-시가-종가의 모양과 느낌 다음 속성을 사용하여 ```원통형```, ```고가-저가-종가```, ```고가-저가-시가-종가``` 도표를 구성하는 셰이프의 모양을 세밀하게 조정할 수 있습니다. 위에 나열된 데모의 구성을 수정하면 그 결과를 실제로 확인할 수 있습니다. ```불투명도```는 셰이프의 불투명도를 결정하는 [숫자](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(백분율)입니다. ```100%```는 불투명한 상태를, ```0%```는 완전 투명한 상태를 의미합니다. ```클리핑 모드```는 [도표 영역](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area)에서 도표를 그리는 방식을 나타냅니다. * ```맞춤``` 값은 도표 영역에서 사용 가능한 모든 공간을 사용하여 도표를 맞춰야 함을 의미합니다. * ```자르기``` 값은 도표 영역의 오른쪽 또는 아래쪽 안쪽 여백 가장자리에서 도표가 잘림을 의미합니다. * ```없음``` 값은 ```맞춤```과 동일합니다. ```배경색``` [식](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 종가 값이 원통형 도표의 시가보다 작음을 나타내는 사각형의 채우기 색을 결정합니다. ```스타일``` 섹션에는 원통형 도표의 사각형 테두리와 고가-저가-종가 및 고가-저가-시가-종가 도표의 선에 적용할 색, 스타일, 너비를 설정할 수 있는 [선 속성](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)이 있습니다.