[]
데이터 레이블은 데이터 시리즈 내 개별 데이터 포인트의 세부 정보를 식별합니다. 데이터 레이블은 사용자가 차트에 플로팅된 정보를 쉽게 이해하고 해석할 수 있도록 도와줍니다.
SpreadJS에서는 dataLabels 메서드와 DataLabelPosition 열거형을 사용하여 데이터 레이블을 가져오거나 설정하고, 위치 및 색상을 변경하며, 차트에 데이터 레이블을 표시할지 여부를 제어할 수 있습니다.
아래 이미지는 데이터 레이블 구성이 적용된 기본적인 차트를 보여줍니다.
다음 코드 샘플은 차트에서 데이터 레이블을 구성하는 방법을 보여줍니다.
// 데이터 레이블 구성
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.color = "#000000";
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
// 이 위치 속성에는 다양한 옵션이 포함되어 있습니다. 차트 유형에 따라 적용되는 위치 값은 다릅니다.
dataLabels.position = dataLabelPosition.outsideEnd;
chart.dataLabels(dataLabels);
데이터 레이블의 배경색, 투명도 또는 테두리 색상, 너비, 투명도 등을 설정하여 스타일을 사용자 지정할 수도 있습니다. 또한 차트의 서로 다른 시리즈에 대해 서로 다른 스타일을 구성할 수 있습니다.
아래 이미지는 시리즈별로 스타일이 지정된 데이터 레이블을 보여줍니다.
다음 코드 샘플은 서로 다른 차트 시리즈에 대해 데이터 레이블 스타일을 구성하는 방법을 보여줍니다.
// 시리즈 0 및 1의 속성 설정
for (var i = 0; i < 2; i++) {
var series = chart.series().get(i);
series.dataLabels = {
showValue: false,
showSeriesName: true,
showCategoryName: false,
showPercentage: false,
separator: ",",
position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
format: "#,##0;-#,##0",
color: "white",
backColor: "red",
borderColor: "blue",
borderWidth: 2
};
chart.series().set(i, series);
}
// 시리즈 2의 속성 설정
var series = chart.series().get(2);
series.dataLabels = {
showValue: false,
showSeriesName: true,
showCategoryName: false,
showPercentage: true,
separator: ",",
position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
format: "#,##0;-#,##0",
color: "white",
backColor: "skyblue",
borderColor: "green",
borderWidth: 2
};
chart.series().set(2, series);
셀 참조를 데이터 레이블로 설정하고, 선택한 셀 범위의 값을 Excel과 유사하게 차트의 데이터 레이블로 표시할 수 있습니다.
참고: 데이터 레이블의 셀 범위 참조는 한 행 또는 한 열 범위만 지원합니다.
단일 행인 경우, 데이터 레이블은 왼쪽에서 오른쪽으로 각 셀의 텍스트를 순서대로 표시합니다.
단일 열인 경우, 데이터 레이블은 위에서 아래로 각 셀의 텍스트를 순서대로 표시합니다.
데이터 레이블에서 셀 참조를 사용하려면 IDataLabels 인터페이스의 dataLabelsRange
속성을 사용하시기 바랍니다. 이 속성은 정적 값 배열을 지원합니다. 참조된 셀 범위의 값이 변경되면 차트가 자동으로 새로 고쳐지고 데이터 레이블도 업데이트됩니다.
다음 코드 샘플은 B4
에서 D4
범위의 셀 값을 데이터 레이블로 표시하는 방법을 보여줍니다.
// 셀 범위 참조 텍스트를 데이터 레이블로 추가
let series = chart.series().get(0);
series.dataLabels.showDataLabelsRange = true;
series.dataLabels.dataLabelsRange = "Sheet1!$B$4:$D$4";
chart.series().set(0, series);
셀 범위를 데이터 레이블로 표시하려면 다음 단계를 따르시기 바랍니다:
데이터 시리즈, 차트 또는 데이터 레이블을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 엽니다.
사용 가능한 서식 옵션을 선택합니다.
드롭다운에서 **데이터 레이블 옵션(Label Options)**을 선택합니다.
모든 레이블 옵션이 서식 데이터 레이블(Format Data Label) 아래에 표시됩니다.
레이블 내용(Label Contains) 아래에서 셀 값(Values From Cells) 체크박스를 선택하고, 범위 선택(Select Range…)를 클릭합니다.
데이터 레이블 범위(Data Label Range) 대화 상자가 나타나면, 워크시트에서 셀 값을 데이터 레이블로 표시할 범위를 선택합니다.
범위를 선택하면, 데이터 레이블 범위(Data Label Range) 대화 상자에 선택된 범위가 표시됩니다.
확인(OK) 을 클릭합니다.
이제 셀 값이 차트의 데이터 레이블로 표시됩니다. 해당 셀의 값이 변경되면, 차트의 레이블도 자동으로 업데이트됩니다.
여러 행과 열로 구성된 셀 범위 참조는 지원되지 않습니다.
단일 데이터 포인트의 데이터 레이블에 대해 showDataLabelsRange 속성을 설정하는 것은 지원되지 않습니다.
dataLabelsRange
속성은 셀 참조에 대해 사용자 지정 이름(custom names) 을 지원하지 않습니다.