# 분산형 차트

## Content

분산형 차트는 개별 항목이나 범주 간의 관계를 시각적으로 표현하는 데 자주 사용되는 차트 유형입니다. 특히 과학적 데이터나 예측 값과 실제 데이터 간의 편차를 강조할 때 효과적입니다.
SpreadJS는 다양한 분산형 차트를 지원하며, 색상 팔레트, 그래프 불투명도, 포인트 심볼, 데이터 레이블 스타일, 축 스타일(카테고리 및 값 축) 등 다양한 속성을 사용자 정의할 수 있습니다. 이러한 설정은 [코드](/spreadjs/docs/features/data-charts/data-chart-elements) 또는 [SpreadJS 디자이너의 속성 탭](/spreadjs/docs/spreadjs-designer-component/spdesignerwork/data-chart-designer/appearance-and-style-)을 통해 적용할 수 있습니다.

>type=note
> 이 문서의 모든 샘플은 [데이터 차트 생성하기](/spreadjs/docs/features/data-charts/create-data-charts) 페이지에서 설명된 "salesTable" 데이터를 기반으로 합니다. 따라서 해당 페이지에서 데이터 차트를 추가하는 기본 단계를 먼저 완료해야 합니다. 또한, 필요에 따라 데이터 소스를 자유롭게 사용자 정의할 수 있습니다.

## 분산형 차트

분산형 차트는 두 개의 숫자형 변수 간의 관계를 시각적으로 나타냅니다. 각 데이터 포인트는 두 변수의 관측값을 기준으로, x축(가로)과 y축(세로)에 위치하게 됩니다. 이로써 데이터의 분포, 상관관계, 이상값 등을 쉽게 파악할 수 있습니다.
아래 이미지는 분산형 차트의 예시입니다:
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.884c83.png?width=550)
다음은 분산형 차트를 추가하는 샘플 코드입니다:

```javascript
// 분산형 차트
const sheet = spread.getActiveSheet();
sheet.name("Scatter Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Scatter Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.scatter,
            encodings: {
                values: [
                    {
                        field: "Return",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    },
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                color: {
                    field: "Product"
                }
            }
        }
    ]
});
```

## 거품형 차트

**거품형 차트**는 분산형 차트의 변형으로, 데이터 포인트를 거품으로 표현하며 세 번째 차원(Z축) 을 추가로 시각화할 수 있는 차트 유형입니다. 각 거품의 위치는 x축과 y축 값에 따라 결정되며, 거품의 크기는 세 번째 수치 값(예: 크기, 수량, 영향력 등)을 나타냅니다.
이러한 시각화는 세 개의 수치 변수 간의 관계를 동시에 비교하고 분석하는 데 유용합니다.
아래 이미지는 거품형 차트의 예시입니다:
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/image.dc464f.png?width=550)
다음 샘플 코드는 거품형 차트를 추가하는 방법을 보여줍니다.

```javascript
// 거품형 차트
const sheet = spread.getActiveSheet();
sheet.name("Bubble Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Bubble Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.bubble,
            encodings: {
                values: [
                    {
                        field: "Return",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    },
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                color: {
                    field: "Product"
                },
                size: {
                    field: "Return",
                    aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                }
            }
        }
    ]
});
```