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

차트에 추세선 추가

SpreadJS는 스프레드시트에서 데이터를 시각화할 때 차트에 추세선을 추가할 수 있도록 지원합니다.

추세선이란?

추세선(또는 "최적 적합선")은 차트에 표시되는 추가 선으로, 특정 데이터 시리즈의 기울기(추세)를 나타내며, 데이터가 불규칙하더라도 전체적인 추세를 빠르게 파악할 수 있도록 도와줍니다.

사용 시나리오

차트에 추세선을 추가하면 다음과 같은 분석 목적에 유용하게 활용될 수 있습니다:

  • 추세를 도출하고 미래 값을 예측

  • 주식, 거래, 재무 및 판매 데이터 분석

  • 데이터 분석 전략 수립을 위한 추세 분석

예시: 아래 이미지는 Mobile Phones, Laptops, Tablets 세 제품의 연간 판매 기록을 다양한 추세선을 이용해 시각화한 예시입니다.



추세선 유형

아래 표는 SpreadJS에서 차트 작업 시 지원되는 다양한 추세선 유형을 설명합니다.

추세선 유형

설명

예

선형 추세선 (Linear Trendline)

선형 추세선은 데이터 시리즈의 값이 일정한 속도로 증가하거나 감소하는 방식을 보여주는 최적 적합 직선입니다.

차트의 미래 값 예측에도 유용합니다. 데이터 패턴이 선형(직선 형태)일 경우에 적합합니다.

수식: y = mx + b (여기서 m은 기울기, b는 절편)


지수 추세선 (Exponential Trendline)

지수 추세선은 데이터 값이 점점 더 빠른 속도로 증가(상승)하거나 감소(하강)한 뒤 평탄해지는 경우에 가장 유용한 최적 적합 곡선입니다.

수식: y = c · e^(bx)

(여기서 c, b는 상수이며, e는 자연로그의 밑)


로그 추세선 (Logarithmic Trendline)

로그 추세선은 데이터 값이 빠르게 증가 또는 감소한 후 평탄해지는 패턴을 보여주는 최적 적합 곡선입니다.

양수 및 음수 데이터 모두에 사용할 수 있습니다.

수식: y = c · ln(x) + b

(여기서 c, b는 상수이며, ln은 자연로그 함수)

주의: 이 추세선은 양수 값에만 사용할 수 있습니다.

데이터에 0 또는 음수가 포함되어 있으면 지수 추세선을 생성할 수 없습니다.


다항 추세선 (Polynomial Trendline)

다항 추세선은 데이터 값의 변동을 나타내는 곡선입니다.

이 유형의 추세선은 order 속성에 기반하며, 대규모 데이터 집합(예: 주식, 거래, 금융 데이터)의 증감 분석에 유용합니다.

수식: y = b + c₁x + c₂x² + c₃x³ + ...

(여기서 c₁, c₂, c₃는 상수이며 기본 차수는 2입니다)

차수 규칙:

1) 2 미만: 2로 처리됨

2) 6 초과: 6으로 처리됨

3) 소수: Math.floor로 정수 변환

4) 그 외 타입: 추세선 표시 안 됨


거듭제곱 추세선 (Power Trendline)

거듭제곱 추세선은 특정 비율로 증가하는 측정값 비교에 사용되는 곡선입니다.

수식: y = c · x^b

(여기서 c, b는 상수)

주의: 이 추세선은 양수 값에만 사용할 수 있습니다. 0 또는 음수가 포함된 경우 생성할 수 없습니다.


이동 평균 추세선 (Moving Average Trendline)

이동 평균 추세선은 데이터의 변동성을 줄여 보다 부드러운 추세 패턴을 보여줍니다.

period 속성을 기준으로 설정되며, 지정된 기간의 평균값을 기반으로 추세를 보여줍니다.

수식: Pₘ = Pₘ₋₁ + (yₘ - yₘ₋ₙ) / n

기본 period 값은 2이며, 2번째와 3번째 데이터 포인트의 평균이 두 번째 포인트로 사용됩니다.

최대 period 값은 데이터 집합 길이 - 1 입니다.

규칙:

1) 2 미만: 2로 처리됨

2) 최대값 초과: 최대값으로 처리됨

3) 소수: Math.floor로 정수 변환

4) 그 외 타입: 추세선 표시 안 됨


위 여섯 가지 추세선 유형 외에도 SpreadJS에서는 추세선의 사용자 지정 이름을 지원합니다. 이름을 설정하지 않으면 자동으로 기본 이름이 지정됩니다.

  • 이동 평균 추세선 이름 템플릿: '{기간 수}period MovingAverage({시리즈 이름})'

    예: '3period MovingAverage(Bears)'

  • 기타 추세선 이름 템플릿: '{추세선 유형}({시리즈 이름})'

    예: 'Logarithmic(Bears)'

지원되는 차트 유형

추세선을 추가할 수 있는 차트 유형은 다음과 같습니다:

  • 세로 막대형 차트

  • 가로 막대형 차트

  • 꺾은선형 차트

  • 분산형 차트

  • 영역형 차트

참고: 차트에 추세선을 추가할 때는 다음과 같은 제한 사항을 반드시 유의해야 합니다:

  • 추세선은 누적 세로 막대형 차트와 같은 차트 유형에 추가할 수 없습니다. 사용자가 추세선을 지원하지 않는 차트 유형으로 변경하거나 해당 유형의 차트를 추가하려고 할 경우, 추세선은 표시되지 않습니다.

다음 코드 샘플은 다양한 추세선을 사용하여 연간 판매 기록을 나타내는 예시입니다.

Ask ChatGPT

var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// 데이터 준비
activeSheet.setValue(0, 1, "Y-2016");
activeSheet.setValue(0, 2, "Y-2017");
activeSheet.setValue(0, 3, "Y-2018");
activeSheet.setValue(1, 0, "Mobile Phones");
activeSheet.setValue(2, 0, "Laptops");
activeSheet.setValue(3, 0, "Tablets");
for (var r = 1; r <= 3; r++)
{
      for (var c = 1; c <= 3; c++) {
         activeSheet.setValue(r, c, parseInt(Math.random() * 5000));
      }
}
// columnClustered 차트 추가
chart_columnClustered = activeSheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 100, 600, 400, "A1:D4");

// 시리즈[0] (Mobile Phones)에 추세선 추가
var series1 = chart_columnClustered.series().get(0);
series1.trendlines = [
{
   type: 2,
   forward: 2,
   name: "MovingAverage",
   style: { color: "blue" },
    period: 3 // 이동 평균 추세선에서만 사용
}];

// 시리즈[1] (Laptops)에 추세선 추가

var series2 = chart_columnClustered.series().get(1);
series2.trendlines = [
{
   type: 2,
   forward: 2,
   name: "MovingAverage",
   style:
   {
      color: "red"
   },
   period: 3
}];
// 시리즈[2] (Tablets)에 추세선 추가
var series3 = chart_columnClustered.series().get(2);
series3.trendlines =
[
   {
      type: 2,
      forward: 2,
      name: "MovingAverage",
      style: {color: "green"},
      period: 3
}];
chart_columnClustered.series().set(0, series1);
chart_columnClustered.series().set(1, series2);
chart_columnClustered.series().set(2, series3);
// 차트 제목 설정
var title = chart_columnClustered.title();
title.text = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "Red";
chart_columnClustered.title(title);
activeSheet.resumePaint();