apexchart.js

Analytics 사이트 작업 중  데이터 시각화를 위한 차트 작업이 필요했다.

공식 사이트 :  https://apexcharts.com/

ApexCharts.js - Open Source JavaScript Charts for your website

 

그래서 좋은 게 없을까 검색중  apexchart 라는 차트 라이브러리를 적용하기로 하였다.

공식문서를 보면 기본적인 막대/ 선 말고도 다양한 종료의 차트 스타일이 있어서 추후 다른 작업에도 활용이 있어보여 깊게 공부해 보고 싶어졌다.

우선 시작은 간단한 예제로 시작해보기로 했다.  이후로는 내부 기능에 대해서 상세히 포스팅할 예정이다.

출처 이미지 :  https://apexcharts.com/javascript-chart-demos/line-charts/basic/

예시 이미지 아래 코드와는 무관

 

var options = {
          series: [{
            name: "CUNT",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]   // 차트 데이터
        }],
          chart: {
          height: 500,
          type: 'line',
          zoom: {
            enabled: false  // 옵션 툴바에 차트에 대한  zoom in / zoom out 할 수 있는 옵션 기능이 있다. 
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight' //  차트 이미지 
        },
        title: {
          text: 'Product Trends by Month',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // 차트 색상
            opacity: 0.5
          },
        },
        xaxis: {
          title : ['A', 'B', 'C', 'D', 'E', 'F'],  //  X축 항목
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);  // 차트가 그려지는 <div></div>
        chart.render(); // 차트 그리기