[]
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);
참고: 분산형 차트는 예외적으로 데이터 레이블의 “x 값”, “y 값”, “버블 크기”는 사용자 지정 서식을 사용합니다.
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);
차트의 데이터 원본 서식이 변경되었을 때, 차트 데이터를 새로 고침하기 위한 별도의 지원이 필요할 수 있습니다.