# 셀 서식 연동 추가

## Content

SpreadJS는 차트 요소(데이터 레이블, 축, 툴팁 등)에 셀 서식을 동적으로 반영할 수 있도록 셀 숫자 서식 연동 기능을 지원합니다. 이를 위해 차트에서는 `IDataLabels` 및 `IAxes` 인터페이스의 `numberFormatLinked` 속성을 제공합니다.

## 데이터 레이블에 원본 셀 서식 설정

`numberFormatLinked` 속성이 `true`로 설정되면, 데이터 레이블의 `value` 필드는 데이터 원본 셀의 서식을 그대로 유지하며, 레이블 자체의 서식 코드보다 원본 서식을 우선합니다. 반대로 이 속성이 `false`일 경우, 레이블에 지정된 서식 코드가 사용됩니다.
**예시**: 브라우저별 월간 평균 판매 실적을 추적하는 성과 대시보드를 생성한다고 가정합니다. 이 대시보드에는 브라우저별 평균 판매량을 보여주는 묶은 세로 막대형 차트가 포함되며, 사용자가 선택한 서식에 따라 데이터 레이블 형식을 자동으로 갱신하도록 구성하고자 합니다. 아래 이미지는 `numberFormatLinked` 속성을 `true`로 설정했을 때의 데이터 레이블을 보여줍니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.8d5efd.png?width=600)
다음은 연결된 셀을 사용하여 차트 데이터 레이블의 형식을 동적으로 업데이트하는 코드 예시입니다:

```javascript
// 시리즈 가져오기 및 데이터 레이블 속성 설정
for (var i = 0; i < 3; i++) {
    var series = chart.series().get(i);
    series.dataLabels = {
        showValue: true,
        showCategoryName: false,
        showPercentage: false,
        separator: ",",
        position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
        format: "#,##0",    
        color: "white",
        backColor: "red",
        borderColor: "blue",
        borderWidth: 2
    };

    // 데이터 레이블에 셀 서식 연동 설정
    series.dataLabels.numberFormatLinked = true;
    chart.series().set(i, series);
```

>type=warning
> **참고**: [분산형 차트](/spreadjs/docs/v19/features/Charts/ChartTypes/CreatingScatterChart)는 예외적으로 데이터 레이블의 “x 값”, “y 값”, “버블 크기”는 사용자 지정 서식을 사용합니다.

## 축에 원본 셀 서식 설정

`numberFormatLinked` 속성이 `true`일 경우, 축 레이블도 데이터 원본 셀의 서식을 유지하며:

* 축 유형이 **텍스트 축(text axis)** 인 경우: 모든 축 레이블은 시리즈 포인트의 서식에서 가져옵니다.
* 축 유형이 **날짜 축(date axis)** 또는 **값 축(value axis)** 인 경우: 시리즈의 첫 번째 포인트 서식을 사용합니다.

`numberFormatLinked` 속성이 `false`일 경우에는 축에 직접 지정된 서식이 적용되며, 값 축의 경우 여전히 시리즈 첫 포인트의 서식이 사용됩니다.
**예시**: 월별 평균 판매량을 추적하는 성과 대시보드에서, 사용자의 날짜 서식 설정에 따라 X축의 레이블 형식이 동적으로 변경되도록 구현할 수 있습니다. 아래 이미지는 `numberFormatLinked = true`, 축 유형이 `'text'`로 설정된 상태를 보여줍니다.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.60d17b.png?width=600)
다음은 차트 축에 셀 서식을 연동하는 코드 예시입니다:

```javascript
// 축에 셀 서식 연동 설정
var chart = activeSheet.charts.all()[0];
var axes = chart.axes();
axes.primaryCategory.categoryType = GC.Spread.Sheets.Charts.CategoryType.CategoryScale;
axes.primaryCategory.numberFormatLinked = true;
chart.axes(axes);
var series = chart.series().get(0);
series.dataLabels.numberFormatLinked = true;
chart.series().set(0, series);
```

### 제한사항

* 차트의 데이터 원본 서식이 변경되었을 때, 차트 데이터를 새로 고침하기 위한 별도의 지원이 필요할 수 있습니다.