[javascript] ApexCharts에서 차트에 이동 평균선 설정하기

30 Nov 2023

javascript

ApexCharts는 JavaScript를 사용하여 다양한 유형의 차트를 생성할 수 있는 라이브러리입니다. 이 라이브러리를 사용하면 주식 차트와 같은 데이터 시각화를 할 수 있습니다. Moving average line(이동 평균선)은 주식 차트에서 매우 일반적으로 사용되는 기술적 분석 항목 중 하나입니다. 이 기능을 ApexCharts에서 구현하는 방법을 알아보겠습니다.

1. ApexCharts 설치 및 설정

먼저, ApexCharts를 프로젝트에 설치해야 합니다. 다음과 같은 명령어를 사용하여 ApexCharts를 설치할 수 있습니다:

npm install apexcharts

ApexCharts를 설치한 후, HTML 파일의 <head> 태그 내에 다음 코드를 추가하여 ApexCharts 라이브러리를 로드합니다:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

2. 이동 평균선 구성하기

이동 평균선을 그래프에 추가하기 위해 다음과 같은 단계를 따르세요:

차트의 데이터와 옵션을 설정합니다:

 var options = {
   chart: {
     type: 'line'
   },
   series: [{
     name: '주가',
     data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
   }],
   xaxis: {
     categories: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월']
   }
 }

ApexCharts 인스턴스를 생성합니다:

 var chart = new ApexCharts(document.querySelector("#chart"), options);
 chart.render();

이동 평균 데이터를 계산합니다:

 var movingAverage = [];

 for (var i = 0; i < options.series[0].data.length; i++) {
   if (i < 2) {
     movingAverage.push(options.series[0].data[i]);
   } else {
     var sum = 0;
     for (var j = i - 2; j <= i; j++) {
       sum += options.series[0].data[j];
     }
     movingAverage.push(sum / 3);
   }
 }

이동 평균 데이터를 차트에 추가합니다:

 chart.appendSeries({
   name: '이동 평균선',
   data: movingAverage
 });

이제 이동 평균선이 포함된 차트를 확인할 수 있습니다. 차트를 웹 페이지에 표시하기 위해서는 <div> 요소를 추가해야 합니다:

<div id="chart"></div>

ApexCharts를 사용하여 이동 평균선을 그래프에 추가하는 방법을 알아보았습니다. 이 기능을 사용하여 다양한 종류의 차트에 이동 평균선을 적용할 수 있습니다. ApexCharts의 공식 문서에서 더 많은 사용 사례와 설정 옵션을 확인할 수 있습니다.

참고 자료

ApexCharts 공식 문서: https://apexcharts.com/
ApexCharts GitHub 저장소: https://github.com/apexcharts/apexcharts.js