[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

데이터 레이블

데이터 레이블은 데이터 시리즈 내 개별 데이터 포인트의 세부 정보를 식별합니다. 데이터 레이블은 사용자가 차트에 플로팅된 정보를 쉽게 이해하고 해석할 수 있도록 도와줍니다.

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);

디자이너에서 사용하기

셀 범위를 데이터 레이블로 표시하려면 다음 단계를 따르시기 바랍니다:

  1. 데이터 시리즈, 차트 또는 데이터 레이블을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 엽니다.

  2. 사용 가능한 서식 옵션을 선택합니다.

  3. 드롭다운에서 **데이터 레이블 옵션(Label Options)**을 선택합니다.

    모든 레이블 옵션이 서식 데이터 레이블(Format Data Label) 아래에 표시됩니다.

  4. 레이블 내용(Label Contains) 아래에서 셀 값(Values From Cells) 체크박스를 선택하고, 범위 선택(Select Range…)를 클릭합니다.

  5. 데이터 레이블 범위(Data Label Range) 대화 상자가 나타나면, 워크시트에서 셀 값을 데이터 레이블로 표시할 범위를 선택합니다.

  6. 범위를 선택하면, 데이터 레이블 범위(Data Label Range) 대화 상자에 선택된 범위가 표시됩니다.

  7. 확인(OK) 을 클릭합니다.

    이제 셀 값이 차트의 데이터 레이블로 표시됩니다. 해당 셀의 값이 변경되면, 차트의 레이블도 자동으로 업데이트됩니다.

image

제한 사항

  • 여러 행과 열로 구성된 셀 범위 참조는 지원되지 않습니다.

  • 단일 데이터 포인트의 데이터 레이블에 대해 showDataLabelsRange 속성을 설정하는 것은 지원되지 않습니다.

  • dataLabelsRange 속성은 셀 참조에 대해 사용자 지정 이름(custom names) 을 지원하지 않습니다.