혼합 차트

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

SpreadJS Combo Chart combines revenue columns, a customer satisfaction area plot, and a conversion line to compare regional sales and performance metrics.

지원되는 차트 조합

다음 표에서는 하나의 혼합 차트에서 결합할 수 있는 차트 유형을 보여줍니다.

기본 차트 유형	결합 가능한 차트 유형	조합 예제
세로 막대형	세로 막대형, 영역형, 꺾은선형, 캔들스틱, OHLC
가로 막대형	가로 막대형	-
영역형	세로 막대형, 영역형, 꺾은선형, 캔들스틱, OHLC
꺾은선형	세로 막대형, 영역형, 꺾은선형, 캔들스틱, OHLC
원형	-	-
방사형	방사형	-
분산형	분산형	-
트리맵	-	-
깔때기형	-	-
폭포 차트	-	-
캔들스틱, OHLC	세로 막대형, 영역형, 꺾은선형, 캔들스틱, OHLC

참고:
혼합 차트는 최대 4개의 하위 플롯을 지원합니다.
일부 차트 변형(예: 범위 세로 막대형, 누적 세로 막대형 및 100% 누적 세로 막대형)은 동일한 조합 규칙을 공유합니다.
동일한 차트 유형을 결합하는 예제는 여기에 나열하지 않았습니다. 동일한 유형의 여러 계열을 표시하려는 경우 일반적으로 혼합 차트 구성보다 여러 값 필드가 있는 차트를 사용하는 것이 좋습니다.

혼합 차트 구성

아래 표에서는 혼합 차트 속성의 적용 범위와 동기화 동작을 요약합니다.

일부 설정은 모든 플롯에서 동기화되고(공통으로 표시), 다른 설정은 플롯별로 독립적으로 사용자 지정할 수 있습니다(독립으로 표시).

속성	범위	참고
차트 이름	독립	현재 플롯의 고유한 차트 이름을 설정합니다.
차트 유형	독립	-
범주	공통	혼합 차트의 모든 플롯은 동일한 범주 인코딩 필드를 공유합니다.
값	독립	하나 이상 필요합니다.
차트 스타일	독립	-
데이터 레이블	독립	-
도구 설명	독립	-
애니메이션	독립	-
범례	독립	-
모양	공통	전체 혼합 차트의 배경 및 테두리 모양에 영향을 줍니다.
제목	공통	모든 플롯에서 동기화되는 공유 차트 제목입니다.
레이아웃	공통	시트 내 혼합 차트의 위치, 너비 및 높이를 제어합니다.
범주 축	공통	범주 X축 패널은 하나만 존재합니다. 모든 플롯에서 이 단일 범주 축을 사용해야 합니다.
값 축	독립/공통	플롯별로 독립적으로 구성하거나 공유할 수 있습니다. 각 플롯을 독립적인 값 축에 바인딩할 수 있습니다. 각 축에서 자체 눈금 및 표시 설정을 사용할 수 있습니다.

참고:
하나의 혼합 차트에서는 하나의 데이터 세트만 사용할 수 있습니다.
모든 플롯은 동일한 범주 축을 공유하며 범주를 변경하면 모든 플롯에 영향을 줍니다.
전역 모양 변경(모양, 제목, 레이아웃, 범주 축)은 모든 플롯에서 동기화됩니다.

팁:
시각적 레이어가 겹치면 플롯된 선이나 지점이 세로 막대를 가릴 수 있습니다. 필요에 따라 투명도나 순서를 조정하세요.
플롯이 서로 다른 눈금의 측정값을 나타내는 경우 가독성을 높이려면 별도의 값 축을 사용하세요.

혼합 차트의 트렐리스 바인딩

혼합 차트는 트렐리스 바인딩을 지원합니다. 혼합 차트에서 트렐리스 바인딩을 사용하는 경우 모든 플롯에서 동일한 row, column 및 trellis 구성을 사용해야 합니다.

API를 통해 플롯마다 서로 다른 트렐리스 설정을 지정하면 첫 번째 플롯의 트렐리스 설정이 사용되고 이후의 트렐리스 설정은 무시됩니다.

image-20260714.86a710.png

혼합 차트의 범례

각 플롯의 범례를 개별적으로 사용자 지정할 수 있으며 범례의 표시 순서는 플롯이 생성된 순서를 따릅니다.

참고:
유효한 범례 바인딩이 있는 플롯만 범례가 표시됩니다.
여러 범례가 동일한 위치를 사용하는 경우 레이아웃에서 최대 크기 설정이 함께 적용됩니다. 왼쪽 또는 오른쪽에 배치된 범례의 경우 유효한 maxWidth는 해당 범례 중 가장 작은 값입니다. 위쪽 또는 아래쪽에 배치된 범례의 경우 유효한 maxHeight는 해당 범례 중 가장 큰 값입니다.

// Example: plot1 and plot2 use independent legned settings.
{
  plotAreas: [{
    legends: [
      { type: "Color", position: "Bottom" }, // plot1
      { type: "Color", position: "Top" }     // plot2
    ]
  }]
}

혼합 차트의 값 축

혼합 차트는 서로 다른 값 범위를 가진 데이터 계열을 하나의 차트에 표시할 수 있도록 여러 값 축을 지원합니다.

축 바인딩 규칙

각 플롯은 하나 이상의 값 축에 연결되어야 합니다.
최대 4개의 축(Y1–Y4)을 사용할 수 있습니다.
기본적으로 모든 값 필드는 공통 축(Y1)을 공유합니다.
바인딩 순서는 수동으로 지정할 수 없습니다. 축은 Y1부터 Y4까지 순서대로 자동 할당되며 차트 출력에는 영향을 주지 않습니다.
사용하지 않는 축은 차트에서 숨겨집니다.

축 사용자 지정

각 축은 독립적으로 구성할 수 있습니다.

다음 예제에서는 혼합 차트에서 공유 값 축과 독립 값 축을 구성하는 방법을 보여줍니다.

// Example 1: plot1 and plot2 share the same value axis
{
    axes: [{
        plots: ["plot1", "plot2"],
        type: "Y"
    }]
}
// Example 2: plot1 and plot2 use independent value axes
{
    axes: [{
        plots: ["plot1"],
        type: "Y"
    }, {
        plots: ["plot2"],
        type: "Y"
    }]
}

예제: 3개 플롯 혼합 차트

이 혼합 차트는 세로 막대형 플롯, 고객 만족도를 나타내는 영역형 플롯 및 전환율을 나타내는 꺾은선형 플롯을 결합합니다.

최대 3개의 플롯을 함께 시각화하여 지역별로 값 기반 지표와 백분율 기반 지표를 함께 비교하는 방법을 보여줍니다.

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();
// Create combo data charts
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
            }]
        }]
    }
});

SpreadJS three-plot Combo Chart compares two regional revenue column series with a customer satisfaction area and conversion-rate line using configured value axes.

혼합 차트

지원되는 차트 조합

혼합 차트 구성

예제: 3개 플롯 혼합 차트

제품

고객 서비스

메시어스 정보

정책(Policy)