# 꺾은선형 차트 

## Content

**꺾은선형 차트**는 데이터 포인트를 선으로 연결하여 범주별 또는 시간에 따른 값의 변화를 보여줍니다. 비즈니스, 재무 및 운영 데이터에서 추세, 변동 및 방향성을 시각화하는 데 일반적으로 사용됩니다.
SpreadJS에서는 코드를 사용하거나 SpreadJS 디자이너의 Inspector 탭을 통해 색상 팔레트, 선 두께, 기호 표시, 도구 설명 스타일, 축 모양 등의 속성을 수정하여 꺾은선형 차트를 사용자 지정할 수 있습니다.

>type=note
> **참고:** 이 항목의 샘플은 [데이터 원본 바인딩](/spreadjs/docs/v19/features/data-charts/data-binding)에서 소개한 Sales 테이블을 사용합니다. 차트를 추가하기 전에 데이터 원본이 구성되어 있는지 확인하세요.

## 꺾은선형 차트

기본 꺾은선형 차트는 범주별 집계 값을 표시합니다. 각 데이터 포인트는 연결되어 전체적인 추세를 나타냅니다.
![image-20260420.80667b.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.80667b-20260529.9908f4.png?width=600)

```javascript
// Line Chart
const sheet = spread.getActiveSheet();
sheet.name("Line Chart");

const dataChart = sheet.dataCharts.add(
  'data-chart',
  10, 10, 600, 400
);

dataChart.setChartConfig({
  tableName: 'Sales',
  config: {
    header: {
      title: "Line Chart"
    }
  },
  plots: [{
    type: GC.Spread.Sheets.DataCharts.DataChartType.line,
    encodings: {
      category: { field: "Product" },
      color: { field: "Region" },
      values: [{
        field: "Sales",
        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
      }]
    },
    config: {
      axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
    }
  }]
});
```

### 계층형 범주를 사용하는 꺾은선형 차트

꺾은선형 차트는 계층형 범주 그룹화를 지원합니다.

```javascript
category: {
  field: "ProductCategory",
  child: {
    field: "Product"
  }
}
```

중첩 순서에 따라 그룹화 계층 구조가 정의됩니다.
![image-20260420.7d31e9.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.7d31e9-20260529.1dc5dc.png?width=600)

## 선 모양

꺾은선형 차트는 `lineAspect` 속성을 지원하며, 데이터 포인트가 연결되고 렌더링되는 방식을 제어합니다.

| Line Aspect | Sample |
| ----------- | ------ |
| Default | ![image-20260420.c76d2c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.c76d2c-20260529.688b53.png?width=400) |
| Spline | ![image-20260420.d65c22.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.d65c22-20260529.c7c809.png?width=400) |
| StepCenter | ![image-20260420.e1c60b.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.e1c60b-20260529.e2777a.png?width=400) |
| StepLeft | ![image-20260420.3c973a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.3c973a-20260529.c09135.png?width=400) |
| StepRight | ![image-20260420.fb19bb.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.fb19bb-20260529.3429eb.png?width=400) |
| BezierCurve | ![image-20260420.00327e.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.00327e-20260529.603442.png?width=400) |

>type=note
> `lineAspect`를 `null` 또는 `undefined`로 설정하면 차트는 `Default` 동작으로 렌더링됩니다.

**예제**

```javascript
config: {
  lineAspect: GC.Spread.Sheets.DataCharts.LineAspect.Spline
}
```

## 기호 및 선 스타일

꺾은선형 차트에서는 선 두께와 기호 모양을 사용자 지정할 수 있습니다.

```javascript
config: {
  style: {
    strokeWidth: 2,
    symbolShape: GC.Spread.Sheets.DataCharts.SymbolShape.dot,
    symbolSize: 10
  },
  symbols: true
}
```

* `strokeWidth`는 선의 두께를 제어합니다.
* `symbolShape`는 마커의 모양을 정의합니다.
* `symbolSize`는 마커의 크기를 제어합니다.
* `symbols`는 마커 표시 여부를 설정합니다.

![image-20260420.0057e7.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.0057e7-20260529.2bf5ab.png?width=600)

## 색상 팔레트

`palette` 속성은 여러 계열에 사용할 색상 순서를 정의합니다.

```javascript
config: {
  palette: [
    "#88bde6",
    "#fbb258",
    "#90cd97",
    "#f6aac9",
    "#bfa554",
    "#bc99c7"
  ]
}
```

팔레트는 생성된 계열에 순서대로 적용됩니다.
![image-20260420.4f0020.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260420.4f0020-20260529.c00b6b.png?width=600)