[라이브러리] ApexCharts.js 사용법

---

알고있으면 좋은 Tip✨

---

ApexCharts.js

• 데이터를 시각화 해주는 차트 라이브러리이다.
• 선 그래프, 거품형, 타임라인, 히트맵까지 다양한 스타일들이 있고, 반응형에 커스텀 기능까지 구현되어 있다.
• 데모 사이트 : https://apexcharts.com/javascript-chart-demos/
• 공식 사이트 : https://apexcharts.com/

 

(1) <script> 태그로 라이브러리 사용하기

• apexcharts.js 또는 apexcharts.min.js (*경량화 파일) 사용한다.
• HTML 파일에 <script> 형식으로 모듈을 불러온다.
• 무수한 레퍼런스가 있기 때문에 상황에 따라 찾아보면서 진행하면 좋을 것 같다.

// (1) 예제 코드
let columnOptions = {
        series: $columnSeries,
        chart: {
        type: 'bar',
        height: 500,
        stacked: true,
        fontFamily: 'SUITE-Regular',
      },
      plotOptions: {
        bar: {
          horizontal: true,
          dataLabels: {
            total: {
              enabled: true,
              offsetX: 0,
              style: {
                fontSize: '12px',
                fontWeight: 900,
                paddingLeft: '10px',
                fontFamily: 'SUITE-Regular',
                color: '#ffd954',
              },
              formatter: function (val) {
                return val
              }
            }
          }
        },
      },
      stroke: {
        width: 1,
        colors: ['#fff']
      },
      title: {
        text: '알람 발생 현황',
        style: {
          fontSize: '20px',
          fontFamily: 'SUITE-Regular',
          color: '#fff',
        }
      },
      xaxis: {
        categories: $columnCategories,
        labels: {
          style: {
            fontSize: '10px',
            fontFamily: 'SUITE-Regular',
            colors: '#fff',
          },
          formatter: function (val) {
            return val
            // return val + "K"
          }
        }
      },
      yaxis: {
        title: {
          text: undefined,
          style: {
            color: '#fff',
            fontSize: '10px',
            fontFamily: 'SUITE-Regular',
            fontWeight: 400,
          }
        },
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return val + "번 발생"
          }
        },
        style: {
          fontSize: '14px',
          fontFamily: 'SUITE-Regular',
        }
      },
      fill: {
        opacity: 1
      },
      legend: {
        position: 'top',
        horizontalAlign: 'left',
        offsetX: 40,
        fontSize: '16px',
        fontFamily: 'SUITE-Regular',
        labels: {
          colors : '#fff',
        },
        markers: {
          width: 10,
          height: 10,
          radius: '50%',
        },
      }
};

// 차트를 보여줄 엘리먼트, 차트 옵션
chart2 = new ApexCharts($columnChartDiv, columnOptions);

// 차트를 렌더링 한다.
chart2.render();

• series : 차트에 들어가는 실제적인 데이터를 담고 있고, series의 데이터는 모두 배열 형태로 들어가야한다.
• plotOptions : 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 실행하며, 변경 예정 데이터와 로직을 미리 넣을 수는 있지만, 화면에 다시 랜더되진 않는다.
• dataLabels : 그래프 범례로 위치와 표시여부를 설정할 수 있으며, 스타일도 수정 가능하다.
• stroke : 그래프 외곽선으로, 전체 화면의 모든 외곽선을 여기서 결정한다. curve로 둥글기나 각지기를 설정 할 수 있으며, 색상이나, 표시여부 또한 설정이 가능하다.
• xaxis : 그래프의 x축으로 정말 많은것을 설정할 수 있다. categories를 이용하여 x축의 내용을 따로 설정할 수 있으며 formatter를 이용하여 단위나 기호를 설정할 수 있다.
• yaxis : 그래프의 y축으로 x축과 거의 내용이 비슷하다. formatter를 이용하여 단위설정이 가능하며, 표시여부 또한 설정할 수 있다.
• fill : 그래프의 데이터를 채워넣는 색상이며, 여기서 색상을 정하면 모든 그래프가 일정하게 색이 들어간다. 배열로 채우며, 배열의 각 인덱스는 시리즈의 인덱스와 동일하다.
• tooltip : 차트에 마우스를 올려놓으면 나오는 팝업박스같은 데이터박스를 조절하는 요소이다.