vue로 수평 막대 그래프 그리기

이번 프로젝트에서 나는 수평 막대그래프를 담당했다.

이 막대 그래프 내용을 정리해보겠다.

 

vue 버전은 3.2.13이다.

나는 뷰를 처음 써보는 사람이다.

틀린 부분이 있을지도 모른다는 점 명심해야 한다.

 

나는 vue-chart-3을 사용했다.

 

내가 원했던 그래프는 아래와 같이

1. 수평 막대그래프이고

2. 중앙을 기준으로 왼쪽 값이 5보다 크다면 왼쪽으로 그려지고 아니라면 오른쪽으로 그래프가 그려져야 한다.

 

prop로 받아온 값이 5보다 크면 -1을 곱해 음수로 만들어 왼쪽으로 그려지도록 했다. 반대로 양수라면 오른쪽으로 그려진다.

 

위에 그래프 관련 코드는 아래와 같다.

<template>
  <BarChart ref="barRef" :chartData="testData" :options="options" />
</template>

<script>
import { defineComponent, ref } from "vue";
import { BarChart } from "vue-chart-3";
import { Chart, registerables } from "chart.js";
Chart.register(...registerables);
export default defineComponent({
  props: {
    users: Object,
    companies: Object,
  },
  name: "HorizontalBar",
  components: { BarChart },
  setup(props) {
    const barRef = ref();
    const options = ref({
      responsive: true,
      maintainerAspectRatio: false,
      indexAxis: "y", // 가로형 막대로 
      scales: { // x축과 y축에 대한 설정
        y: {
          ticks: { // 그래프의 눈금 안 보이도록
            display: false,
          },
          grid: { // y축을 기준으로 그려지는 선(세로선)을 안 보이도록
            borderColor: "white",
            display: false,
          },
        },
        x: {
          min: -10,
          max: 10,
          ticks: {
            display: false,
          },
          grid: {
            borderColor: "white",
            display: false,
          },
        },
      },
      plugins: { // 그래프의 레이블이 안 보이도록
        legend: {
          display: false,
        },
      },
    });
    const getUser = (users) => {
      let usersData = Object.values(users);
      usersData = usersData.map((user) => {
        if (user > 5) {
          return user * -1;
        } else {
          return user;
        }
      });
      return usersData;
    };
    const getCompany = (users, companies) => {
      let companiesData = [0, 0, 0, 0, 0];
      let usersData = Object.values(users);
      for (let i = 0; i < 5; i++) {
        if (usersData[i] > 5) {
          companiesData[i] = companies[i] * -1;
        } else {
          companiesData[i] = companies[i];
        }
      }
      return companiesData;
    };
    const testData = {
      labels: ["", "", "", "", ""], // 각각의 label
      datasets: [ // 그래프의 색 등을 설정
        {
          label: "one",
          data: getUser(props.users),
          barThickness: 6,
          backgroundColor: "#6E3CF9",
        },
        {
          label: "two",
          data: getCompany(props.users, props.companies),
          barThickness: 6,
          backgroundColor: "#FFC24A",
        },
      ],
    };
    return { testData, options, barRef };
  },
});

 

 

https://www.chartjs.org/docs/latest/charts/bar.html