# 계열

## Content

SpreadJS에서는 차트를 생성할 때 하나 이상의 데이터 계열을 플로팅할 수 있습니다. 각 시리즈는 범례의 항목을 나타냅니다. [series](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.Chart#series) 메서드와 [SeriesCollection ](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.SeriesCollection) 클래스를 사용하여 차트의 계열 컬렉션에서 계열 항목을 가져오거나, 삽입하거나, 제거할 수 있으며, 각 시리즈 항목에 대해 시리즈 이름, 테두리 두께, 테두리 색상, y값, x값, 채우기 색상 등을 사용자 지정할 수 있습니다.
이와 함께, 데이터 계열의 선(line) 유형도 사용자 지정할 수 있습니다. 이를 위해 `LineDashStyle` 열거형을 사용할 수 있으며, 계열의 선 유형을 `solid`, `squareDot`, `longDash`, `dash`, `sysDashDot`, `dashDotDot` 등으로 설정할 수 있습니다. SpreadJS 디자이너의 차트 사이드 패널에도 'Dash type' 드롭다운 필드가 제공되어, 차트 계열의 선 유형을 선택할 수 있는 다양한 옵션을 제공합니다.

계열 구성이 적용된 기본 이미지는 아래와 같습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/series.png)

서로 다른 계열 선 유형이 적용된 기본 이미지는 아래와 같습니다.

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

다음 코드 샘플은 차트에서 계열을 구성하는 방법을 보여줍니다.

```javascript
//시리즈 구성
var series = chart.series();
var seriesItem = series.get(0);
seriesItem.yValues = "Sheet1!$B$5:$E$5";
seriesItem.backColor = "#d3d3d3";
seriesItem.border.width = 2;
series.set(0, seriesItem);                      
```

다음 코드 샘플은 차트에서 계열의 선 유형을 사용자 지정하는 방법을 보여줍니다.

```javascript
// 차트 0번째 계열에 lineType 설정
var series1 = chart.series().get(0);
series1.border.lineType = GC.Spread.Sheets.Charts.LineDashStyle.dashDotDot;
chart.series().set(0, series1);

// 차트 1번째 계열에 lineType 설정
var series2 = chart.series().get(1);
series2.border.lineType = GC.Spread.Sheets.Charts.LineDashStyle.longDash;
chart.series().set(1, series2);

//차트 2번째 계열에 lineType 설정
var series3 = chart.series().get(2);
series3.border.lineType = GC.Spread.Sheets.Charts.LineDashStyle.sysDashDot;
chart.series().set(2, series3);
```