[javascript] ApexCharts에서 차트 브러시링하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 최신 차트 라이브러리입니다. 이 라이브러리를 사용하여 다양한 종류의 차트를 생성하고 사용자에게 시각적인 표현을 제공할 수 있습니다.

이번 포스트에서는 ApexCharts에서 차트 브러시링(brushing)을 구현하는 방법에 대해 알아보겠습니다. 차트 브러시링은 사용자가 일부 데이터를 선택하고 해당 데이터로 새로운 차트를 업데이트하는 기능을 말합니다.

ApexCharts 설치하기

ApexCharts 라이브러리를 사용하기 위해서는 해당 라이브러리를 먼저 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다.

npm install apexcharts

또는 CDN을 사용할 수도 있습니다. HTML 파일의 <head> 태그 내에 다음 스크립트 태그를 추가하면 됩니다.

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.0/dist/apexcharts.min.js"></script>

차트 생성하기

ApexCharts를 사용하여 차트를 생성하기 위해서는 HTML 파일에 <div> 태그를 추가하고 해당 태그를 JavaScript 코드에서 선택해야 합니다. 예를 들면 다음과 같습니다.

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

JavaScript 코드에서는 다음과 같이 차트를 생성할 수 있습니다.

var options = {
  chart: {
    type: 'bar',
    height: 350,
    toolbar: {
      show: false
    }
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  }
}

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

위의 코드는 #chart id를 가진 <div>를 선택하여 bar 차트를 생성하는 예시입니다. series 속성에는 차트 데이터가 들어가고, xaxis 속성에는 x축의 카테고리 데이터가 들어갑니다.

차트 브러시링 구현하기

차트 브러시링을 구현하기 위해서는 ApexCharts에서 제공하는 brush 옵션을 사용해야 합니다. brush 옵션은 차트의 범위를 선택할 수 있는 기능을 제공합니다.

var options = {
  chart: {
    type: 'bar',
    height: 350,
    toolbar: {
      show: false
    }
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  },
  brush: {
    enabled: true,
    target: 'chart'
  }
}

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

위의 코드에서 brush 속성을 추가하고 enabled 값을 true로 설정하면 브러시링 기능이 활성화됩니다. target 속성을 사용하여 브러시링을 적용할 차트를 지정할 수 있습니다.

차트 업데이트하기

브러시링을 통해 선택한 데이터로 새로운 차트를 업데이트하기 위해서는 brushChanged 이벤트를 사용해야 합니다. 이 이벤트는 사용자가 데이터를 선택할 때마다 발생합니다. 다음은 brushChanged 이벤트를 처리하는 예시 코드입니다.

chart.on('brushChanged', function({xaxis, yaxis}) {
  // 새로운 차트 데이터로 업데이트하기
  var newData = getDataForBrushedRange(xaxis.min, xaxis.max);
  chart.updateSeries([{data: newData}]);
})

위의 코드에서는 brushChanged 이벤트가 발생하면 getDataForBrushedRange 함수를 사용하여 브러시링 범위에 해당하는 새로운 데이터를 가져옵니다. 그리고 chart.updateSeries 함수를 사용하여 차트 데이터를 업데이트합니다.

마무리

이번 포스트에서는 ApexCharts에서 차트 브러시링을 구현하는 방법을 알아보았습니다. 차트 브러시링은 사용자가 데이터를 선택하고 업데이트된 차트를 보여주는 기능이기 때문에 데이터 분석 및 시각화에 유용하게 사용될 수 있습니다.

더 자세한 내용은 ApexCharts 공식 문서를 참고하시기 바랍니다.

Happy coding!