# 나선형 도표 ## Content `나선형` 도표는 원형 셰이프를 사용하여 `범주` 간에 `데이터 값`을 비교하는 데 적합합니다. 이 도표에서는 방사형 선을 따라 범주를 정렬하고 데이터 값을 원형 가로 막대로 인코딩합니다. 또한 포함 범주 내에서 데이터 값을 하위 범주로 나누는 방법을 선택할 수도 있습니다. 아래 예에서 **데이터 값**은 굵은 글꼴을 사용하여 강조하고, *범주*는 기울임꼴 글꼴을 사용하여 강조합니다. ### 기본 나선형 가장 간단한 이 형태에서 나선형 도표는 극좌표형 좌표계에 표시되는 [가로 막대형 도표](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column)와 매우 유사합니다. 예를 들어, [기본 나선형 데모](/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs)에서는 *제품 범주*별 **매출 금액**을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/SimpleSpiralExample.png) ### 누적 나선형 누적 나선형 도표는 포함 범주 내에서 해당하는 원형 하위 섹션을 서로 옆에 배치하여 데이터 값을 하위 범주로 나눕니다. [묶은 나선형 데모](/activereportsjs/demos/Reports/StackedSpiralPlot/purejs)에서는 *제품 범주*에 따라 각 판매 채널당 **매출 금액**을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/StackedSpiralExample.png) ### 백분율 표시 누적 나선형 백분율 표시 누적 나선형 도표는 누적 나선형 도표와 `백분율 표시` [축 눈금](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes#scale-type)을 결합합니다. 각 데이터 값의 하위 범주가 포함 범주의 합계에 기여한 정도를 나타냅니다. 예를 들어 [백분율 표시 누적 나선형 데모](/activereportsjs/demos/Reports/StackedPercentageSpiralPlot/purejs)에서는 *제품 범주*별 판매 채널의 **매출 금액** 점유율(%)을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/PercentageStackedSpiralExample.png) 다음 섹션에서 설명하는 `나선형` 도표 템플릿과 속성을 사용하여 이러한 모든 유형을 구성할 수 있습니다. `누적 나선형` 및 `백분율 표시 누적 나선형` 템플릿은 특정 구성에 대한 바로 가기입니다. 다음 데모를 사용하여 도표 속성을 살펴보고, 링크를 열고, [보고서 탐색기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#report-explorer)를 토글하고, `도표 - 도표 1` 노드를 선택하고, [속성 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#properties-panel)을 사용하여 구성을 수정할 수 있습니다. * [기본 나선형 데모](/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs) * [누적 나선형 데모](/activereportsjs/demos/Reports/StackedSpiralPlot/purejs) * [백분율 표시 누적 나선형 데모](/activereportsjs/demos/Reports/StackedPercentageSpiralPlot/purejs) 아래 나열된 보고서 파일을 다운로드하여 [독립 실행형 보고서 디자이너](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)에서 열 수 있습니다. * [기본 나선형 보고서](/activereportsjs/demos/en/sample/Reports/SimpleSpiralPlot/purejs/simple-spiral.rdlx-json) * [누적 나선형 보고서](/activereportsjs/demos/en/sample/Reports/StackedSpiralPlot/purejs/stacked-spiral.rdlx-json) * [백분율 표시 누적 나선형 보고서](/activereportsjs/demos/en/sample/Reports/StackedPercentageSpiralPlot/purejs/stacked-percent-spiral.rdlx-json) ### Chart Wizard If you [add a chart](/activereportsjs/docs/v6.1/#adding-a-chart) into a report, set the plot type to `Spiral` on the first page of the `Chart Wizard`, and click the `Next` button, the wizard shows the `Spiral Settings` page that looks like the following: ![ChartWizardSpiral.dba2b0](https://kr-gc-document-site.azurewebsites.net/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/ChartWizardSpiral.dba2b0.c7d03d.png) The `Data Values` section allows you to add one or more [Data Values](/activereportsjs/docs/v6.1/#data-values). The `Data Categories` section allows you to set the [Category Encoding](/activereportsjs/docs/v6.1/#category-encoding). The `Data Subcategories` section allows you to configure the [Details Encoding](/activereportsjs/docs/v6.1/#details-encoding). ### 데이터 값 `나선형` 도표는 순 매출 또는 평균 강수량과 같은 항목을 비교하는 데 사용됩니다. 도표의 `값` [컬렉션](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#collection)은 두 가지 속성으로 구성된 다음 항목을 결정합니다. * `값`은 일반적으로 [바인딩된 필드 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. *참고: 이 속성은 컬렉션이지만 `나선형` 도표는 첫 번째 항목만 사용합니다.* * `집계`는 여러 필드 값을 단일 값으로 줄이는 선택적 함수입니다(예: `Count` 또는 `Average`). [바인딩된 데이터 집합](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#data-set-name)에는 집계된 값이 포함되며 이 속성을 `없음`으로 설정할 수 있습니다. 예를 들어, [기본 나선형 데모](/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs)의 도표에는 `Value={SalesAmount}, Aggregate=Sum` 데이터 값이 있습니다. `나선형` 도표는 현재 여러 데이터 값을 지원하지 않습니다. 따라서 `값` 컬렉션에는 항상 항목이 하나 포함되어 있어야 합니다. ### 범주 인코딩 `나선형` 도표의 `범주 인코딩`은 도표가 위의 `데이터 값`을 나타내는 원형 막대를 생성하는 `범주 값`의 범위를 결정하는 속성 집합입니다. * `범주`는 일반적으로 하나 이상의 [바운딩 필드 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. 해당 필드와 값이 동일한 바인딩된 데이터 집합 레코드는 동일한 범주에 속합니다. 예를 들어, [기본 나선형 데모 차트](/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs)는 `제품 범주`를 비롯하여 데이터 레코드당 여러 필드를 포함하는 `판매 데이터 집합`에 바인딩됩니다. 도표의 `범주` 목록에는 `{ProductCategory}` 참조가 포함되어 있습니다. 따라서 도표는 `판매 데이터 집합`을 거치면서 고유한 `제품 범주` 필드 값을 방사형 세로 선을 따라 배치합니다. * `범주 정렬` 구성은 범주 값 모양의 순서를 결정합니다. 예를 들어, `기본 나선형 데모`의 도표에는 매출 합계별로 제품 범주를 오름차순으로 정렬하는 다음 설정이 있습니다. * `범주 정렬 식 = {SalesAmount}` * `범주 정렬 집계 = Sum` * `범주 정렬 방향 = 오름차순` ### 세부 정보 인코딩 `세부 정보 인코딩`을 사용하면 더 세분화해 비교하기 위해 위의 `데이터 값`을 포함 범주 내 하위 범주로 나눌 수 있습니다. `나선형` 도표의 `세부 정보` 속성은 이러한 하위 범주를 정의하는 항목의 [컬렉션](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#collection)입니다. 각 항목에는 다음과 같은 속성이 있습니다. * `값`은 일반적으로 하나 이상의 [바운딩 필드 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. 해당 필드와 값이 동일한 바인딩된 데이터 집합 레코드는 동일한 하위 범주에 속합니다. 예를 들어, [누적 나선형 데모](/activereportsjs/demos/Reports/StackedSpiralPlot/purejs)에서 도표의 `세부 정보` 값은 `{SalesChannel}`입니다. 따라서 `매출 금액` 원형 막대가 고유한 판매 채널에 해당하는 여러 하위 섹션으로 나뉩니다. * `Null 제외` 플래그는 정의되지 않은 `세부 정보 값`이 있는 데이터 집합 레코드가 시각화에서 제외되어야 함을 나타냅니다. * `그룹` 속성은 도표가 하위 섹션으로 구분된 원형 가로 막대를 배열하는 방법을 결정합니다. * `누적` \- 도표에서 하위 섹션이 나란히 배치됩니다\. 이 값을 사용하여 `누적 나선형` 도표를 구성할 수 있습니다. * `묶기` \- 하위 섹션이 그룹으로 묶입니다\. * `없음` \- 기본값과 동일합니다\. * `정렬` 구성은 하위 섹션 모양의 순서를 결정합니다. ### 색 인코딩 `색 인코딩`은 `범주 인코딩` 또는 `세부 정보 인코딩`의 [색 범례](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)를 활성화하고 `색` [식](/activereportsjs/docs/ReportAuthorGuide/Expressions)과 여러 `색` 값을 하나의 값으로 줄이는 선택적 `색 집계` 함수를 포함합니다. `세부 정보 인코딩`이 비어 있다고 가정해 보겠습니다. 이러한 경우 `나선형` 도표는 `범주 인코딩`에서 생성되는 범주에 대해 고유한 `색 인코딩` 결과를 계산하고 그 결과를 해당하는 원형 섹터의 배경색으로 변환한 다음 [범례](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)에 일치 여부를 표시합니다. 그러지 않은 경우 극좌표형은 `세부 정보 인코딩`에서 생성되는 하위 범주에 대해 고유한 `색 인코딩` 결과를 계산하고 그 결과를 해당하는 하위 섹션의 배경색으로 변환한 다음 [범례](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)에 일치 여부를 표시합니다. 두 가지 경우 모두 도표는 [차트 팔레트](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart#general-chart-configuration)에서 색을 선택합니다. 예를 들어, [누적 나선형 데모](/activereportsjs/demos/Reports/StackedSpiralPlot/purejs)의 색 인코딩은 `{SalesChannel}` 식으로 설정됩니다. 따라서 보고서 출력에는 제품 채널을 해당 가로 막대 하위 섹션 배경과 일치시키는 [범례](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)가 표시됩니다. 대부분의 경우 `세부 정보 인코딩` 및 `색 인코딩`에 동일한 구성을 사용하여 데이터 값 분석의 시각적 맵을 활성화합니다. *참고: `색` 속성은 컬렉션이지만 `나선형` 도표는 첫 번째 항목만 사용합니다.* ### 나선형의 모양 및 느낌 다음 속성을 사용하면 `나선형` 도표를 구성하는 셰이프의 기하학적 모양을 미세하게 조정할 수 있습니다. 나선형 도표 데모의 구성을 수정하여 그 결과를 실제로 확인할 수 있습니다. `불투명도`는 원형 가로 막대의 불투명도를 결정하는 [숫자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(%)입니다. `100%`는 불투명한 상태를, `0%`는 완전히 투명한 상태를 의미합니다. `내부 반경`은 도표 가운데 있는 구멍의 크기를 정의하는 외부 반경의 비율을 나타내는 [숫자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(%)입니다. `시작 각도`는 도표 시계 방향의 회전을 정의하는 [숫자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(호 각도)입니다. 전체 회전은 `360`도입니다. 모든 나선형 도표 데모에서 이 속성은 `90`으로 설정됩니다. `스윕`은 도표가 차지하는 호 길이를 결정하는 `0`\~ `360` 범위의 [숫자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(호 각도)입니다. 모든 나선형 도표 데모에서 이 속성은 `270`으로 설정됩니다. `클리핑 모드`는 [도표 영역](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area)이 도표를 그리는 방식을 나타냅니다. * `맞춤` 값은 도표 영역에서 도표를 맞추기 위해 사용 가능한 모든 공간을 사용해야 함을 의미합니다. * `자르기` 값은 도표 영역이 오른쪽 또는 아래쪽 안쪽 여백의 가장자리에서 도표를 절단함을 나타냅니다. * `없음` 값은 `맞춤`과 동일합니다. `스타일` 섹션의 [선 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)은 원형 가로 막대 테두리의 모양을 결정합니다. `배경` 섹션의 색 [식](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 원형 가로 막대의 채우기 색을 설정하고 앞에서 설명한 `색 인코딩`을 덮어씁니다. ### 도구 설명 및 레이블 템플릿 The `Text Encoding` collection offers a way to configure spiral plots to display customized labels and tooltips on the circular bars. Each item within this collection has the following properties: * `Values`: This is an expression that can reference the values of the bound fields. * `Aggregate`: This optional function, such as `Count` or `Average`, can condense multiple field values into a single value, evaluated within the current detail or category context. * `Template Key`: A string used within the Labels or Tooltip template to represent the text encoding item. * `Target`: This property specifies whether the text encoding item is meant for the plot's labels or tooltips. Adding items to the `Text Encoding` collection allows automatic display of configured values in Labels or Tooltips, based on the `Target` value of each item. To further customize the text of the labels and tooltips, you can employ the `Tooltip Template` and `Label Text Template` expressions. Apart from Text Encoding items referenced by their keys, you can utilize the following pre-defined values: * `{valueField.name}`: `데이터 값`에 바인딩된 필드 이름을 의미합니다. * `{valueField.value}`: 포함된 범주 또는 세부 정보 내의 현재 데이터 값을 나타냅니다. * `{PercentageDetail}`: 동일한 세부 정보 내의 모든 값 중에서 현재 데이터 값의 비율을 나타냅니다. * `{PercentageCategory}`: 동일한 범주 내의 모든 값 중에서 현재 데이터 값의 백분율 점유율을 나타냅니다. * `{categoryField.name}`: Category Encoding에 바인딩된 필드 이름을 나타냅니다. * `{categoryField.value}`: 현재 범주 인코딩 값을 나타냅니다. * `{detailFields.name}`: 일반적으로 `세부 정보 인코딩`에 바인딩된 필드 이름을 의미합니다. * `{detailFields.value}`: 현재 `세부 정보 인코딩` 값을 의미합니다. * `{colorField.name}`: 일반적으로 `색 인코딩`에 바인딩된 필드 이름을 의미합니다. * `{colorField.value}`: 현재 `색 인코딩` 값을 의미합니다. These values can be combined and formatted using the [interpolation syntax](/activereportsjs/docs/v6.1/#interpolation-syntax) and supported format strings that are also used for the [TextBox Report Item](/activereportsjs/docs/v6.1/#content). For example, the plot in the [Simple Spiral Demo](/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs) uses an advanced tooltip configuration: * The `Text Encoding` contains the `SalesQuantity` element that displays the number of sold items: * `Aggregate` = `Sum` * `Value` = `{SalesQuantity}` * `Target` = `Tooltip` * `TemplateKey` = `SalesQuantity` * The `Tooltip Template` is configured with the following expression: ``` {categoryField.value} Quantity: {SalesQuantity} Amount: {valueField.value:C2} ``` ### 레이블 모양 `레이블 텍스트` 섹션의 [텍스트 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) 하위 집합 및 `레이블 테두리` 섹션의 [선 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)을 사용하면 도표 레이블의 해당하는 시각적 매개 변수를 설정할 수 있습니다. 픽셀로 표시되는 `레이블 위치` 및 선택적 `오프셋`은 부모 원형 가로 막대를 기준으로 레이블의 위치를 결정합니다. * `내부` \- 가장자리에 * `외부` \- 외부에 * `가운데` \- 내부 가운데 * `자동` - `외부`와 같음 `겹치는 레이블` 속성은 겹치는 레이블의 처리를 나타냅니다. 가능한 값은 다음과 같습니다. * `자동` \- 겹침을 방지하기 위해 일부 레이블을 숨깁니다\. * `표시` \- 계속해서 겹치더라도 모든 레이블을 표시합니다\. `레이블 선` 섹션의 [선 속성](/activereportsjs/docs/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/v6.1/#expression) that may refer to one of the following values: * `Chart!CurrentData` \- the current `Data Value` * `Chart!PreviousData` \- the previous `Data Value` * `Chart!NextData` \- the next `Data Value` * `Chart!CurrentCategory` \- the current `Category Encoding` value * `Chart!PreviousCategory` \- the previous `Category Encoding` value * `Chart!NextCategory` \- the next `Category Encoding` value * `Chart!CurrentDetail` \- the current `Details Encoding` value * `Chart!PreviousDetail` \- the previous `Details Encoding` value * `Chart!NextDetail` \- the next `Details Encoding` value A condition expression can also include references to [report parameters](/activereportsjs/docs/v6.1/#parameters) and standard [operators](/activereportsjs/docs/v6.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 a `Spiral` plot can be applied when a condition is met: * The background color of a circular bar * The color of the circular bar border * The width of the circular bar border * The style of the circular bar border * The tooltip and label template For instance, you can set the following rules for the plot in the [Simple Spiral Plot Demo](/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs) to apply the specified background color to the curcular bar when the `Category` is `Computers`: ![SpiralRulesExample](https://kr-gc-document-site.azurewebsites.net/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/SpiralRulesExample.1d00ee.png) As a result, the output of the chart will be like this: ![SpiralRulesOutput](https://kr-gc-document-site.azurewebsites.net/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/SpiralRulesOutput.fb2888.png) ### 작업 이 속성은 보고서 구독자가 원형 가로 막대의 내부를 클릭할 때 [대화형 작업](/activereportsjs/docs/ReportAuthorGuide/Interactivity#action-property)을 결정합니다. [바인딩된 필드 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields)를 사용하여 드릴스루 보고서의 매개 변수를 전달하거나 동적 책갈피 또는 URL을 구성할 수 있습니다. 필드 값은 현재 세부 정보의 범위 내에서 평가됩니다. 자세한 내용은 [드릴스루 보고서 연습](/activereportsjs/docs/ReportAuthorGuide/QuickStart/분석-보고서-시작하기/Get-Started-With-DrillThrough-Reports)을 참조하십시오. 여기서는 드릴스루 [세로 막대형 도표](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column)를 설정하는 방법에 대해 설명하지만 동일한 기법을 나선형 도표에도 적용할 수 있습니다.