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

혼합 차트

혼합 차트는 여러 차트 유형(예: 세로 막대, 꺾은선, 영역)을 하나의 통합 차트로 결합할 수 있는 유연한 시각화 도구입니다. 이를 통해 사용자들은 수량, 추세, 비율 등 서로 다른 데이터 유형을 하나의 그래픽 표시 안에서 비교하고 표현할 수 있습니다.

image

지원되는 차트 조합

다음 표는 하나의 혼합 차트에서 조합 가능한 차트 유형을 보여줍니다.

주 차트 유형

혼합 가능 차트

혼합 예시

세로 막대형

세로 막대형, 영역형, 꺾은선형, 주식형, OHLC

image

가로 막대형

가로 막대형

-

영역형

세로 막대형, 영역형, 꺾은선형, 주식형, OHLC

image.0b0c4f.png

꺾은선형

세로 막대형, 영역형, 꺾은선형, 주식형, OHLC

image.c47076.png

원형

-

-

방사형

방사형

-

분산형

분산형

-

트리맵

-

-

깔때기형

-

-

폭포

-

-

주식형, OHLC

세로 막대형, 영역형, 꺾은선형, 주식형, OHLC

image.2f17e8.png

참고:

  • 혼합 차트는 최대 4개의 서브 플롯을 지원합니다.

  • 일부 차트 변형(예: 범위 세로 막대, 누적 세로 막대, 백분율 누적 세로 막대)은 동일한 조합 규칙을 따릅니다.

  • 동일한 차트 유형의 여러 시리즈를 표시할 경우, 혼합 차트보다는 다중 값 필드 차트 사용이 일반적으로 더 적합합니다.

혼합 차트 구성

아래 표는 혼합 차트의 속성 범위 및 동기화 동작을 정리한 것입니다.

일부 설정은 모든 플롯에서 동기화(공통)되며, 일부는 플롯별로 개별 설정(독립)이 가능합니다.

속성

범위

설명

차트 이름

독립

현재 플롯의 고유 차트 이름을 설정합니다.

차트 유형

독립

-

범주(Category)

공통

모든 플롯은 동일한 범주 필드를 공유합니다.

값(Value)

독립

최소 1개 필요

차트 스타일

독립

-

데이터 레이블

독립

-

툴팁

독립

-

애니메이션

독립

-

범례

독립

-

외관(Appearance)

공통

전체 혼합 차트 배경 및 테두리 외관에 적용

제목

공통

모든 플롯에서 공유되는 제목

레이아웃

공통

시트 내 위치, 너비, 높이 제어

범주 축(Category Axis)

공통

  • X축 범주는 하나만 존재

  • 모든 플롯은 동일 축 사용

값 축(Value Axis)

독립/공통

  • 플롯별 독립 또는 공유 가능

  • 각 플롯은 독립 축에 연결 가능

  • 축별 스케일과 표시 설정 지원

참고:

  • 하나의 혼합 차트에서는 하나의 데이터셋만 사용 가능합니다.

  • 모든 플롯은 동일한 범주 축을 공유하며, 범주 변경 시 모든 플롯에 적용됩니다.

  • 전역 외관 설정(외관, 제목, 레이아웃, 범주 축) 변경은 플롯 전체에 동기화됩니다.

팁:

  • 시각적 레이어가 겹치면 꺾은선이나 점이 막대를 가릴 수 있습니다. 필요시 투명도나 순서를 조정하세요.

  • 서로 다른 척도를 가진 값 플롯은 별도의 축을 사용하면 가독성이 높아집니다.

혼합 차트 범례

각 플롯별 범례를 개별적으로 설정 가능하며, 표시 순서는 플롯 생성 순서를 따릅니다.

참고:

범례 바인딩이 유효한 플롯만 표시됩니다.

// 예: plot1과 plot2가 독립 범례 설정 사용
{
  plotAreas: [{
    legends: [
      { type: "Color", position: "Bottom" }, // plot1
      { type: "Color", position: "Top" }     // plot2
    ]
  }]
}

혼합 차트 값 축

혼합 차트는 여러 값 축을 지원하여 서로 다른 범위의 데이터 시리즈를 동일 차트에 표시할 수 있습니다.

축 바인딩 규칙

  • 각 플롯은 최소 1개의 값 축에 연결되어야 합니다.

  • 최대 4개의 축(Y1–Y4) 사용 가능

  • 기본적으로 모든 값 필드는 공통 축(Y1)을 공유

  • 축 바인딩 순서는 자동으로 Y1→Y4에 할당되며, 차트 출력에는 영향 없음

  • 사용하지 않는 축은 차트에서 숨김

축 사용자 정의

  • 각 축은 개별 설정 가능

// 예제 1: plot1과 plot2가 동일 값 축 공유
{
	axes: [{
		plots: ["plot1", "plot2"],
		type: "Y"
	}]
}

// 예제 2: plot1과 plot2가 독립 값 축 사용
{
	axes: [{
		plots: ["plot1"],
		type: "Y"
	}, {
		plots: ["plot2"],
		type: "Y"
	}]
}

예제: 3플롯 혼합 차트

세로 막대 플롯으로 제품 A/B 매출, 영역 플롯으로 고객 만족도, 꺾은선 플롯으로 전환율을 시각화한 예제입니다.

세 가지 플롯을 동시에 보여주면서, 값 기반 및 비율 기반 지표를 지역별로 균형 있게 나타냅니다.

const sheet = spread.getActiveSheet();
sheet.name("Combo Chart");
const dataManager = spread.dataManager();

function createSalesTable(dataManager) {
    return dataManager.addTable("Sales", {
        data: [
            {
                region: "East Coast",
                revenueA: 132489,
                revenueB: 89732,
                satisfaction: 0.84,
                conversion: 0.056
            },
            {
                region: "Midwest",
                revenueA: 115621,
                revenueB: 77484,
                satisfaction: 0.81,
                conversion: 0.049
            },
            {
                region: "South",
                revenueA: 141570,
                revenueB: 92596,
                satisfaction: 0.89,
                conversion: 0.061
            },
            {
                region: "West Coast",
                revenueA: 156343,
                revenueB: 102152,
                satisfaction: 0.91,
                conversion: 0.067
            },
            {
                region: "Canada",
                revenueA: 126481,
                revenueB: 83646,
                satisfaction: 0.87,
                conversion: 0.054
            }
        ],
    });
}

const SalesTable = createSalesTable(dataManager);
await SalesTable.fetch();

// 혼합 차트 생성
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);

dataChart.setChartConfig({
                tableName: 'Sales',
                plots: [{
                    name: "Product A & B Revenue",
                    type:  GC.Spread.Sheets.DataCharts.DataChartType.column,
                    encodings: {
                        values: [
                            {field: "revenueA"}, 
                            {field: "revenueB"}
                        ],
                        category: {
                            field: "region"
                        }
                    },
                    config: {
                        palette: ['#A066C9', '#7885CB']              
                    }
                }, {
                    name: "Customer Satisfaction",
                    type: GC.Spread.Sheets.DataCharts.DataChartType.area,
                    encodings: {
                        values: [{
                            field: "satisfaction"
                        }]
                    },
                    config: {
                        palette: ['#F7F7F7']              
                    }
                }, {
                    name: "Conversion Rate",
                    type: GC.Spread.Sheets.DataCharts.DataChartType.line,
                    encodings: {
                        values: [{
                            field: "conversion"
                        }]
                    },
                    config: {
                        palette: ['#4CAF50']          //#E5C103    
                    }
                }],
                config: {
                    header: {
                        title: "Regional Sales & Performance Overview",
                        padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 10,
                        },
                        textStyle: {
                            color: 'black',
                            fontSize: 24,
                            fontFamily: 'Verdana',
                            fontWeight: 'Bold'
                        }
                    },
                    plotAreas: [{
                        axes: [{
                            plots: ["Product A & B Revenue"],
                            type: GC.Spread.Sheets.DataCharts.AxisType.y,
                            format: {
                                type: GC.Spread.Sheets.DataCharts.FormatType.thousands,
                                value: "$0.0 K"
                            }                           
                    }, {
                            plots: ["Customer Satisfaction"],
                            type: GC.Spread.Sheets.DataCharts.AxisType.y,
                            position: GC.Spread.Sheets.DataCharts.AxisPosition.none
                    }, {
                            plots: ["Conversion Rate"],
                            type: GC.Spread.Sheets.DataCharts.AxisType.y,
                            position: GC.Spread.Sheets.DataCharts.AxisPosition.none
                    }]
                }]
                }
        });

image.99be01.png