[javascript] ApexCharts에서 차트 스크롤링하기

30 Nov 2023

javascript

ApexCharts는 JavaScript 기반의 인터랙티브 차트 라이브러리로, 다양한 유형의 차트를 생성하고 사용자가 데이터를 스크롤하여 차트를 탐색할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 ApexCharts에서 차트 스크롤링을 구현하는 방법에 대해 알아보겠습니다.

1. ApexCharts 설치하기

ApexCharts를 사용하기 위해 먼저 ApexCharts 패키지를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 ApexCharts를 설치할 수 있습니다.

npm install apexcharts

2. HTML에 차트 컨테이너 추가하기

먼저, 스크롤 가능한 차트를 표시할 HTML 요소를 추가해야 합니다. 일반적으로 <div> 요소를 사용하여 차트를 감싸는 컨테이너를 만들 수 있습니다. 예를 들면 다음과 같습니다.

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

3. JavaScript 코드 작성하기

ApexCharts를 사용하여 스크롤 가능한 차트를 생성하기 위해 JavaScript 코드를 작성해야 합니다. 아래 예제는 ApexCharts를 사용하여 스크롤 가능한 차트를 생성하는 간단한 코드입니다.

import ApexCharts from 'apexcharts';

// 차트 데이터
const chartData = {
  series: [
    {
      name: 'Series 1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    },
    {
      name: 'Series 2',
      data: [23, 12, 54, 61, 32, 56, 83, 91, 100]
    }
  ],
  xaxis: {
    categories: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월']
  }
};

// 차트 옵션
const chartOptions = {
  chart: {
    type: 'bar',
    stacked: false,
    height: 500,
    width: '100%'
  },
  dataLabels: {
    enabled: false
  },
  plotOptions: {
    bar: {
      horizontal: false
    }
  },
  stroke: {
    width: 1,
    colors: ['#fff']
  },
  xaxis: {
    type: 'category'
  },
  yaxis: {
    title: {
      text: '값'
    }
  },
  tooltip: {
    y: {
      formatter: function(val) {
        return val
      }
    }
  }
};

// 차트 생성
const chart = new ApexCharts(document.querySelector("#chart-container"), chartOptions);

// 차트 데이터 설정
chart.updateSeries(chartData.series);

// 차트 렌더링
chart.render();

위의 코드에서 chartData는 차트 데이터를 나타내며, chartOptions는 차트의 모양과 스타일을 설정하는 옵션입니다. chartOptions를 필요에 맞게 수정하여 차트를 원하는 대로 구성할 수 있습니다.

4. 스크롤링 지원 추가하기

ApexCharts에서 스크롤링을 지원하려면 chartOptions에 scrollablePlotArea 속성을 추가해야 합니다. scrollablePlotArea에는 minWidth 및 maxWidth 옵션을 설정하여 스크롤 가능한 영역의 너비를 지정할 수 있습니다. 아래 예제는 스크롤 가능한 영역 너비를 500으로 설정한 예제입니다.

const chartOptions = {
  // ...
  scrollablePlotArea: {
    minWidth: 500,
    maxWidth: 800
  },
  // ...
};

이렇게 하면 차트 옵션에 스크롤링 기능이 추가되고, 사용자는 차트를 스크롤하여 데이터를 탐색할 수 있습니다.

결론

ApexCharts를 사용하여 스크롤링 가능한 차트를 구현하는 방법을 알아보았습니다. 스크롤링은 차트에 대한 대규모 데이터를 효과적으로 탐색하는 데 도움이 되며, ApexCharts의 다양한 설정과 옵션을 활용하여 원하는 차트를 생성할 수 있습니다.

더 자세한 정보를 원하신다면 ApexCharts 공식 홈페이지를 참조하시기 바랍니다.