# 원통형, 고가-저가-종가, 고가-저가-시가-종가 도표 ## 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/v6.2/ReportAuthorGuide/Report-Designer-Interface#report-explorer)를 토글한 다음, `도표 - 도표 1` 노드를 선택하고 [속성 패널](/activereportsjs/docs/v6.2/ReportAuthorGuide/Report-Designer-Interface#properties-panel)을 사용하여 구성을 수정합니다. * [원통형 데모](/activereportsjs/demos/Reports/CandlestickPlot/purejs) * [고가-저가-종가 데모](/activereportsjs/demos/Reports/HighLowClosePlot/purejs) * [고가-저가-시가-종가 데모](/activereportsjs/demos/Reports/HighLowOpenClosePlot/purejs) 아래 나열된 보고서 파일을 다운로드하여 [독립 실행형 보고서 디자이너](/activereportsjs/docs/v6.2/ReportAuthorGuide/QuickStart/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/v6.2/#adding-a-chart)하는 경우, 도표 유형을 `원통형`, `고가-저가-종가` 또는 `고가-저가-시가-종가`로 설정하고, `다음 버튼`을 클릭합니다. 차트 마법사는 다음과 같은 도표 설정 페이지를 보여줍니다. ![ChartWizardFinances.cb1185](https://kr-gc-document-site.azurewebsites.net/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/ChartWizardFinances.cb1185.51b58d.png) `데이터 값` 섹션에서는 [데이터 값](/activereportsjs/docs/v6.2/)을 구성할 수 있습니다 . `데이터 범주` 섹션에서는 [범주 인코딩](/activereportsjs/docs/v6.2/#category-encoding)을 설정할 수 있습니다. ### 데이터 값 `원통형`, `고가-저가-종가`, `고가-저가-시가-종가` 도표의 `값` [컬렉션](/activereportsjs/docs/v6.2/ReportAuthorGuide/Report-Items/Common-Properties#collection)은 시각화하려는 가격 요소가 포함된 데이터 값을 결정합니다. 컬렉션 항목에는 서너 개의 [바인딩된 필드 참조](/activereportsjs/docs/v6.2/ReportAuthorGuide/Expressions/references#data-set-fields)이거나 고급 [식](/activereportsjs/docs/v6.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/v6.2/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. 예를 들어 [고가-저가-종가 데모](/activereportsjs/demos/Reports/HighLowClosePlot/purejs)는 각 데이터 레코드의 `High`, `Low`, `Close`, `Date` 필드를 포함하는 데이터 집합에 바인딩되었습니다. 도표의 `범주`는 `{Date}` 식으로 설정되었습니다. * `범주 정렬` 구성은 범주 값이 표시되는 순서를 결정합니다. ### 원통형, 고가-저가-종가, 고가-저가-시가-종가의 모양과 느낌 다음 속성을 사용하여 `원통형`, `고가-저가-종가`, `고가-저가-시가-종가` 도표를 구성하는 셰이프의 모양을 세밀하게 조정할 수 있습니다. 위에 나열된 데모의 구성을 수정하면 그 결과를 실제로 확인할 수 있습니다. `불투명도`는 셰이프의 불투명도를 결정하는 [숫자](/activereportsjs/docs/v6.2/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(백분율)입니다. `100%`는 불투명한 상태를, `0%`는 완전 투명한 상태를 의미합니다. `클리핑 모드`는 [도표 영역](/activereportsjs/docs/v6.2/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area)에서 도표를 그리는 방식을 나타냅니다. * `맞춤` 값은 도표 영역에서 사용 가능한 모든 공간을 사용하여 도표를 맞춰야 함을 의미합니다. * `자르기` 값은 도표 영역의 오른쪽 또는 아래쪽 안쪽 여백 가장자리에서 도표가 잘림을 의미합니다. * `없음` 값은 `맞춤`과 동일합니다. `배경색` [식](/activereportsjs/docs/v6.2/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 종가 값이 원통형 도표의 시가보다 작음을 나타내는 사각형의 채우기 색을 결정합니다. `스타일` 섹션에는 원통형 도표의 사각형 테두리와 고가-저가-종가 및 고가-저가-시가-종가 도표의 선에 적용할 색, 스타일, 너비를 설정할 수 있는 [선 속성](/activereportsjs/docs/v6.2/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)이 있습니다. ### 동적 규칙 `규칙` 구성을 사용하면하나 이상의 데이터 조건에 따라 `if this then that` 규칙을 만들어 도표 모양에 적용할 수 있습니다. 조건은 다음 값 중 하나를 참조할 수 있는 [표현식](/activereportsjs/docs/v6.2/#expression)입니다. * `Chart!CurrentDataHigh`—현재 `데이터 값`의 `고가` 지점 값 * `Chart!CurrentDataLow`—현재 `데이터 값`의 `저가` 지점 값 * `Chart!CurrentDataOpen`—현재 `데이터 값`의 `시가` 지점 값 * `Chart!CurrentDataClose`—현재 `데이터 값`의 `종가` 지점 값 * `Chart!NextDataHigh`—다음 `데이터 값`의 `고가` 지점 값 * `Chart!NextDataLow`—다음 `데이터 값`의 `저가` 지점 값 * `Chart!NextDataOpen`—다음 `데이터 값`의 `시가` 지점 값 * `Chart!NextDataClose`—다음 `데이터 값`의 `종가` 지점 값 * `Chart!PreviousDataHigh`—이전 `데이터 값`의 `고가` 지점 값 `데이터 값` * `Chart!PreviousDataLow`—이전 `데이터 값`의 `저가` 지점 값 * `Chart!PreviousDataOpen`—이전 `데이터 값`의 `시가` 지점 값 * `Chart!PreviousDataClose`—이전 `데이터 값`의 `종가` 지점 값 * `Chart!CurrentCategory` \- 현재 `범주 인코딩` 값 * `Chart!PreviousCategory` \- 이전 `범주 인코딩` 값 * `Chart!NextCategory` \- 다음 `범주 인코딩` 값 조건 표현식에는 [보고서 매개변수](/activereportsjs/docs/v6.2/#parameters) 및 표준 [연산자](/activereportsjs/docs/v6.2/)에 대한 참조도 포함될 수 있습니다. 조건을 빌드하는 가장 쉬운 방법은 `조건` 속성의 오른쪽에 있는 상자를 클릭하여 열 수 있는 표현식 편집기를 사용하는 것입니다. `원통형`, `고가-저가-종가` 및 `고가-저가-시가-종가` 플롯의 다음 시각적 속성은 조건이 충족될 때 적용될 수 있습니다. * 원통의 배경색 * 원통 테두리의 색상 * 원통 테두리의 너비 * 원통 테두리의 스타일 예를 들어, [원통형 도표 데모](https://www.grapecity.com/activereportsjs/demos/Reports/CandlestickPlot/purejs)에서 다음 규칙을 도표에 설정하여 종가가 시가보다 높은 데이터 포인트를 표시할 수 있습니다. ![image.5fc619](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/image.5fc619.993264.png) 결과적으로 차트의 출력은 다음과 같습니다. ![image.f84cf3](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/image.f84cf3.0df922.png)