# 분산형 및 거품형 도표 ## Content ```분산형``` 및 ```거품형``` 도표는 데이터 값 사이 관계를 시각화하는 데 적절합니다. 두 도표에서는 가로 및 세로 축을 따라 데이터 값을 정렬하고 교차 지점에 ```기호```라고 하는 점을 표시합니다. ```거품형``` 도표는 추가 데이터 값을 기호의 크기로 인코딩합니다. ### 기본 분산형 도표 가장 간단한 이 형태에서 분산형 도표는 두 변수 간의 관계를 시각화합니다. 예를 들어, [기본 분산형 데모](/activereportsjs/demos/Reports/SimpleScatterPlot/purejs)에서는 1인당 GDP와 기대 수명 간의 상관 관계를 표시합니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/SimpleScatterExample.png) ### 기본 거품형 도표 거품형 도표는 세 번째 변수를 표시되는 기호의 크기로 인코딩하여 해당 변수를 시각화에 추가합니다. 예를 들어, [기본 거품형 데모](/activereportsjs/demos/Reports/SimpleBubblePlot/purejs)에서는 나무의 직경, 높이와 양 간의 상관 관계를 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/SimpleBubbleExample.png) ### 다중 범주 분산형 및 거품형 도표 데이터 값을 범주로 분할하도록 분산형 및 거품형 도표를 구성하고 기호의 색, 셰이프 또는 둘 다를 사용하여 데이터 값을 시각화할 수 있습니다. 예를 들어, [다중 범주 분산형 데모](/activereportsjs/demos/Reports/CategorizedScatterPlot/purejs)에서는 대륙별 1인당 GDP와 기대 수명 간의 상관 관계를 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/CategorizedScatterExample.png) 다음 섹션에서 설명하는 ```분산형``` 및 ```거품형``` 도표 템플릿과 속성을 사용하여 이러한 모든 유형을 구성할 수 있습니다. 다음 데모를 사용하여 도표 속성을 살펴보고, 링크를 열고, [보고서 탐색기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer)를 토글하고, ```도표 - 도표 1``` 노드를 선택하고, [속성 패널](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel)을 사용하여 구성을 수정할 수 있습니다. * [기본 분산형 도표 데모](/activereportsjs/demos/Reports/SimpleScatterPlot/purejs) * [기본 거품형 도표 데모](/activereportsjs/demos/Reports/SimpleBubblePlot/purejs) * [다중 범주 분산형 도표 데모](/activereportsjs/demos/Reports/CategorizedScatterPlot/purejs) 아래 나열된 보고서 파일을 다운로드하여 [독립 실행형 보고서 디자이너](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App)에서 열 수 있습니다. * [기본 분산형 도표 보고서](/activereportsjs/demos/en/sample/Reports/SimpleScatterPlot/purejs/scatter-simple.rdlx-json) * [기본 거품형 도표 보고서](/activereportsjs/demos/en/sample/Reports/SimpleBubblePlot/purejs/bubble-simple.rdlx-json) * [다중 범주 분산형 도표 보고서](/activereportsjs/demos/en/sample/Reports/CategorizedScatterPlot/purejs/scatter-categorized.rdlx-json) ### 데이터 값 분산형 및 거품형 도표의 ```값``` [컬렉션](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#collection)은 관계를 시각화하려는 데이터 값을 결정합니다. 컬렉션 항목에는 [바인딩된 필드 참조](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions/references#data-set-fields) 또는 고급 [식](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#expressions)의 쌍이어야 하는 ```값``` 속성이 포함되어 있습니다. 첫 번째 식의 값은 가로 축을 따라 정렬되고 두 번째 식의 값은 세로 축을 따라 정렬됩니다. 예를 들어, [기본 분산형 도표 데모](/activereportsjs/demos/Reports/SimpleScatterPlot/purejs)에는 ```{gdpPercap}, {lifeExp}``` 데이터 값이 있습니다. ### 색 인코딩 ```색 인코딩```은 [색 범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)를 활성화하고 ```색``` [식](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions)과 여러 ```색``` 값을 하나의 값으로 줄이는 선택적 ```색 집계``` 함수를 포함합니다. 분산형 및 거품형 도표는 ```데이터 값``` 컬렉션으로 생성된 항목에 대해 고유한 ```색 인코딩``` 결과를 계산하여 그 결과를 해당 데이터 요소의 채우기 색으로 변환하고, 범례에 색과 인코딩 결과 간 일치를 표시합니다. 색은 [차트 팔레트](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#general-chart-configuration)에서 가져옵니다. 예를 들어, [다중 범주 분산형 도표 데모](/activereportsjs/demos/Reports/CategorizedScatterPlot/purejs)에서는 색 인코딩을 위한 ```{continent}``` 식을 사용합니다. 따라서 보고서 출력에는 대륙을 해당하는 데이터 요소의 채우기 색상과 일치시키는 [색 범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)가 표시됩니다. *참고: ```색``` 속성은 컬렉션이지만 ```분산형``` 및 ```거품형``` 도표는 첫 번째 항목만 사용합니다.* ### 셰이프 인코딩 ```셰이프 인코딩```은 [셰이프 범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)를 활성화하고 ```셰이프``` [식](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions)과 여러 ```셰이프``` 값을 하나의 값으로 줄이는 선택적 ```셰이프 집계``` 함수를 포함합니다. 분산형 및 거품형 도표는 ```데이터 값``` 컬렉션으로 생성된 항목에 대해 고유한 ```셰이프 인코딩``` 결과를 계산하여 그 결과를 해당 데이터 요소의 기호로 변환하고, 범례에 기호와 인코딩 결과 간 일치를 표시합니다. 지원되는 셰이프는 점, 상자, 다이아몬드, 삼각형, 십자, 파선, 더하기입니다. 예를 들어, [다중 범주 분산형 도표 데모](/activereportsjs/demos/Reports/CategorizedScatterPlot/purejs)에서는 셰이프 인코딩을 위한 ```{continent}``` 식을 사용합니다. 따라서 보고서 출력에는 대륙을 해당하는 데이터 요소의 기호와 일치시키는 [셰이프 범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)가 표시됩니다. *참고: ```셰이프``` 속성은 컬렉션이지만 ```분산형``` 및 ```거품형``` 도표는 첫 번째 항목만 사용합니다.* 색 인코딩과 셰이프 인코딩이 동일한 값을 사용하면 ```다중 범주 분산형 도표 데모```에서처럼 셰이프 범례와 색 범례가 단일 범례로 병합됩니다. ### 크기 인코딩 ```거품형``` 도표의 ```크기 인코딩```은 [크기 범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)를 활성화하고 ```크기``` [식](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions)과 여러 ```크기``` 값을 단일 값으로 줄이는 ```크기 집계``` 함수를 포함합니다. 크기 인코딩은 숫자 값으로만 작동하며 ```기호```의 크기를 결정하는 범위로 값을 나눕니다. 따라서 거품형 도표에서 추가 정보를 인코딩할 수 있습니다. 예를 들어, [기본 거품형 도표 데모](/activereportsjs/demos/Reports/SimpleBubblePlot/purejs)에서는 크기 인코딩을 ```{Volume}``` 식으로 설정합니다. 따라서 이 도표에서는 ```볼륨``` 필드의 고유한 값에서 파생된 기호 크기의 범위를 사용합니다. *참고: ```크기``` 속성은 컬렉션이지만 ```거품형``` 도표는 첫 번째 항목만 사용합니다.* ### 기호의 모양 및 느낌 다음 속성을 사용하면 ```분산형``` 및 ```거품형``` 도표를 구성하는 기호의 모양을 미세하게 조정할 수 있습니다. 위에서 참조하는 모든 데모의 구성을 수정하여 그 결과를 실제로 확인할 수 있습니다. ```불투명도```는 기호의 불투명도를 결정하는 [숫자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(%)입니다. ```100%```는 불투명한 상태를, ```0%```는 완전히 투명한 상태를 의미합니다. [선 속성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties), ```배경색``` 식, ```기호 셰이프```를 사용하면 기호의 모양을 설정할 수 있습니다. ```기호 셰이프```가 ```자동```이면 도표에서는 기본값을 선택하거나 앞에서 설명한 ```셰이프 인코딩```을 적용합니다. ### 도구 설명 및 레이블 템플릿 다음 내용과 함께 데이터 요소 기호에 도구 설명과 레이블을 표시할 수 있습니다. 이 두 항목은 ```도구 설명 템플릿``` 및 ```레이블 텍스트 템플릿``` 식을 사용하여 각각 설정할 수 있습니다. 드롭다운 목록에서 다음 값 중 하나를 선택할 수 있습니다. * ```값 필드 이름```은 일반적으로 ```데이터 값```의 두 번째 항목이 바인딩되는 필드 이름을 의미합니다. * ```값 필드 값```은 ```데이터 값```의 두 번째 항목의 현재 값을 의미합니다. * ```색 필드 이름```은 일반적으로 ```색 인코딩```이 바인딩되는 필드 이름을 의미합니다. * ```색 필드 값```은 현재 ```색 인코딩``` 값을 의미합니다. * ```셰이프 필드 이름```은 일반적으로 ```셰이프 인코딩```이 바인딩되는 필드 이름을 의미합니다. * ```셰이프 필드 값```은 현재 ```셰이프 인코딩``` 값을 의미합니다. * ```크기 필드 이름```은 일반적으로 ```크기 인코딩```이 바인딩되는 필드 이름을 의미합니다. * ```크기 필드 값```은 현재 ```크기 인코딩``` 값을 의미합니다. 또한 템플릿의 [식 편집기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#expression-editor)에서 [보간 구문](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions#interpolation-syntax)과 [서식이 지정된 지원되는 문자열](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings)을 사용하여 이러한 값에 대한 서식을 설정할 수도 있습니다. 예를 들어, [기본 분산형 도표 데모](/activereportsjs/demos/Reports/SimpleScatterPlot/purejs)에서 ```레이블 텍스트 템플릿```을 ```{valueField.value:f0}```으로 설정하여 10진수를 사용하지 않고 기대 수명 값을 표시할 수 있습니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/LabelsFormat2.png) ### 레이블 모양 ```레이블 텍스트``` 섹션의 [텍스트 속성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) 하위 집합 및 ```레이블 테두리``` 섹션의 [선 속성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)을 사용하면 도표 레이블의 해당하는 시각적 매개 변수를 설정할 수 있습니다. 픽셀로 표시되는 ```레이블 위치``` 및 선택적 ```오프셋```은 부모 데이터 요소 기호를 기준으로 레이블의 위치를 결정합니다. * ```내부``` \- 내부 * ```외부``` \- 위쪽 * ```가운데``` \- 가운데 * ```자동``` - ```외부```와 같음 ```겹치는 레이블``` 속성은 겹치는 레이블의 처리를 나타냅니다. 가능한 값은 다음과 같습니다. * ```자동``` \- 겹침을 방지하기 위해 일부 레이블을 숨깁니다. * ```표시``` \- 계속해서 겹치더라도 모든 레이블을 표시합니다. ```레이블 선``` 섹션의 [선 속성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)을 사용하면 레이블과 부모 데이터 요소 사이에 연결 선을 추가할 수 있습니다. ```레이블 선 위치```는 레이블의 경계 상자와 선의 연결 점을 결정합니다. * ```자동``` \- 자동으로 선택됨 * ```가운데``` \- 경계 상자측 가운데 ### 작업 이 속성은 보고서 구독자가 데이터 요소 기호를 클릭할 때 [대화형 작업](/activereportsjs/docs/v2.1/ReportAuthorGuide/Interactivity#action-property)을 결정합니다. [바인딩된 필드 참조](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions/references#data-set-fields)를 사용하여 드릴스루 보고서의 매개 변수를 전달하거나 동적 책갈피 또는 URL을 구성할 수 있습니다. 필드 값은 현재 데이터 값의 범위 내에서 평가됩니다. 자세한 내용은 [드릴스루 보고서 연습](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-DrillThrough-Reports)을 참조하십시오. 여기서는 드릴스루 [세로 막대형 도표](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/column)를 설정하는 방법에 대해 설명하지만 동일한 기법을 분산형 또는 거품형 도표에도 적용할 수 있습니다.