[javascript] ApexCharts에서 차트에 다중 축 그래프 생성하기

30 Nov 2023

javascript

ApexCharts는 멋진 수준의 다중 축 그래프를 생성하는 JavaScript 라이브러리입니다. 이 튜토리얼에서는 ApexCharts를 사용하여 다중 축 그래프를 만드는 방법을 알아보겠습니다.

1. ApexCharts 설치

ApexCharts를 사용하기 위해서는 먼저 ApexCharts를 설치해야 합니다. 다음 명령어를 사용하여 ApexCharts를 설치할 수 있습니다.

npm install apexcharts --save

2. HTML 파일에 ApexCharts 추가하기

다음으로, HTML 파일에 ApexCharts를 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 ApexCharts를 가져올 수 있습니다.

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

3. 다중 축 그래프 생성하기

아래의 코드는 간단한 다중 축 그래프를 생성하는 예시입니다. 다음 코드를 HTML 파일에 추가하세요.

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

<script>
  var options = {
    series: [
      {
        name: "Series 1",
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
      },
      {
        name: "Series 2",
        data: [23, 45, 67, 83, 77, 78, 85, 89, 95],
      },
    ],
    chart: {
      height: 350,
      type: "line",
    },
    xaxis: {
      categories: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    },
    yaxis: [
      {
        seriesName: "Series 1",
        axisTicks: {
          show: true,
        },
        axisBorder: {
          show: true,
          color: "#008FFB",
        },
        labels: {
          style: {
            colors: "#008FFB",
          },
        },
        title: {
          text: "Series 1",
          style: {
            color: "#008FFB",
          },
        },
      },
      {
        seriesName: "Series 2",
        opposite: true,
        axisTicks: {
          show: true,
        },
        axisBorder: {
          show: true,
          color: "#00E396",
        },
        labels: {
          style: {
            colors: "#00E396",
          },
        },
        title: {
          text: "Series 2",
          style: {
            color: "#00E396",
          },
        },
      },
    ],
  };

  var chart = new ApexCharts(document.querySelector("#chart"), options);
  chart.render();
</script>

위의 코드에서 series 배열에는 각각 다른 축을 가진 시리즈의 데이터가 포함되어 있습니다. xaxis는 x축 카테고리 값을 지정하고, yaxis 배열은 각 시리즈에 대한 축 설정을 정의합니다.

4. 결과 확인하기

위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 파일을 실행하면, 다중 축 그래프가 표시될 것입니다.

이제 ApexCharts를 사용하여 다중 축 그래프를 생성하는 방법을 알게 되었습니다. ApexCharts는 다양한 그래프 타입과 설정을 제공하기 때문에, 자신의 요구 사항에 맞게 사용할 수 있습니다. ApexCharts 공식 문서에서 자세한 정보와 설정 옵션을 확인할 수 있습니다.

참고 자료

ApexCharts 공식 문서