[javascript] ApexCharts에서 데이터 집계하기

30 Nov 2023

javascript

개요

ApexCharts는 인터랙티브한 차트를 만들 수 있는 JavaScript 라이브러리입니다. 이번 포스트에서는 ApexCharts를 사용하여 데이터를 집계하는 방법에 대해 알아보겠습니다.

데이터 집계하기

ApexCharts를 활용하여 데이터를 집계하는 방법은 다양한 기능과 옵션을 제공합니다. 예를 들어, 데이터를 그룹화하거나 필터링하여 원하는 형태로 나타낼 수 있습니다.

그룹화하기

데이터를 그룹화하여 집계하는 것은 매우 유용한 도구입니다. ApexCharts에서는 groupBy 옵션을 사용하여 그룹화를 수행할 수 있습니다. 아래는 그룹화 예제입니다.

const options = {
  series: [{
    data: [
      { x: '2021-01-01', y: 10 },
      { x: '2021-02-01', y: 15 },
      { x: '2021-01-01', y: 8 },
      { x: '2021-02-01', y: 12 },
    ],
  }],
  chart: {
    type: 'line',
  },
  xaxis: {
    type: 'datetime',
  },
  dataLabels: {},
  tooltip: {},
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200,
      },
      legend: {
        position: 'bottom',
      },
    },
  }],
  plotOptions: {
    bar: {
      horizontal: false,
    },
  },
  fill: {
    colors: ['#f44336'],
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'smooth',
  },
  xaxis: {
    type: 'datetime',
  },
  legend: {
    position: 'top',
  },
};

const chart = new ApexCharts(document.getElementById('chart'), options);
chart.render();

필터링하기

데이터 필터링은 특정 조건에 맞는 데이터만을 추출하여 나타내는 기능입니다. ApexCharts에서는 filterFn 옵션을 사용하여 필터링을 수행할 수 있습니다. 아래는 필터링 예제입니다.

const options = {
  series: [{
    data: [
      { x: '2021-01-01', y: 10 },
      { x: '2021-02-01', y: 15 },
      { x: '2021-03-01', y: 8 },
      { x: '2021-04-01', y: 12 },
    ],
  }],
  chart: {
    type: 'line',
  },
  xaxis: {
    type: 'datetime',
  },
  dataLabels: {},
  tooltip: {},
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200,
      },
      legend: {
        position: 'bottom',
      },
    },
  }],
  plotOptions: {
    bar: {
      horizontal: false,
    },
  },
  fill: {
    colors: ['#f44336'],
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'smooth',
  },
  xaxis: {
    type: 'datetime',
  },
  legend: {
    position: 'top',
  },
  filter: {
    filterFn: function (value, seriesIndex, dataPointIndex, w) {
      return value > 10;
    }
  }
};

const chart = new ApexCharts(document.getElementById('chart'), options);
chart.render();

결론

ApexCharts는 데이터 집계를 효과적으로 수행할 수 있는 강력한 도구입니다. 그룹화와 필터링 기능을 통해 데이터를 원하는 형태로 나타내는 것이 가능하며, 다양한 옵션을 활용하여 차트를 커스터마이징할 수 있습니다.