차트만들기!!

Vue 쉽지만 않다.. 여기에 chart.js를 이용한 차트 만들기!! 어려웠다!
처음사용한 Vue와 chartjs의 결과물을 만드는 과정을 기록해보겠다.

chartjs

먼저 Vue3를 이용해서 chartjs를 사용하기 위해선 vue-chart-3를 추가로 설치해야한다.

먼저 vue-chart-3의 ref 코드를 가저와서 수정해가며 차트를 만들었다.
vue-chart-3 페이지의 Usage 메뉴의 Accessing Canvas Ref and chartInstance를 선택하면 다음의 ref 코드가 나온다.

<template>
  <div>
    <DoughnutChart ref="doughnutRef" :chartData="testData" :options="options" />
    <button @click="shuffleData">Shuffle</button>
  </div>
</template>

<script>
import { shuffle } from 'lodash';
import { computed, defineComponent, ref } from 'vue';
import { DoughnutChart } from 'vue-chart-3'; // 그리고자하는 차트를 import하면 된다 바차트(막대그래프)는 'BarChart'로 불러온다.

export default defineComponent({
  name: 'Home',
  components: { DoughnutChart }, // 컴포넌트 객체에 불러온 차트를 추가한다.
  setup() {
    const data = ref([30, 40, 60, 70, 5]); //초기 값
    const doughnutRef = ref();

    const options = ref({ // 옵션은 해당 객체에 집어넣으면 적용된다. 옵션이 진짜많다.
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Doughnut Chart',
        },
      },
    });

    const testData = computed(() => ({
      labels: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'],
      datasets: [
        {
          data: data.value, // 데이터를 만드는 값인데, 직접변경해줄수 있다.
          backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'], 
          // 차트의 색을 나타내는데 지정된색이 순환하면서 나타난다. 각가의 색을 지정하려면 인자수 만큼 색을 지정하면 된다.
        },
      ],
    }));

    function shuffleData() { // 값을 랜덤으로 섞는함순데 필요없다!
      data.value = shuffle(data.value);
    }

    return { testData, shuffleData, doughnutRef, options };
  },
});
</script>

도넛 그래프가 나온는데 옵션을 수정해가며 목표한 그래프로 만들어갔다.
그래프 구현옵션은 chart.js 페이지에 잘나와있다. 바 차트를 만들기위해 바차트 옵션과, 축옵션을 참고하여 그래프를 디자인해갔다.
문제는 그래프 구현이 아니었다..

공식문서 보기

chart.js 공식문서의 일부분이다(vue-chart-3 아님!!).

네임스페이스:options.scales[scaleId].ticks
객체의 키에 어떤값을 넣으면 어떤효과가 나타나는지 친절하게 설명되어있다.
설명이 이해가안되면 해당 키에 값을 넣어보면서 비교해보면된다.

축메뉴에서 축

옵션

 setup() {
    const data = ref([0, 0]);
    const doughnutRef = ref();
    const options = ref({
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
      },
      indexAxis: 'y', // 수직막대를 수평막대로 봐꾸는옵션
      scales: {
        y: {
          display: false,
          grid: {
            display: false,
          },
        },
        x: {
          display: false,
          grid: {
            display: false,
          },
          ticks: {
            display: true,
            stepSize: 2,
          },
          min: -10,
          max: 10,
        },
      },
    });

    const testData = computed(() => ({
      labels: ['적극적인', '자신있는', '책임있는', '개인주의', '수평적인'], // 라벨은 안보이도록 옵션에 지정했다.
      datasets: [
        {
          data: data.value,
          backgroundColor: ['#6e3cf9', '#ffd966'],
          barThickness: 5,
          bar: { backgroundColor: 'red' },
        },
      ],
    }));
   

두개의 값을 가진 차트 구현?

한 항복에 두개의 그래프를 그리고, 간격등을 조절하려고하니 옵션을 어떻게 넣어야할지 방법을 못찾았다.
그래서 다른 방법을 생각한건 두개의 그래프를 같는 그래프를 다섯개를 열하는 방법이었다.
아래그림 처럼 먼저 결과가 나오는영역에 플랙스 박스를 만들어 항목과 그래프를 배치한다.

<div v-for="(score, idx) in user" :key="idx" class="graph-container"> //v-for 속성을 통해 반복해준다.
      ...
        <BarChart
          :userScore="user[idx]"
          :companyScore="getCompanyScore(idx)"
          :selectCompany="selectCompany"
          :currentTab="currentTab"
        />
      ...
</div>

Vue 사용법을 간단히 배우고 chart.js 공식문서 보면서 그래프를 완성하는데 10시간이 넘게 몰입했다. 시간이 너무 빠르다! 그래도 완성했다.🤩 다른 그래프를 그린다면 이번엔 자신있다.