# 혼합 차트
## Content
**혼합 차트**는 여러 차트 유형(예: 세로 막대, 꺾은선, 영역)을 하나의 통합 차트로 결합할 수 있는 유연한 시각화 도구입니다. 이를 통해 사용자들은 수량, 추세, 비율 등 서로 다른 데이터 유형을 하나의 그래픽 표시 안에서 비교하고 표현할 수 있습니다.
## 지원되는 차트 조합
다음 표는 하나의 혼합 차트에서 조합 가능한 차트 유형을 보여줍니다.
| **주 차트 유형** | **혼합 가능 차트** | **혼합 예시** |
| ------- | -------- | ----- |
| 세로 막대형 | 세로 막대형, 영역형, 꺾은선형, 주식형, OHLC |  |
| 가로 막대형 | 가로 막대형 | - |
| 영역형 | 세로 막대형, 영역형, 꺾은선형, 주식형, OHLC |  |
| 꺾은선형 | 세로 막대형, 영역형, 꺾은선형, 주식형, OHLC |  |
| 원형 | - | - |
| 방사형 | 방사형 | - |
| 분산형 | 분산형 | - |
| 트리맵 | - | - |
| 깔때기형 | - | - |
| 폭포 | - | - |
| 주식형, OHLC | 세로 막대형, 영역형, 꺾은선형, 주식형, OHLC |  |
>type=note
> **참고:**
>
> * 혼합 차트는 **최대 4개의 서브 플롯**을 지원합니다.
> * 일부 차트 변형(예: 범위 세로 막대, 누적 세로 막대, 백분율 누적 세로 막대)은 동일한 조합 규칙을 따릅니다.
> * 동일한 차트 유형의 여러 시리즈를 표시할 경우, 혼합 차트보다는 **다중 값 필드 차트** 사용이 일반적으로 더 적합합니다.
## 혼합 차트 구성
아래 표는 혼합 차트의 속성 범위 및 동기화 동작을 정리한 것입니다.
일부 설정은 모든 플롯에서 동기화(*공통*)되며, 일부는 플롯별로 개별 설정(*독립*)이 가능합니다.
| **속성** | **범위** | **설명** |
| --- | --- | --- |
| 차트 이름 | 독립 | 현재 플롯의 **고유 차트 이름**을 설정합니다. |
| 차트 유형 | 독립 | - |
| 범주(Category) | 공통 | 모든 플롯은 동일한 범주 필드를 공유합니다. |
| 값(Value) | 독립 | 최소 1개 필요 |
| 차트 스타일 | 독립 | - |
| 데이터 레이블 | 독립 | - |
| 툴팁 | 독립 | - |
| 애니메이션 | 독립 | - |
| 범례 | 독립 | - |
| 외관(Appearance) | 공통 | 전체 혼합 차트 배경 및 테두리 외관에 적용 |
| 제목 | 공통 | 모든 플롯에서 공유되는 제목 |
| 레이아웃 | 공통 | 시트 내 위치, 너비, 높이 제어 |
| 범주 축(Category Axis) | 공통 | - X축 범주는 하나만 존재
- 모든 플롯은 동일 축 사용
|
| 값 축(Value Axis) | 독립/공통 | - 플롯별 독립 또는 공유 가능
- 각 플롯은 독립 축에 연결 가능
- 축별 스케일과 표시 설정 지원
|
>type=note
> **참고:**
>
> * 하나의 혼합 차트에서는 **하나의 데이터셋만** 사용 가능합니다.
> * 모든 플롯은 동일한 범주 축을 공유하며, 범주 변경 시 모든 플롯에 적용됩니다.
> * 전역 외관 설정(외관, 제목, 레이아웃, 범주 축) 변경은 플롯 전체에 동기화됩니다.
>type=info
> **팁:**
>
> * 시각적 레이어가 겹치면 꺾은선이나 점이 막대를 가릴 수 있습니다. 필요시 투명도나 순서를 조정하세요.
> * 서로 다른 척도를 가진 값 플롯은 별도의 축을 사용하면 가독성이 높아집니다.
### 혼합 차트 범례
각 플롯별 범례를 개별적으로 설정 가능하며, 표시 순서는 **플롯 생성 순서**를 따릅니다.
>type=note
> **참고:**
> 범례 바인딩이 유효한 플롯만 표시됩니다.
```javascript
// 예: plot1과 plot2가 독립 범례 설정 사용
{
plotAreas: [{
legends: [
{ type: "Color", position: "Bottom" }, // plot1
{ type: "Color", position: "Top" } // plot2
]
}]
}
```
### 혼합 차트 값 축
혼합 차트는 여러 값 축을 지원하여 서로 다른 범위의 데이터 시리즈를 동일 차트에 표시할 수 있습니다.
**축 바인딩 규칙**
* 각 플롯은 최소 1개의 값 축에 연결되어야 합니다.
* 최대 4개의 축(Y1–Y4) 사용 가능
* 기본적으로 모든 값 필드는 공통 축(Y1)을 공유
* 축 바인딩 순서는 자동으로 Y1→Y4에 할당되며, 차트 출력에는 영향 없음
* 사용하지 않는 축은 차트에서 숨김
**축 사용자 정의**
* 각 축은 개별 설정 가능
```javascript
// 예제 1: plot1과 plot2가 동일 값 축 공유
{
axes: [{
plots: ["plot1", "plot2"],
type: "Y"
}]
}
// 예제 2: plot1과 plot2가 독립 값 축 사용
{
axes: [{
plots: ["plot1"],
type: "Y"
}, {
plots: ["plot2"],
type: "Y"
}]
}
```
## 예제: 3플롯 혼합 차트
세로 막대 플롯으로 제품 A/B 매출, 영역 플롯으로 고객 만족도, 꺾은선 플롯으로 전환율을 시각화한 예제입니다.
세 가지 플롯을 동시에 보여주면서, 값 기반 및 비율 기반 지표를 지역별로 균형 있게 나타냅니다.
```javascript
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
}]
}]
}
});
```
