[javascript] ApexCharts에서 데이터 필터링하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 기능 강화형 차트 라이브러리입니다. 이 차트 라이브러리를 사용하면 다양한 형식의 데이터를 시각적으로 표현할 수 있습니다. 이번 포스트에서는 ApexCharts를 사용하여 데이터를 필터링하는 방법에 대해 알아보겠습니다.

데이터 필터링 준비하기

ApexCharts에서 데이터를 필터링하려면 먼저 차트를 생성하고 데이터를 준비해야 합니다. 예를 들어, 다음과 같이 매출 데이터를 가진 배열을 사용해 보겠습니다.

const salesData = [
  { month: 'Jan', sales: 1000 },
  { month: 'Feb', sales: 1500 },
  { month: 'Mar', sales: 2000 },
  { month: 'Apr', sales: 1200 },
  { month: 'May', sales: 1800 },
  // ...
];

데이터 필터링하기

필터링된 데이터를 기반으로 ApexCharts를 업데이트하기 위해 차트 인스턴스를 다시 렌더링해야 합니다. 데이터를 필터링하는 가장 간단한 방법은 배열의 filter() 메서드를 사용하여 조건을 만족하는 항목만 선택하는 것입니다. 예를 들어, 매출이 1500 이상인 항목만 필터링해 보겠습니다.

const filteredData = salesData.filter(data => data.sales >= 1500);

필터링된 데이터로 업데이트하기

필터링된 데이터를 기반으로 차트를 업데이트하려면 ApexCharts의 updateSeries() 메서드를 사용해야 합니다. 필터링된 데이터를 인자로 전달하여 차트를 업데이트할 수 있습니다.

chart.updateSeries([
  {
    name: 'Sales',
    data: filteredData.map(data => data.sales)
  }
]);

전체 코드 예시

아래는 데이터 필터링하는 전체 예시 코드입니다.

const salesData = [
  { month: 'Jan', sales: 1000 },
  { month: 'Feb', sales: 1500 },
  { month: 'Mar', sales: 2000 },
  { month: 'Apr', sales: 1200 },
  { month: 'May', sales: 1800 },
  // ...
];

const filteredData = salesData.filter(data => data.sales >= 1500);

chart.updateSeries([
  {
    name: 'Sales',
    data: filteredData.map(data => data.sales)
  }
]);

결론

ApexCharts를 사용하면 데이터를 필터링하여 차트를 업데이트할 수 있습니다. 이를 통해 사용자는 특정 조건에 따라 데이터를 동적으로 표시할 수 있습니다. 상세한 내용은 ApexCharts 공식 문서를 참조하시기 바랍니다.