Vue.js Chart Library (feat.ApexChart)

강정우·2023년 6월 8일
2

vue.js

목록 보기
63/72
post-thumbnail
post-custom-banner

Vue.js 로 사용 가능한 chart library 소개

1. Chart.js

  • Chart.js는 HTML5 기반의 유연하고 강력한 차트 라이브러리이다.
    Vue.js와 함께 사용하기 위해 Vue-Chart 라이브러리를 사용하면 간단한 API와 컴포넌트 기반 인터페이스를 제공하여 차트를 쉽게 구성할 수 있다.
pnpm i vue-chart-3

2. ApexCharts

  • ApexCharts는 SVG 기반의 멋진 차트를 만들기 위한 라이브러리이다.
    Vue.js와 통합된 Vue-ApexCharts를 사용하면 레이더 차트, 막대 차트, 선 그래프 등 다양한 차트 유형을 생성할 수 있다.
pnpm i vue3-apexcharts

3. ECharts

  • ECharts는 "Apache 소프트웨어" 재단에서 개발된 강력한 JavaScript 차트 라이브러리이다.
    Vue.js와 함께 사용하기 위한 Vue-ECharts를 사용하면 다양한 유형의 인터랙티브 차트를 만들 수 있다.
pnpm i vue3-echarts

4. Chartkick

  • Chartkick은 Google Charts와 Chart.js와 같은 다른 JavaScript 차트 라이브러리를 Vue.js와 통합하기 위한 래퍼 라이브러리이다.
    Vue.js 애플리케이션에서 데이터를 시각화하는 데 유용하다.

5. D3

  • D3.js는 데이터 시각화를 위한 강력한 라이브러리이다.
    Vue.js와 함께 사용하기 위해 Vue D3를 사용하면 D3의 기능을 쉽게 활용할 수 있다.
    다만 굉장히 rought하여 숙련도가 조금 필요하다.

최종 선택은 ApexCharts

  • 우선 내가 ApexCharts를 선정한대에는 4가지 이유가 있다.

이유 1. 언어적 이유

  • 우선 TypeScript가 지원이 되야한다.
    이번 프로젝트에서는 프론트를 2명이서 함께 개발하다보니 협업에 조금 더 유리한 언어를 사용해야했다. 그래서 Typescript를 골랐고 또한 Ts를 지원하는 library여야했다.

  • 물론 TypeScript와 더욱 잘맞는 라이브러리는 따로 있다. Highcharts, Plotly.js, amCharts, etc..

이유 2. vue3-library

  • 이번 프로젝트에서는 syntax구조가 react와 굉장히 유사하게 바뀐 Composition API를 사용하기 위해 반드시 Vue-3를 사용할 필요가 있었다.
    그리고 이 Vue3를 함께 지원하는 chart library가 필요했다. 앞서 소개한 5개의 라이브러리중 레퍼런스가 많고 공식문서가 잘 되어있는 Chart.js, ApexChart 2개로 좁혀졌다.

이유 3. 굉장히 친절한 공식문서

  • ApexCharts는 사용자 지정 레이블, 툴팁, 축 레이블 등을 쉽게 설정할 수 있다.
  • 또한 공식문서에 각 차트별로 예제 코드가 굉장히 잘 되어있는 것을 확인할 수 있었다.

이유 4. 한국어 지원

  • 아무래도 지자체에 공급하다보니 반드시 한국어가 깨지지 않고 들어가야했다. 그래서 다국어 지원을 제공하고 한글 텍스트를 제대로 표시하는 라이브러리가 필요했다.
    그래서 ApexCharts와 ECharts를 뽑을 수 있었다.

  • 참고로 Vue ECharts는 다국어 지원에 초점을 맞추고 있으며, 사용자 정의 텍스트 및 레이블에 대한 로컬라이제이션을 지원한다고 한다.

Vue3에서 ApexChart 시작하기

1. install

  • 물론 설치부터 해야한다. 현재 (23/06/08 T19:36) 을 기준으로 1.4.1 버전이다.
pnpm i vue3-apexcharts

2. import

  • 참고로 이 라브러리는 main.ts에 import하여 app.use를 하지 않아도 된다. => 왜냐하면 vue3-apexcharts 라이브러리가 내부적으로 필요한 등록 작업을 처리하기 때문이다.

  • 그래서 사용하고 싶은 해당 컴포넌트에서 import 해와서 바로 작성하면 된다. 나는 차트별로 컴포넌트화 하여 사용하고 싶어서 따로 분리하여 작성하였다.
    우선 아래 예제는 차트(radial) 컴포넌트이다.

<template>
  <div>
    <VueApexCharts width="500" type="radialBar" :options="chartOptions" :series="props.data!" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VueApexCharts from 'vue3-apexcharts'

const props = defineProps({
  data: Array<Number>
})

const chartOptions = ref({
  chart: {
    height: 350,
    type: 'radialBar'
  },
  plotOptions: {
    radialBar: {
      hollow: {
        size: '70%'
      }
    }
  },
  labels: ['Cricket']
})
</script>
  • 참고로 부모 컴포넌트로부터 넘겨받는 변수는 공식 문서를 보고 어떤 형태로 데이터를 넘겨주는가를 참고하여 작성하면 된다.

  • 예를 들어 현재 내가 만들고자 하는 곳에는 series로 값이 배열 형태이고 내부 값은 Number인 것을 확인할 수 있다.
    그래서 defineProps을 위와같이 작성하면 된다.

  • 위 VueApexCharts 컴포넌트에서 type에 따라 차트 모양이 바뀐다. options는 말 그대로 해당 차트에 옵션을 부여하고 series는 해당 차트의 값을 넣어주면된다.

3. 차트 컴포넌트 사용하기

<template>
  <main>
    <BarChart :data="[70]"/>
  </main>
</template>

<script setup lang="ts">
import BarChart from "@/components/charts/BarChart.vue";
</script>
  • 사용은 매우 간단하다 그냥 해당 위치에 있는 차트를 import하여 사용하면 된다. 하지만 아이러니하게도 BarChart에서 radial 차트도 테스트 해본다고 하다가 이름은 그대로라서 추후 다시 BarChart로 바꿔줘야겠다. 😅
profile
智(지)! 德(덕)! 體(체)!
post-custom-banner

0개의 댓글