[javascript] ApexCharts에서 가로 선 그래프 생성하기

30 Nov 2023

javascript

ApexCharts는 강력한 JavaScript 그래프 라이브러리로, 다양한 유형의 그래프를 만들 수 있습니다. 이제 우리는 ApexCharts를 사용하여 가로 선 그래프를 만들어 보겠습니다.

1. ApexCharts 라이브러리 추가하기

먼저, ApexCharts 라이브러리를 프로젝트에 추가해야 합니다. 아래와 같이 <script> 태그를 사용하여 ApexCharts를 불러옵니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.0/dist/apexcharts.min.js"></script>
</head>
<body>
  <!-- 그래프를 표시할 부분 -->
  <div id="chart"></div>

  <!-- 스크립트 부분 -->
  <script>
    // 그래프 코드가 들어갈 부분
  </script>
</body>
</html>

2. 가로 선 그래프 생성하기

다음으로, 가로 선 그래프를 생성해 봅시다. 가로 선 그래프는 ApexCharts 생성자를 사용하여 만들 수 있습니다. 아래는 간단한 예제 코드입니다.

// 그래프 데이터
const chartData = {
  chart: {
    type: 'bar',
    height: 350,
    width: '100%'
  },
  series: [{
    name: '가로 선 그래프',
    data: [10, 25, 15, 30, 20]
  }],
  xaxis: {
    categories: ['항목1', '항목2', '항목3', '항목4', '항목5']
  },
  yaxis: {
    title: {
      text: '값'
    }
  }
};

// 가로 선 그래프 생성
const chart = new ApexCharts(document.querySelector("#chart"), chartData);

// 그래프 표시
chart.render();

위의 코드는 간단한 가로 선 그래프를 생성하는 예제입니다. chartData 객체에 그래프의 유형, 크기, 데이터 및 축에 대한 설정을 정의합니다.

3. 그래프 커스터마이징

그래프를 더욱 흥미롭게 만들기 위해 다양한 옵션을 사용하여 그래프를 커스터마이징할 수 있습니다. 자세한 내용은 ApexCharts 공식 문서를 참조하세요.

결론

이제 ApexCharts를 사용하여 가로 선 그래프를 생성하는 방법을 알게 되었습니다. ApexCharts는 다양한 그래프 유형을 지원하므로 웹 애플리케이션에 맞는 그래프를 선택하여 사용할 수 있습니다.