[javascript] ApexCharts에서 그래프를 생성하는 방법

30 Nov 2023

javascript

ApexCharts는 JavaScript 기반의 오픈 소스 그래프 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 그래프를 쉽게 생성하고 사용자 정의할 수 있습니다.

1. ApexCharts 설치하기

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

npm install apexcharts

또는 CDN을 통해 직접 라이브러리를 추가하는 방법도 있습니다:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

2. 그래프 생성하기

다음은 ApexCharts를 사용하여 간단한 선 그래프를 생성하는 예제 코드입니다:

// HTML에서 그래프를 그릴 요소 선택하기
const chartElement = document.querySelector("#chart");

// 그래프 옵션 설정하기
const chartOptions = {
  chart: {
    type: "line",
  },
  series: [
    {
      name: "데이터",
      data: [10, 20, 30, 40, 50],
    },
  ],
  xaxis: {
    categories: ["A", "B", "C", "D", "E"],
  },
};

// 그래프 생성하기
const chart = new ApexCharts(chartElement, chartOptions);
chart.render();

위 코드에서 chartElement 변수에는 그래프를 그릴 HTML 요소를 선택합니다. 그리고 chartOptions 변수에는 그래프의 유형, 데이터 및 라벨 등의 옵션을 설정합니다.

3. 그래프 사용자 정의하기

ApexCharts는 다양한 사용자 정의 옵션을 제공합니다. 예를 들어, 그래프의 색상, 축 레이블, 제목, 범례 등을 변경할 수 있습니다.

const chartOptions = {
  chart: {
    type: "line",
    background: "#f4f4f4",
  },
  series: [
    {
      name: "데이터",
      data: [10, 20, 30, 40, 50],
    },
  ],
  xaxis: {
    categories: ["A", "B", "C", "D", "E"],
  },
  stroke: {
    curve: "smooth",
    colors: ['#ff0000'],
  },
  title: {
    text: "그래프 제목",
    align: "center",
  },
  legend: {
    position: "top",
  },
};

const chart = new ApexCharts(chartElement, chartOptions);
chart.render();

위 코드에서는 그래프의 배경색을 변경하고 선을 더 부드럽게 만들기 위해 curve 옵션을 smooth로 설정하였습니다. 또한 그래프의 제목을 중앙 정렬하고 범례를 위쪽에 위치시키도록 설정하였습니다.

4. 추가 리소스

ApexCharts에 대한 자세한 내용과 다양한 사용법을 알아보려면 공식 문서를 참조하시기 바랍니다:

공식 홈페이지: https://apexcharts.com/
GitHub 저장소: https://github.com/apexcharts/apexcharts.js

ApexCharts를 사용하면 간편하게 그래프를 생성하고 사용자 정의할 수 있습니다. 시작해보세요!