[javascript] ApexCharts에서 차트 인터랙션 활성화하기

30 Nov 2023

javascript

ApexCharts는 강력하고 사용자 친화적인 JavaScript 차트 라이브러리입니다. 그 중에서도 차트 인터랙션은 사용자와의 상호작용을 강화하여 데이터에 대한 시각적 표현을 더욱 효과적으로 전달할 수 있게 해줍니다. 이번 글에서는 ApexCharts를 사용하여 차트 인터랙션을 활성화하는 방법을 살펴보겠습니다.

1. ApexCharts 설치하기

우선 ApexCharts를 사용하기 위해 필요한 패키지를 설치해야 합니다. npm을 사용하는 경우 다음과 같이 설치할 수 있습니다:

npm install apexcharts

또는 CDN을 사용하는 경우 다음과 같이 스크립트를 추가할 수 있습니다:

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

2. 차트 생성하기

ApexCharts를 사용하여 차트를 생성하기 위해 다음과 같은 기본적인 코드를 작성합니다:

var options = {
  chart: {
    type: 'bar',
  },
  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-container'), options);
chart.render();

위 코드에서 #chart-container는 차트가 표시될 HTML 요소의 ID입니다. 이를 원하는 요소로 수정하세요.

3. 인터랙션 활성화하기

차트 인터랙션을 활성화하려면 interactivity 옵션을 사용합니다. 다음 예시를 참고하세요:

var options = {
  chart: {
    type: 'bar',
  },
  series: [{
    name: 'sales',
    data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
  },
  interactivity: {
    enabled: true
  }
}

var chart = new ApexCharts(document.querySelector('#chart-container'), options);
chart.render();

위 코드에서 interactivity의 enabled 속성을 true로 설정하여 인터랙션을 활성화했습니다.

결론

ApexCharts를 사용하여 차트 인터랙션을 활성화하는 방법을 알아보았습니다. 이를 통해 사용자는 차트와 상호 작용하여 데이터를 더욱 쉽고 효율적으로 이해할 수 있습니다. ApexCharts의 다양한 옵션과 기능을 활용하여 원하는 차트 인터랙션을 구현해보세요.

1. ApexCharts 설치하기

2. 차트 생성하기

3. 인터랙션 활성화하기

결론

참고 자료