[javascript] ApexCharts에서 데이터 포맷팅하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 데이터 시각화 라이브러리입니다. 데이터를 그래프나 차트로 표현할 때 자주 사용되며, 사용자의 요구에 맞게 데이터를 포맷팅하는 것이 중요합니다.

1. 데이터 포맷팅 기능

ApexCharts는 다양한 데이터 포맷팅 기능을 제공합니다. 몇 가지 주요 기능은 다음과 같습니다:

숫자 포맷팅: 소수점 자릿수, 천 단위 구분기호 등 숫자를 원하는 형식으로 표현할 수 있습니다.
날짜 포맷팅: 날짜와 시간을 원하는 형식으로 표시할 수 있습니다.
레이블 포맷팅: 그래프의 축 레이블이나 눈금을 원하는 형식으로 표현할 수 있습니다.

2. 숫자 포맷팅 예제

다음은 ApexCharts에서 숫자를 포맷팅하는 예제입니다:

var options = {
  series: [{
    data: [5000, 10000, 15000, 20000]
  }],
  xaxis: {
    categories: ['A', 'B', 'C', 'D']
  },
  yaxis: {
    labels: {
      formatter: function(val) {
        return new Intl.NumberFormat('en-US').format(val);
      }
    }
  }
};

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

이 예제에서는 Intl.NumberFormat 객체를 사용하여 숫자를 천 단위 구분기호로 포맷팅하고 있습니다.

3. 날짜 포맷팅 예제

다음은 ApexCharts에서 날짜를 포맷팅하는 예제입니다:

var options = {
  series: [{
    data: [
      {
        x: new Date('2021-01-01T00:00:00'),
        y: 100
      },
      {
        x: new Date('2021-01-02T00:00:00'),
        y: 200
      },
      {
        x: new Date('2021-01-03T00:00:00'),
        y: 150
      }
    ]
  }],
  xaxis: {
    type: 'datetime',
    labels: {
      formatter: function(val) {
        return new Intl.DateTimeFormat('en-US').format(val);
      }
    }
  }
};

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

이 예제에서는 Intl.DateTimeFormat 객체를 사용하여 날짜를 원하는 형식으로 포맷팅하고 있습니다.

4. 레이블 포맷팅 예제

다음은 ApexCharts에서 레이블을 포맷팅하는 예제입니다:

var options = {
  series: [30, 40, 45, 50],
  labels: ['Apple', 'Banana', 'Orange', 'Mango'],
  xaxis: {
    labels: {
      formatter: function(val) {
        return "Fruit: " + val;
      }
    }
  }
};

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

이 예제에서는 formatter 함수를 사용하여 각 레이블에 “Fruit: “이라는 접두어를 붙이고 있습니다.

참고 자료

위의 자료들을 참고하여 ApexCharts에서 데이터 포맷팅을 다양하게 활용해보세요.