[Vue.js] Chart.js Bar Chart 그리기

vue-chartjs와 chart.js를 이용하여 막대차트를 그려보겠습니다.

(vue 2 버전, chart.js: 3.5.0, vue-chartjs: 3.5.1 버전 사용)

 

---

0. 다른 차트 참고

- [Vue.js] Chart.js Doughnut Chart 그리기

- [Vue.js] Chart.js Line Chart 그리기

 

 

1. vue-chartjs, chart.js 다운로드

npm install chart.js
npm install vue-chartjs chart.js --save

 

 

2. 막대차트 개발 문서(3.5.0 version)

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

Bar Chart | Chart.js

 

 

3. 막대차트 구현

 

3-1. global.js

import { Chart, registerables } from "chart.js";

Chart.register(...registerables);

- 여러 차트와 공유할 수 있는 파일을 global.js로 만들었습니다.

 

 

3-2. barChart.js

import "@/utils/charts/global";
import { Bar } from "~/external/vue-chartjs-3.5.1/src/index";

export default {
  extends: Bar,
  props: ["chartData", "options"],
  watch: {
    chartData: {
      handler() {
        this.renderChart(this.chartData, this.options);
      },
      deep: true
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};

- 저는 vue-chartjs를 외부 파일로 넣어서 사용했습니다.

- vue 파일에서 설정한 데이터와 옵션을 가지고 차트를 그리는 코드입니다.

 

- watch에 chartData를 넣어서 차트 데이터 변경 시 새로고침 되도록 하였습니다.

 

 

3-3. BarChart.vue

<template>
  <div class="bar-box">
    <div class="bar">
      <bar-chart 
          ref="barChart" 
          :chartData="chart.data" 
          :options="chart.options" 
          id="chart"
      ></bar-chart>
    </div>
  </div>
</template>

import BarChart from "@/utils/charts/barChart.js";


export default {
  name: "bar-chart",
  components: { BarChart },
  data() {
    return {
      chart: {
        data: {
          labels: [1, 2, 3, 4, 5, 6, 7, 8],
          datasets: [
            {
              backgroundColor: "pink",
              pointBackgroundColor: "white",
              borderWidth: 1,
              borderColor: "hotpink",
              fill: true,
              tension: 0.1,
              barPercentage: 0.55,
              data: [1200, 2000, 2500, 2200, 4000, 3000, 5000, 2000]
            }
          ]
        },
        options: {
          plugins: {
            legend: {
              display: false
            },
            datalabels: {
              display: false
            },
            tooltip: {
              boxWidth: 15
            }
          },
          scales: {
            x: {
              grid: {
                display: false
              },
              ticks: {
                padding: 3
              }
            },
            y: {
              grid: {
                drawBorder: false,
                color: "black",
                lineWidth: 1
              },
              min: 0,
              max: 5000,
              ticks: {
                stepSize: 1000,
                padding: 10,
                callback: (val, index) => {
                  return val !== 0 
                  ? val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") 
                  : "";
                }
              }
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          animation: {
            duration: 5000
          }
        }
      }
    };
  }

- 위 코드의 옵션들에 대한 설명은 2번 링크를 이용하면 볼 수 있습니다.

- 데이터는 왼쪽에서 오른쪽 순서로 보여집니다.

 

- val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") 는 숫자 단위 콤마를 넣기 위한 식입니다.

 

 

4. 결과 화면

 

막대차트 예제

 

 

 

이상으로 뷰에서 Chart.js를 사용하여 막대차트를 그려보았습니다.

---