[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

분산형 차트

분산형 차트는 개별 항목이나 범주 간의 관계를 시각적으로 표현하는 데 자주 사용되는 차트 유형입니다. 특히 과학적 데이터나 예측 값과 실제 데이터 간의 편차를 강조할 때 효과적입니다.

SpreadJS는 다양한 분산형 차트를 지원하며, 색상 팔레트, 그래프 불투명도, 포인트 심볼, 데이터 레이블 스타일, 축 스타일(카테고리 및 값 축) 등 다양한 속성을 사용자 정의할 수 있습니다. 이러한 설정은 코드 또는 SpreadJS 디자이너의 속성(Inspector) 탭을 통해 적용할 수 있습니다.

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

분산형 차트

분산형 차트는 두 개의 숫자형 변수 간의 관계를 시각적으로 나타냅니다. 각 데이터 포인트는 두 변수의 관측값을 기준으로, x축(가로)과 y축(세로)에 위치하게 됩니다. 이로써 데이터의 분포, 상관관계, 이상값 등을 쉽게 파악할 수 있습니다.

아래 이미지는 분산형 차트의 예시입니다:

image


다음은 분산형 차트를 추가하는 샘플 코드입니다:

// 분산형 차트
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


다음 샘플 코드는 거품형 차트를 추가하는 방법을 보여줍니다.

Ask ChatGPT

// 거품형 차트
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
                }
            }
        }
    ]
});