ApexCharts는 강력한 JavaScript 차트 라이브러리입니다. 이 라이브러리는 시간을 기반으로 한 차트를 만들 수 있는 기능을 제공합니다. 이때, 차트에 표시되는 시간을 현지 시간으로 설정하고 싶으신가요? 아래의 가이드를 따라해보세요.

1. Moment.js 라이브러리 설치하기

Moment.js는 JavaScript에서 날짜와 시간을 다루는 데 사용되는 인기있는 라이브러리입니다. 현지 시간을 표시하기 위해 Moment.js를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install moment

2. Moment.js를 사용하여 현지 시간 설정하기

Moment.js를 사용하여 현지 시간을 설정하려면 먼저 Moment.js를 임포트해야 합니다.

import moment from 'moment';

그런 다음 ApexCharts에서 시간을 처리하는 방법을 정의해야 합니다. ApexCharts는 데이터를 시간대별로 정렬하는데 사용하는 xaxis 속성을 제공합니다. 우리는 이 속성을 사용하여 현지 시간을 표시하도록 설정할 것입니다.

// 현지 시간 가져오기
const localTime = moment().utcOffset('+09:00').format();

// ApexCharts에서 x축 속성 설정
const options = {
  chart: {
    // 차트 설정
  },
  xaxis: {
    type: 'datetime',
    labels: {
      formatter: function(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss');
      }
    }
  }
};

// 차트 생성 및 렌더링
const chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

위의 예제 코드에서는 utcOffset 함수를 사용하여 현지 시간을 가져오고, xaxis.labels.formatter 속성을 사용하여 시간을 원하는 형식으로 표시합니다.

이제 차트를 확인해 보면 현지 시간이 정상적으로 표시되는 것을 확인할 수 있습니다.

결론

ApexCharts에서 차트에 현지 시간을 설정하기 위해 Moment.js 라이브러리를 사용하는 방법에 대해 알아보았습니다. 이를 통해 원하는 형식으로 현지 시간을 표시하고 차트를 더 유연하게 사용할 수 있습니다.