# 차트 오버레이

## Content

# 오버레이

데이터를 나타내는 열, 막대 또는 선과 같은 기하학적 모양 외에도 플롯에는 데이터에 대한 메타 정보를 나타내는 '오버레이'라는 추가 항목이 포함될 수 있습니다. 대표적인 [예시](/activereportsjs/demos/Reports/ScatterTrendline/purejs)는 아래 그림과 같이 데이터의 선형 회귀를 보여주는 '추세선'입니다.

![image.4af73c](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.4af73c.80bf0e.png)

[플롯](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot)을 선택하고 속성 관리자에서 '오버레이' 컬렉션을 편집하여 오버레이를 추가할 수 있습니다.
모든 오버레이에는 다음과 같은 공통 속성이 있습니다.

* `이름`– 오버레이의 이름
* `유형` – 오버레이 유형
* `표시` – `Front` 값은 오버레이가 플롯의 앞면에 표시됨을 나타내고, `Back` 값은 오버레이가 플롯의 뒷면에 표시됨을 나타냅니다.

ActiveReportsJS 차트는 아래에서 자세히 설명하는 여러 오버레이 유형을 지원합니다.

### 참조선(ReferenceLine)

`참조선`을 사용하여 주어진 지점에서 데이터 값을 표시할 수 있습니다. [아래 차트](/activereportsjs/demos/Reports/ReferenceLine/purejs)는 각 판매 채널의 평균 판매 금액에 해당하는 값에서 y축에 참조선을 가집니다.

![image.ef5cc2](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.ef5cc2.08c3d4.png)

`참조선` 오버레이는 다음과 같은 특정 속성을 표시합니다.

* [선 스타일](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties)은 참조선의 모양을 설정합니다.
* `Axis` 속성은 참조선이 연결된 축을 지정합니다.
* `값` 속성은 선택한 축의 참조선 값을 지정합니다. 정적 값에 사용할 수 있습니다.
* `필드` 속성은 참조선이 연결된 선택된 축의 `데이터 값`을 지정합니다.
* `집계 유형(Aggregation Type)` 속성은 `필드`에 적용되는 집계 유형을 지정하여 참조선의 값을 계산합니다.
* `범례 표시` 속성은 범례에 표시되고 참조선과 연결된 텍스트를 지정합니다.
* `세부 단계` 속성은 참조선이 플롯당 한 번(`Total`) 또는 `세부 정보 인코딩` 인스턴스(`Group`)당 한 번 표시되는지 여부를 지정합니다.

### 참조 밴드(Reference bands)

`참조 밴드`를 사용하여 주어진 포인트 사이의 데이터 값 범위를 표시할 수 있습니다. `참조 밴드` 오버레이는 다음과 같은 특정 속성을 노출합니다.

* [선 스타일](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties) 및 `배경 색상`은 모양을 설정합니다.
* `축` 속성은 참조 밴드가 연결된 축을 지정합니다.
* `시작` 및 `종료` 속성은 선택한 축에서 참조 밴드의 시작 및 종료 값을 지정합니다. 정적 값에 사용할 수 있습니다.

### 선형 추세선

`선형 추세선`을 사용하여 `데이터 값`이 일정한 속도로 증가하거나 감소하는 방법을 보여주는 최적의 직선을 표시할 수 있습니다. [아래 차트](/activereportsjs/demos/Reports/LinearTrendline/purejs)에는 3년 연속 판매액의 추세를 보여주는 선형 추세선이 있습니다.

![image.d7e7e0](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.d7e7e0.95acb5.png)

`선형 추세선` 오버레이는 다음과 같은 특정 속성을 표시합니다.

* [선 스타일](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties)은 추세선의 모양을 설정합니다.
* `Intercept` 속성은 추세선이 'Y' 축과 교차해야 하는 지점을 지정합니다. 정적 값에 사용할 수 있습니다.
* `Forward Forecast` 및 `Backward Forecast` 속성은 각각 마지막 및 첫 번째 `데이터 값`을 기준으로 추세선이 앞뒤로 확장되는 데이터 포인트의 수를 지정합니다.
* `필드` 속성은 추세선이 연결된 `데이터 값`을 지정합니다.
* `범례 표시` 속성은 범례에 표시되고 추세선과 연결된 텍스트를 지정합니다.
* `세부 단계` 속성은 추세선이 플롯당 한 번(`Total`) 또는 `세부정보 인코딩` 인스턴스(`Group`)당 한 번 표시되는지 여부를 지정합니다.

### 지수 추세선

`지수 추세선`을 사용하여 `데이터 값`이 증가하거나 감소한 다음 평준화되는 방식을 보여주는 최적의 지수 곡선을 표시할 수 있습니다. 이 추세선은 0보다 큰 데이터 값에만 사용할 수 있습니다. `지수 추세선` 오버레이는 `선형 추세선` 오버레이와 동일한 속성을 노출합니다.

### 거듭제곱 추세선

`거듭제곱 추세선`을 사용하여 특정 비율로 증가하는 측정 값을 비교하기 위해 최적 곡선을 표시할 수 있습니다. 이 추세선은 0보다 큰 데이터 값에만 사용할 수 있습니다. `거듭제곱 추세선` 오버레이는 `Intercept` 속성을 제외하고 `선형 추세선` 오버레이와 동일한 속성을 노출합니다.

### 로그 추세선

`로그 추세선`을 사용하여 `데이터 값`이 증가/감소한 다음 어떻게 평준화되는지 보여주는 최적의 지수 곡선을 표시할 수 있습니다. `로그 추세선` 오버레이는 `Intercept` 속성을 제외하고 `선형 추세선` 오버레이와 동일한 속성을 노출합니다.

### 다항식 추세선

`다항식 추세선`을 사용하여 `데이터 값`의 변동을 보여주는 최적 곡선을 표시할 수 있습니다. [아래 차트](/activereportsjs/demos/Reports/PolynomialTrendline/purejs)에는 월별 매출 추세를 보여주는 다항식 추세선이 있습니다.

![image.674c80](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.674c80.54d21d.png)

`다항식 추세선` 오버레이는 `선형 추세선` 오버레이와 동일한 속성을 노출합니다. `2`부터 `6`까지 유효한 값을 갖는 `Order` 속성은 다항식 추세선을 정의하는 방정식의 차수를 나타냅니다.

### 푸리에 급수 추세선

`푸리에 급수 추세선`을 사용하여 `데이터 값`의 변동을 보여주는 최적의 푸리에 급수 선을 표시할 수 있습니다. `푸리에 급수 추세선` 오버레이는 `선형 추세선` 오버레이와 동일한 속성을 노출합니다. `2`부터 `6`까지 유효한 값을 갖는 `Order` 속성은 푸리에 급수 추세선을 정의하는 방정식의 차수를 나타냅니다.

### 이동 평균 추세선

`이동 평균 추세선`을 사용하여 `데이터 값`의 변동을 완화하는 선을 표시하여 패턴이나 추세를 더 명확하게 표시할 수 있습니다.

ActiveReportsJS는 다음과 같은 이동 평균 추세선 유형을 지원합니다.

* [단순 이동 평균](https://en.wikipedia.org/wiki/Moving_average#Simple_moving_average)
* [누적 이동 평균](https://en.wikipedia.org/wiki/Moving_average#Cumulative_average)
* [지수 이동 평균](https://en.wikipedia.org/wiki/Moving_average#Exponential_moving_average)
* [가중 이동 평균](https://en.wikipedia.org/wiki/Moving_average#Weighted_moving_average)
* 연간 총 이동 평균 – 추세선은 이전 `N` 데이터 포인트의 합계인 데이터 포인트로 구성됩니다. `N` 값은 `Period` 속성에 의해 지정됩니다.

`이동 평균 추세선` 오버레이는 다음과 같은 속성들을 보여줍니다.

* [선 스타일](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties)은 추세선의 모양을 설정합니다.
* `필드` 속성은 추세선이 연결된 `데이터 값`을 지정합니다.
* `범례 표시` 속성은 범례에 표시되고 추세선과 연결된 텍스트를 지정합니다.
* `세부 단계` 속성은 추세선이 플롯당 한 번(`Total`) 또는 `detail encoding` 인스턴스(`Group`)당 한 번 표시되는지 여부를 지정합니다.
* `2`부터 데이터 값의 양까지 유효한 값을 갖는 `Period` 속성은 이동 평균을 계산하는 데 사용되는 데이터 포인트의 수를 나타냅니다.

[아래 차트](/activereportsjs/demos/Reports/MovingAvgTrendline/purejs)에서는 `Period` = 2인 단순 이동 평균 추세선이 있으며 월별 매출 추세를 보여줍니다.

![image.209427](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.209427.3daab3.png)