vue apexcharts 다루기

 

 Apexcharts를 다뤄볼까🤫 

 

 

작업 중 그래프를 많이 다뤄야하는 부분이 생겼다. 어떤 라이브러리를 사용할까 고민하던 중 Apexcharts를 사용하기로 결정했다. 별다른 이유는 없고 그냥 참고하던 사이트가 해당 라이브러리를 사용했었고 데모 디자인들이 좋은게 많았기 때문이다. 사이트에 들어가면 소스코드도 포함되어 있고 여러모로 편리하다! 또 vue 버전도 있어서 아주 만족!

 

 

⚙️ Apexcharts 사이트 ⚙️

 

 

---

 

 간단하게 그래프를 만들어보자 

 

말그래도 간단하게 그래프를 만들어보자. 데모페이지에는 소스코드가 존재하기 때문에 복사해서 붙여넣고 원하는대로 수정을 하면된다. 막대그래프를 예로 들면서 코드안에 어떤게 어떤 내용인지를 기록하려 한다. 은근히 커스텀하려면 많이 검색해봐야했었다. 아래 사진으로 첨부되어있는 참고할 그래프는 기등그래프의 기본형이다.

 

먼저 html에 해당 그래프를 선언해야한다. 원하는 곳에 아래의 코드를 넣는다. 형태를 보면 알겠지만 apexchart가 컴포넌트로 먼저 선언이 되어 있어야한다. 이 내용은 한단계 아래 코드에 나와있다. 들어간 내용을 하나씩 살펴보자.

<apexchart 
    type="bar"
    height="350"
    :options="chartOptions"
    :series="series">
</apexchart>

먼저 type은 그래프의 타입인데 데모사이트에 들어가보면 어떤 타입들이 있는지 확인할 수 있다. 복합적인 그래프를 사용할 경우. 여기에 선언하는것이 아닌 아래에 존재하는 데이터 series에 넣어야한다. height는 그래프의 높이다. 아래의 데이터에서도 사용이 가능하지만, 여기서 직접적으로 선언해주는게 우선순위가 더 높은것 같았다. 나머지 두개인 options와 series는 바인딩으로 불러오는 데이터인데 아래 데이터에 입력된 내용을 불러와 그래프로 사용한다.

 

그래프와 연관되어 있는 모든 데이터를 vue의 data 부분에 들어간다. 그냥 넣어도되고, 객체로 선언해서 넣어도 된다. 개인적으로는 객체로 묶어서 사용하는걸 추천한다. 데이터안에 직접적으로 선언하면 다양한 데이터를 관리하기엔 복잡하기 때문이다.

// 데이터에 직접적으로 선언
new Vue({
        el: '#app',
        components: {
          apexchart: VueApexCharts,
        },
        data: {
          series: [{
            name: 'Net Profit',
            data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
          }
       }
     })

// 객체로 선언
new Vue({
        el: '#app',
        components: {
          apexchart: VueApexCharts,
        },
        data: {
        inChitChart: {
          series: [{
            name: 'Net Profit',
            data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
          }]
         }
       }
     })

데이터에서 가장 먼저 보이는 값은 series인데 차트에 들어가는 실제적인 데이터를 담고 있는 곳이다. series의 데이터는 모두 배열 형태로 들어가야하며 형태가 맞지 않을 경우, 차트구현이 되지 않는다. 각 데이터에 이름을 작성해주게 되면 그래프에 마우스를 올려놓았을때, 해당 데이터의 이름이 뜨게 된다. 필요하다면 넣고, 아니라면 빼도 무관하다.

chartOptions: {
            chart: {
              type: 'bar',
              height: 350
            },
            plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
              },
            },
            dataLabels: {
              enabled: false
            },
            stroke: {
              show: true,
              width: 2,
              colors: ['transparent']
            },
            xaxis: {
              categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
            },
            yaxis: {
              title: {
                text: '$ (thousands)'
              }
            },
            fill: {
              opacity: 1
            },
            tooltip: {
              y: {
                formatter: function (val) {
                  return "$ " + val + " thousands"
                }
              }
            }
          },

이제 options에 들어갈 데이터들이 남았는데 이건 변수명같은거라 아무렇게나 선언해도 된다. 나는 데모에 있는 그대로 사용했다. 적절한 명칭인것 같아서! 맨 처음 선언해야하는 chart에는 차트 정보가 들어가는데 html에 선언했던 내용들이 기본으로 들어간다. 저기에 선언하지 않고 여기에만 선언해도 무관하다. 위 옵션에 적혀있는 내용들을 하나씩 이해해보자.

 

• plotOptions : 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 실행된다. 돔이 재랜더링되고 패치되기 직전의 시점이다. 인스턴스에 정의한 속성들이 화면에 치환되고, 치환된 값은 뷰의 반응성 제공을 위해 $watch속성으로 감시한다(데이터관찰). 변경예정인 새로운 데이터에 접근할 수 있으며, 변경 예정 데이터와 로직을 미리 넣을 수는 있지만, 화면에 다시 랜더되진 않는다.
• dataLabels : 그래프 범례로 위치와 표시여부를 설정할 수 있으며, 스타일도 수정 가능하다.
• stroke : 그래프 외곽선으로, 전체 화면의 모든 외곽선을 여기서 결정한다. curve로 둥글기나 각지기를 설정 할 수 있으며, 색상이나, 표시여부 또한 설정이 가능하다.
• xaxis : 그래프의 x축으로 정말 많은것을 설정할 수 있다. categories를 이용하여 x축의 내용을 따로 설정할 수 있으며 formatter를 이용하여 단위나 기호를 설정할 수 있다. 정말 많은 내용을 여기서 설정 할 수 있으므로 많이 뒤져보는걸 추천한다.
• yaxis : 그래프의 y축으로 x축과 거의 내용이 흡사하다. formatter를 이용하여 단위설정이 가능하며, 표시여부 또한 설정할 수 있다.
• fill : 그래프의 데이터를 채워넣는 색상이며, 여기서 색상을 정하면 모든 그래프가 일정하게 색이 들어간다. 배열로 채우며, 배열의 각 인덱스는 시리즈의 인덱스와 동일하다.
• tooltip : 차트에 마우스를 올려놓으면 나오는 팝업박스같은 데이터박스를 조절하는 요소다.

 

위 내용들을 이해했다면 실제로 그래프를 사용하는데 문제가 없을 것이다! 가장 많이 사용하는 내용이며, 다루기 어려운 요소들이기도 하다. 정말 어렵다 라는 느낌이 든다면 공식홈페이지를 들어가서 확인하는것도 좋으며, 개발자가 git을 굉장히 활발하게 이용하고 있기 때문에 git을 통해 문의를 하는것도 좋은방법이다.