ApexCharts는 대화형 차트 라이브러리로서, 다양한 종류의 차트를 생성하고 데이터를 시각화할 수 있습니다. 그러나 때로는 차트에 표시된 데이터를 테이블 형태로 보여주고 싶을 때도 있습니다. 이 포스트에서는 ApexCharts에서 차트에 데이터 테이블을 표시하는 방법에 대해 알아보겠습니다.

1. 데이터 준비하기

먼저, 차트에 표시할 데이터를 준비해야 합니다. 예를 들어, 다음과 같은 배열 형태의 데이터를 사용해보겠습니다.

const data = [
  { month: 'January', sales: 1000 },
  { month: 'February', sales: 1500 },
  { month: 'March', sales: 1200 },
  // ...
];

2. ApexCharts와 데이터 테이블 라이브러리 임포트하기

ApexCharts를 사용하기 위해 먼저 ApexCharts와 데이터 테이블을 표시하기 위한 라이브러리를 임포트해야 합니다. 다음과 같이 스크립트 태그를 사용하여 라이브러리를 로드해줍니다.

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.0"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/locales/apexcharts.ko.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

3. 차트 생성하기

ApexCharts에서 데이터 테이블을 표시하기 위해 다음과 같은 방법으로 차트를 생성합니다.

const chartOptions = {
  chart: {
    type: 'bar',
    height: 350,
    id: 'chart',
  },
  series: [
    {
      name: 'Sales',
      data: data.map(item => item.sales),
    },
  ],
  xaxis: {
    categories: data.map(item => item.month),
  },
};

const chart = new ApexCharts(document.querySelector('#chart'), chartOptions);
chart.render();

4. 데이터 테이블 추가하기

마지막으로, 데이터 테이블을 추가해주어야 합니다. ApexCharts와 데이터 테이블 라이브러리를 함께 사용하여 차트 아래에 데이터 테이블을 표시할 수 있습니다. 다음과 같이 코드를 작성해보세요.

$(document).ready(function () {
  $('#chart').DataTable({
    data: data,
    columns: [
      { title: 'Month', data: 'month' },
      { title: 'Sales', data: 'sales' },
    ],
  });
});

5. 결과 확인하기

위의 코드를 작성하고 웹 페이지를 열어보면, ApexCharts로 생성한 차트 아래에 데이터 테이블이 표시된 것을 확인할 수 있습니다.

ApexCharts에서 차트에 데이터 테이블을 표시하는 방법에 대해 알아보았습니다. 데이터를 테이블 형태로 보여줌으로써 사용자들이 쉽게 데이터를 확인할 수 있게 될 것입니다.