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

데이터 레이블

데이터 레이블은 데이터 계열의 데이터 요소에 대한 세부 정보를 식별합니다. 사용자가 차트에 표시된 정보를 쉽게 이해하고 해석할 수 있도록 하는 데 사용됩니다.

SpreadJS에서는 dataLabels 메서드와 DataLabelPosition 열거형을 사용하여 데이터 레이블을 가져오거나 설정하고, 위치와 색을 변경하며, 차트에 데이터 레이블을 표시할지 여부를 제어할 수 있습니다.

기본적인 데이터 레이블 구성 이미지는 다음과 같습니다.

SpreadJS chart displaying black data values outside the end of each data point, with series and category names hidden through dataLabels settings.

다음 코드 샘플에서는 차트에서 데이터 레이블을 구성하는 방법을 보여줍니다.

//Configure DataLabels
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.color = "#000000";
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;

// This position contains many options. Different chart type applies different position values
dataLabels.position = dataLabelPosition.outsideEnd;
chart.dataLabels(dataLabels);

배경색, 투명도 또는 테두리 색, 너비, 투명도 등을 설정하여 데이터 레이블의 스타일을 사용자 지정할 수도 있습니다. 또한 아래 이미지와 같이 차트의 계열마다 서로 다른 스타일을 구성할 수 있습니다.

SpreadJS chart with centered series-name data labels, using red backgrounds and blue borders for two series and a sky-blue background with green borders and percentages for the third series.

다음 코드 샘플에서는 서로 다른 차트 계열에 대해 데이터 레이블 스타일을 구성하는 방법을 보여줍니다.

// get series 0 & 1 and set it's properties
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);
}

// get series 2 and set it's properties
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);

데이터 레이블 글꼴 사용자 지정

글꼴 패밀리, 글꼴 크기, 글꼴 색, 굵게, 기울임꼴, 밑줄 및 취소선을 포함하여 차트 데이터 레이블의 글꼴 스타일을 사용자 지정할 수 있습니다.

다음 코드 샘플에서는 차트 계열의 데이터 레이블에 글꼴 스타일을 설정하는 방법을 보여줍니다.

var series = chart.series().get(0);

series.dataLabels = {
    showValue: true,
    fontFamily: "Arial",
    fontSize: 12,
    color: "red",
    fontBold: true,
    fontItalic: true,
    fontUnderline: GC.Spread.Sheets.Charts.TextUnderlineType.single,
    fontStrikethrough: false
};

chart.series().set(0, series);

SpreadJS 디자이너에서도 데이터 레이블 글꼴 스타일을 구성할 수 있습니다.

데이터 레이블을 선택하고 데이터 레이블 서식 사이드 패널을 사용하여 텍스트 채우기 및 글꼴 옵션을 구성합니다.

image-20260710.822fc4.png

셀 범위를 데이터 레이블로 표시

Excel과 유사하게 데이터 레이블에 셀 참조를 설정하고 선택한 셀 범위의 값을 차트의 데이터 레이블로 표시할 수 있습니다.

참고: 데이터 레이블의 셀 범위 참조는 단일 행 또는 단일 열 범위를 지원합니다.

  • 단일 행인 경우 데이터 레이블은 각 셀의 텍스트를 왼쪽에서 오른쪽 순서로 표시합니다.

  • 단일 열인 경우 데이터 레이블은 텍스트를 위에서 아래 순서로 표시합니다.

데이터 레이블에서 셀 참조를 사용하려면 IDataLabels 인터페이스의 dataLabelsRange 속성을 사용합니다. 이 속성은 정적 값 배열을 지원합니다. 참조된 셀 범위가 변경되면 차트가 새로 고쳐지고 데이터 레이블도 그에 따라 업데이트됩니다.

코드 사용

다음 코드 샘플에서는 B4에서 D4까지의 셀 값을 데이터 레이블로 표시하는 방법을 보여줍니다.

 // Add chart data label to display cell range reference text.
 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. 드롭다운에서 레이블 옵션을 선택합니다.

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

  4. 레이블 내용에서 셀의 값 확인란을 선택하고 범위 선택… 을 클릭합니다.

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

  6. 선택하면 데이터 레이블 범위 대화 상자에 선택한 범위가 표시됩니다.

  7. 확인을 클릭합니다.

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

SpreadJS Designer workflow for enabling Values From Cells, selecting a worksheet range in the Data Label Range dialog, and displaying those cell values as chart data labels.

제한 사항

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