# 범례

## Content

SpreadJS는 차트에서 범례를 구성하고 사용자 지정할 수 있도록 지원합니다.

## **범례란?**

범례는 차트에 표시된 데이터를 이해하는 데 도움이 되는 레이블을 의미합니다. 차트의 범례 항목은 차트에 플로팅된 데이터 범주의 이름을 나타냅니다. 각 범례 항목은 더 나은 데이터 시각화를 위해 고유한 색상을 가집니다.

## **사용 시나리오**

기본 범례 설정만으로는 차트 데이터를 직관적으로 전달하기 어려운 경우가 많습니다. SpreadJS를 사용하면 범례의 위치를 사용자 지정하고, 스타일을 적용하며, 특정 선호도에 따라 포맷할 수 있습니다. 범례를 사용자 지정하면 차트가 다른 차트들과 차별화되며, 보다 표준화되고 전문적인 느낌을 줄 수 있습니다.
**예시** – 아래 차트는 다양한 지리적 지역의 평균 월별 강수량을 나타냅니다. 이 차트는 SpreadJS에서 범례에 대한 고급 사용자 지정 속성(사용자 지정 테두리 스타일, 사용자 지정 글꼴, 사용자 지정 배경색, 사용자 지정 위치(오른쪽 상단)을 사용하여 데이터를 명확하고 효과적으로 표현하고 있습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/spreadjsv13images/legend-enhancement.png)

## **차트에 범례 추가하기**

차트에 범례를 추가하는 주요 목적은 독자가 플로팅된 정보를 쉽게 이해하고 데이터를 분석할 수 있도록 돕는 것입니다. 차트에 범례를 정의하여 워크시트의 행과 열에 존재하는 데이터에 대한 설명을 표시함으로써, 차트에 시각화된 정보를 이해하는 데 도움을 줄 수 있습니다.
예를 들어 – 위 차트 이미지에서는 도쿄, 뉴욕, 런던, 베를린이라는 네 개의 범례 항목이 지역명을 나타내기 위해 추가되어 있습니다.
차트에서 범례를 표시할지 여부는 [legend ](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.Chart#legend)메서드의 `visible` 매개변수를 `true` 또는 `false`로 설정하여 제어할 수 있습니다. 기본적으로 `legend()` 메서드의 `visible` 매개변수는 `true`로 설정되어 있어 차트에 범례가 표시됩니다.
다음 코드 샘플은 차트에 범례를 구성하는 방법을 보여줍니다.

```javascript
// 범례 구성
var legend = chart.legend();
legend.visible = true;
chart.legend(legend);
```

## **범례 포맷, 위치 및 스타일 사용자 지정**

범례를 포맷하고 위치를 조정하며 스타일을 적용하면 차트의 시각적 표현을 향상시킬 뿐만 아니라, 보다 강력한 차트 프레젠테이션을 만드는 데 도움이 됩니다. 차트 범례에 사용할 수 있는 고급 사용자 지정 옵션은 특정 비즈니스 요구 사항이나 사용자 정의 분석 환경에 맞게 미적으로 뛰어난 차트를 생성할 수 있게 합니다.

* **범례 포맷 및 위치 지정** – SpreadJS에서 차트를 생성하면 범례는 기본적으로 차트 영역 하단에 나타납니다. 하지만 [legend ](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.Chart#legend)메서드와 [LegendPosition](/spreadjs/api/v19/enums/GC.Spread.Sheets.Charts.LegendPosition) 열거형을 사용하여 범례의 기본 위치를 상단, 하단, 왼쪽, 오른쪽, 오른쪽 상단의 다섯 가지 위치 중 하나로 변경할 수 있습니다.
* **범례 스타일 수정** – SpreadJS는 범례의 테두리 스타일과 배경색을 사용자 지정하는 기능도 제공합니다. `borderStyle` 속성과 `backColor` 속성을 사용하여 이를 설정할 수 있습니다. 또한, `fontSize`, `fontFamily`, `color` 속성을 사용하여 차트의 범례에 대해 글꼴 크기, 글꼴 패밀리, 글꼴 색상도 사용자 지정할 수 있습니다.

다음 코드 샘플은 다양한 지역의 평균 월별 강수량을 나타내는 차트에 대해 사용자 지정된 범례 포맷, 위치, 스타일을 적용하는 방법을 보여줍니다.

```javascript
var chart_columnClustered, chart_columnStacked, chart_columnStacked100, sheet;
window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    sheet = spread.getActiveSheet();
    sheet.suspendPaint();
    var dataArray =
    [
        ["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
        ["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
        ["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
    ];
    sheet.setArray(0, 0, dataArray);
    //columnClustered 차트 추가
    chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 20, 110, 550, 250, "A1:M5");
    
    // 차트에 애니메이션 사용
    chart_columnClustered.useAnimation(true);
    // 차트 제목 구성
    var title = chart_columnClustered.title()
    title.fontSize = "18.00";
    title.color = "rgb(228,65,54)";
    title.text = 'AVERAGE MONTHLY RAINFALL';
    chart_columnClustered.title(title);
    // 범례 서식
    // 범례의 색상, 폰트 크기, 배경색과 fontFamily 속성 설정
    var legend = chart_columnClustered.legend();
    
    // 범례 표시 true로 설정
    legend.visible = true;
    legend.color = 'Green';
    legend.fontSize = 12;
    legend.fontFamily = 'Calibri';
    legend.backColor = 'Yellow';
    // 범례 위치 설정
    // 범럐의 위치를 topRight로 설정
    var legendPosition = GC.Spread.Sheets.Charts.LegendPosition;
    legend.position = legendPosition.topRight;
    // Customize Legend Style
    // Change legend's borderstyle
    legend.borderStyle.width = 1;
    legend.borderStyle.color = "blue";
    legend.borderStyle.backColor = "Red";
    chart_columnClustered.legend(legend);
    sheet.resumePaint();
};
```