# 원통형, 고가-저가-종가, 고가-저가-시가-종가 도표 ## 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/v4.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer)를 토글한 다음, `도표 - 도표 1` 노드를 선택하고 [속성 패널](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel)을 사용하여 구성을 수정합니다. * [원통형 데모](/activereportsjs/demos/Reports/CandlestickPlot/purejs) * [고가-저가-종가 데모](/activereportsjs/demos/Reports/HighLowClosePlot/purejs) * [고가-저가-시가-종가 데모](/activereportsjs/demos/Reports/HighLowOpenClosePlot/purejs) 아래 나열된 보고서 파일을 다운로드하여 [독립 실행형 보고서 디자이너](/activereportsjs/docs/v4.1/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) ### Chart Wizard If you [add a chart](/activereportsjs/docs/v4.1/#adding-a-chart) into a report, set the plot type to `CandleStick`, `High-Low-Close` or `High-Low-Open-Close` on the first page of the `Chart Wizard`, and click the `Next` button, the wizard shows the plot settings page that looks like the following: ![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) The `Data Values` section allows configuring [Data Values](/activereportsjs/docs/v4.1/). The `Data Categories` section allows you to set the [Category Encoding](/activereportsjs/docs/v4.1/#category-encoding). ### 데이터 값 `원통형`, `고가-저가-종가`, `고가-저가-시가-종가` 도표의 `값` [컬렉션](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Common-Properties#collection)은 시각화하려는 가격 요소가 포함된 데이터 값을 결정합니다. 컬렉션 항목에는 서너 개의 [바인딩된 필드 참조](/activereportsjs/docs/v4.1/ReportAuthorGuide/Expressions/references#data-set-fields)이거나 고급 [식](/activereportsjs/docs/v4.1/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/v4.1/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. 예를 들어 [고가-저가-종가 데모](/activereportsjs/demos/Reports/HighLowClosePlot/purejs)는 각 데이터 레코드의 `High`, `Low`, `Close`, `Date` 필드를 포함하는 데이터 집합에 바인딩되었습니다. 도표의 `범주`는 `{Date}` 식으로 설정되었습니다. * `범주 정렬` 구성은 범주 값이 표시되는 순서를 결정합니다. ### 원통형, 고가-저가-종가, 고가-저가-시가-종가의 모양과 느낌 다음 속성을 사용하여 `원통형`, `고가-저가-종가`, `고가-저가-시가-종가` 도표를 구성하는 셰이프의 모양을 세밀하게 조정할 수 있습니다. 위에 나열된 데모의 구성을 수정하면 그 결과를 실제로 확인할 수 있습니다. `불투명도`는 셰이프의 불투명도를 결정하는 [숫자](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(백분율)입니다. `100%`는 불투명한 상태를, `0%`는 완전 투명한 상태를 의미합니다. `클리핑 모드`는 [도표 영역](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area)에서 도표를 그리는 방식을 나타냅니다. * `맞춤` 값은 도표 영역에서 사용 가능한 모든 공간을 사용하여 도표를 맞춰야 함을 의미합니다. * `자르기` 값은 도표 영역의 오른쪽 또는 아래쪽 안쪽 여백 가장자리에서 도표가 잘림을 의미합니다. * `없음` 값은 `맞춤`과 동일합니다. `배경색` [식](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 종가 값이 원통형 도표의 시가보다 작음을 나타내는 사각형의 채우기 색을 결정합니다. `스타일` 섹션에는 원통형 도표의 사각형 테두리와 고가-저가-종가 및 고가-저가-시가-종가 도표의 선에 적용할 색, 스타일, 너비를 설정할 수 있는 [선 속성](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)이 있습니다. ### Dynamic Rules The `Rules` configuration allows you to create `if this then that` rules based on one or more data conditions to apply to the plot appearance. A condition is an [expression](/activereportsjs/docs/v4.1/#expression) that may refer to one of the following values: * `Chart!CurrentDataHigh`—the value of the `high` point in the current `Data Value` * `Chart!CurrentDataLow`—the value of the `low` point in the current `Data Value` * `Chart!CurrentDataOpen`—the value of the `open` point in the current `Data Value` * `Chart!CurrentDataClose`—the value of the `close` point in the current `Data Value` * `Chart!NextDataHigh`—the value of the `high` point in the next `Data Value` * `Chart!NextDataLow`—the value of the `low` point in the next `Data Value` * `Chart!NextDataOpen`—the value of the `open` point in the next `Data Value` * `Chart!NextDataClose`—the value of the `close` point in the next `Data Value` * `Chart!PreviousDataHigh`—the value of the `high` point in the previous `Data Value` * `Chart!PreviousDataLow`—the value of the `low` point in the previous `Data Value` * `Chart!PreviousDataOpen`—the value of the `open` point in the previous `Data Value` * `Chart!PreviousDataClose`—the value of the `close` point in the previous `Data Value` * `Chart!CurrentCategory` \- the current `Category Encoding` value * `Chart!PreviousCategory` \- the previous `Category Encoding` value * `Chart!NextCategory` \- the next `Category Encoding` value A condition expression can also include references to [report parameters](/activereportsjs/docs/v4.1/#parameters) and standard [operators](/activereportsjs/docs/v4.1/). The easiest way to build a condition is to use the expression editor that you can open by click on the box on the right side of the `Condition` property. The following visual properties of `CandleStick`, `High-Low-Close` and `High-Low-Open-Close` plots can be applied when a condition is met: * The background color of a candle * The color of the candle's border * The width of the candle's border * The style of the candle's border For instance, you can set the following rules for the plot in the [CandleStick Plot Demo](https://www.grapecity.com/activereportsjs/demos/Reports/CandlestickPlot/purejs) to paint data points that have Closing price higher than the Opening price. ![image.5fc619](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/image.5fc619.993264.png) As a result, the output of the chart will be like this: ![image.f84cf3](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/image.f84cf3.0df922.png)