셀 서식 연동 추가

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

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

numberFormatLinked 속성이 true로 설정되면, 데이터 레이블의 value 필드는 데이터 원본 셀의 서식을 그대로 유지하며, 레이블 자체의 서식 코드보다 원본 서식을 우선합니다. 반대로 이 속성이 false일 경우, 레이블에 지정된 서식 코드가 사용됩니다.

예시: 브라우저별 월간 평균 판매 실적을 추적하는 성과 대시보드를 생성한다고 가정합니다. 이 대시보드에는 브라우저별 평균 판매량을 보여주는 묶은 세로 막대형 차트가 포함되며, 사용자가 선택한 서식에 따라 데이터 레이블 형식을 자동으로 갱신하도록 구성하고자 합니다. 아래 이미지는 numberFormatLinked 속성을 true로 설정했을 때의 데이터 레이블을 보여줍니다.

다음은 연결된 셀을 사용하여 차트 데이터 레이블의 형식을 동적으로 업데이트하는 코드 예시입니다:

// 시리즈 가져오기 및 데이터 레이블 속성 설정
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);

축에 원본 셀 서식 설정

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

• 축 유형이 텍스트 축(text axis) 인 경우: 모든 축 레이블은 시리즈 포인트의 서식에서 가져옵니다.

• 축 유형이 날짜 축(date axis) 또는 값 축(value axis) 인 경우: 시리즈의 첫 번째 포인트 서식을 사용합니다.

numberFormatLinked 속성이 false일 경우에는 축에 직접 지정된 서식이 적용되며, 값 축의 경우 여전히 시리즈 첫 포인트의 서식이 사용됩니다.

예시: 월별 평균 판매량을 추적하는 성과 대시보드에서, 사용자의 날짜 서식 설정에 따라 X축의 레이블 형식이 동적으로 변경되도록 구현할 수 있습니다. 아래 이미지는 numberFormatLinked = true, 축 유형이 'text'로 설정된 상태를 보여줍니다.

다음은 차트 축에 셀 서식을 연동하는 코드 예시입니다:

// 축에 셀 서식 연동 설정
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);

제한사항

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