문서 › 숫자와 모양

차트 추세선·이동평균선, 전년 동기 비교(증감·증감률)

series.trend 한 줄로 선형 추세선·이동평균선, compare 로 전년 같은 달을 점선으로 겹치고 툴팁에 증감·증감률을 보여 주는 전년 대비 차트. 막대·선·영역 차트.

추세선이란 들쭉날쭉한 값 사이로 전체 흐름을 보여 주는 보조선입니다. 선형 추세선은 모든 값에 가장 가까운 직선(최소제곱)이고, 이동평균선은 최근 몇 기간의 평균을 이어 짧은 흔들림을 덜어 냅니다. 전년 동기 비교(전년 대비 차트)는 올해 값 옆에 작년 같은 달의 값을 겹쳐 얼마나 늘고 줄었는지를 보여 줍니다.

82chart 0.5 에서는 둘 다 옵션 한 줄입니다. 시리즈에 trend 를 주면 그 시리즈 색의 가는 점선이 그려지고, 차트에 compare 를 주면 이전 기간이 흐린 점선 시리즈로 겹치며 툴팁에 증감과 증감률이 붙습니다.

추세선과 이동평균선

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'line',
  title: '9월 일별 방문자',
  unit: '명',
  data: {
    labels: Array.from({ length: 30 }, (_, i) => '2026-09-' + String(i + 1).padStart(2, '0')),
    series: [
      {
        name: '방문자',
        data: Array.from({ length: 30 }, (_, i) => Math.round(1200 + i * 18 + Math.sin(i * 0.9) * 160)),
        trend: 'linear',
      },
      {
        name: '회원',
        data: Array.from({ length: 30 }, (_, i) => Math.round(520 + i * 6 + ((i + 2) % 7 < 2 ? -140 : 0) + Math.cos(i) * 40)),
        trend: { type: 'moving', period: 7 },
      },
    ],
  },
});

추세선은 범례에 '방문자 추세', '회원 7기간 이동평균' 처럼 따로 나오고(이름은 trend.name), 범례를 눌러 따로 켜고 끌 수 있습니다. 툴팁에도 값이 나옵니다.
선형은 값이 있는 점들로 그은 최소제곱 직선이고, 첫 값부터 마지막 값까지 그립니다. 이동평균은 직전 period개(기본 7)의 평균이며, 빈 값(null)을 만나면 다시 셉니다.
선·영역·막대 시리즈(같은 x 를 쓰는 차트)에 됩니다. 산점도·피라미드·폭포·가로 막대에는 해당하지 않습니다.
추세선은 데이터가 아니므로 CSV·엑셀·표에는 들어가지 않습니다.

전년 동기 비교: 데이터 안에서 (shift)

24개월을 넘기고 previous: 'shift' 를 주면 앞 12개월은 비교 기준이 되고 최근 12개월이 그려집니다. 막대 위에 마우스를 올리면 전년 값과 증감·증감률이 나옵니다. deltaColors: 'korea' 면 ▲ 빨강·▼ 파랑으로 씁니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'bar',
  title: '월별 매출, 전년 같은 달과 비교',
  unit: '원',
  deltaColors: 'korea',
  // 24개월을 주면 앞 12개월은 비교 기준이 되고 최근 12개월이 그려집니다
  compare: { previous: 'shift', period: 12, label: '전년' },
  data: {
    labels: Array.from({ length: 24 }, (_, i) => (i < 12 ? '25년 ' : '26년 ') + ((i % 12) + 1) + '월'),
    series: [{
      name: '매출',
      data: Array.from({ length: 24 }, (_, i) => Math.round((180 + i * 4 + Math.sin(i / 1.9) * 22) * 1e6)),
    }],
  },
});

'shift' 의 간격(period)은 x 가 날짜일 때 간격으로 정합니다: 월 12, 분기 4, 일 7(같은 요일), 시 24, 그 밖 1. 위 예처럼 이름 라벨('26년 1월')이면 period: 12 를 직접 주세요. 주 단위라면 period: 52 입니다.
이전 기간은 데이터라서 CSV·엑셀·표에 열로 들어갑니다.

이전 기간 데이터를 따로 주기

작년 값이 다른 곳에 있으면 previous 에 ChartData 를 넣습니다. 시리즈는 순서로, 값은 위치로 맞춥니다(첫 시리즈의 j번째 값이 이 차트의 j번째 x 의 이전 값).

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'line',
  title: '분기 가입자, 전년 동기 대비',
  unit: '명',
  compare: {
    label: '전년',
    previous: { series: [{ data: [4100, 4520, 4380, 5010] }] },
  },
  data: {
    labels: ['1분기', '2분기', '3분기', '4분기'].map((q) => '2026년 ' + q),
    series: [{ name: '가입자', data: [4620, 4810, 5240, 5580] }],
  },
});

옵션

옵션	설명
`series[i].trend`	`'linear'`, `'moving'`, 또는 `{ type: 'linear' \| 'moving', period?: 7, name? }`
`compare.previous`	`ChartData`(시리즈는 순서, 값은 위치로 맞춤) 또는 `'shift'`
`compare.label`	이전 기간 이름(기본 '이전 기간'). 범례·툴팁에 '매출 (전년)' 처럼
`compare.period`	`'shift'` 간격(기본: x 간격으로 추정)
`deltaColors`	`'korea'` 면 증감을 ▲ 빨강 ▼ 파랑으로
`locale.trend`, `movingAverage`, `previous`, `compareChange`, `compareRate`	문구: '추세', '기간 이동평균', '이전 기간', '증감', '증감률'

자주 묻는 질문

이중 축 없이 전년 비교를 하나요?

네. 이전 기간은 같은 축, 같은 단위에 겹쳐 그립니다. 단위가 다른 두 값을 억지로 겹치는 이중 축을 쓰지 않아도 되고, 증감과 증감률은 툴팁에 숫자로 나옵니다.

추세선이 범례 클릭으로 꺼지나요?

네. 추세선은 범례에 따로 나오고 원래 시리즈와 따로 켜고 끕니다. 원래 시리즈를 끄면 그 추세선도 함께 숨겨집니다.

엑셀로 내보내면 추세선과 전년 값도 들어가나요?

전년 값(비교 기준)은 데이터라 CSV·엑셀에 열로 들어가고, 추세선은 계산한 보조선이라 들어가지 않습니다.