[]
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) 을 지원하지 않습니다.