Vue3-Charts를 이용하여 매우 간단한 차트 만들기

Heina·2023년 7월 18일

Vue3-Charts란?

우리에겐 멋진 그래프를 만들수 있는 chart.js가 있다.
하지만 내 데이터가 매우 간단하고, 특별한 커스텀이 필요없다하는 경우에 사용할 수 있는 패키지를 공유하겠삼
이름하야 Vue3-charts chartJs와는 다르니까 혼동말기
사용법도 간단하지만, 내용도 매우 간단하여 커스텀이 거의 불가능하니 참고!!!
(사실 사용법을 매우 자세하게 읽어보지 않아서 그럴수도 있다..내가 필요한 기능만 사용했기 때문에)

Vue3-charts 공식 문서 바로가기

Vu3-Charts 시작하기

Vu3-Charts 패키지 설치

# usign npm
npm install vue3-charts --save

# usign yarn
yarn add vue3-charts

명령어에서도, 패키지 이름에서도 알 수 있듯 Vue version > 3.x 이어야 한다!
Vue3-charts 패키지 설치 안내 바로가기

사용할 수 있는 차트의 종류는 Line, Bar, Area Pie 정도가 있다.

사용할 차트 종류 import 하여 붙여넣기

나는 Bar차트와 부가적인 기능(tooltip, grid) 등을 사용할 예정이다.
해당 내용들을 모두 import 해줘야 사용할 수 있다.

import { Chart, Grid, Bar, Tooltip } from 'vue3-charts';

왜 이렇게 흐림처리되는지는 모르겠다..마치 사용하지 않는 패키지처럼..;;

그리고 이제 본격적으로 사용을 해보기전에, 공식 사이트에 있는 coade를 긁어 왔다.
이렇게 집어 넣고 내가 사용할 데이터 들만 변경하여 넣는것이 제일 간단하긴 하다.

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">

    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
      <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
      <Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#48cae4' }" />
      <Marker :value="1000" label="Avg." color="#e76f51" strokeWidth="2" strokeDasharray="6 6" />
    </template>

    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          pl: { color: '#90e0ef' },
          avg: { color: '#0096c7' },
          inc: { color: '#48cae4' }
        }"
      />
    </template>

  </Chart>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'
import { plByMonth } from '@/data'

export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })

    const axis = ref({
      primary: {
        type: 'band'
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })

    return { data, direction, margin, axis }
  }
})
</script>

그러나 나는 Script setup을 사용하는걸..?

template 사용법은 비슷하지만, 나는 차트들의 옵션을 한번에 관리하고 싶어서 옵션들을 한곳에 담았다.

const chartDatas = ref({
  size: { width: 740, height: 340 }, // 차트 사이즈 
  graphData: [],
  margin: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  }, // 차트들에게 마진값이 필요할 때
  direction: 'horizontal',
  axis: {
    primary: {
      type: 'band',
    },
    secondary: {
      domain: ['dataMin', 'dataMax+10'], //데이터 최소값, 최대값의 범위
      type: 'linear',
      ticks: 5, // 표시되고 싶은 가로선의 갯수
    },
  },
  responsive: 'true',
});

해당 옵션들을 살펴본다면 크게 어려운건 없을것 같다.
chartDatas.graphData에는 API로 부터 받아오는 데이터들을 넣을 예정이다.

<template>
  <Chart
    class="chart"
    :size="chartDatas.size"
    :margin="chartDatas.margin"
    :data="chartDatas.graphData"
    :axis="chartDatas.axis"
    :direction="chartDatas.direction"
    :responsive="chartDatas.responsive"
   >
    <template #layers>
      <Grid
        :hideY="true"
        :center="false"
      />
      <Bar
        :dataKeys="['date', 'uCount']"
        :barStyle="{ fill: '#eb6483' }"
      />
      <Bar
        :dataKeys="['date', 'pCount']"
        :barStyle="{ fill: '#42afc3' }"
      />
    </template>
    <template #widgets>
      <Tooltip
        class="chart--tooltip"
        color="#606060"
        :config="{
          date: { color: '#606060' },
          uCount: { label: `u회원가입`, color: '#606060' },
          pCount: { label: `p회원가입`, color: '#606060' },
          }"
          :style="{ fontSize: '14px' }"
       />
    </template>
  </Chart>
</template>

표시된 <Bar/>의 dataKeys에는 key, value 값이라고 생각하면 될것같다.

그리하야 만들어진 차트

추가로 데이터의 범례를 만들고 싶었는데, 사용법을 찾지 못해 직접 만들어 넣었다..

<ul class="item--legend">
  <li>
    <div class="square left"></div>
    <p>u</p>
  </li>
  <li>
    <div class="square right"></div>
    <p>p</p>
  </li>
</ul>