Vue.js vue3-chartjs를 이용한 챠트그리기

vue3-charjs를 사용하면 챠트를 쉽게 그릴 수 있다. 

github 링크는 아래 첨부 함. 

 

https://github.com/J-T-McC/vue3-chartjs

GitHub - J-T-McC/vue3-chartjs: Vue3 wrapper for ChartJS

vue3-chartjs를 설치 

npm install chart.js @j-t-mcc/vue3-chartjs

 

script에 import 추가 

import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";

 

챠트추가

component 에 Vue3CharJs를 추가 하고, 

setup() 함수에 추가 할 챠트를 정의 한다. 

export default {
  mixins: [],
  data() {
   ...
  },
  components: {
   ...
    Vue3ChartJs,
  },
  setup () {
    const doughnutChart = {
      id: 'doughnut',
      type: 'doughnut',
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: [
              '#41B883',
              '#E46651',
              '#00D8FF',
              '#DD1B16'
            ],
            data: [40, 20, 80, 10]
          }
        ]
      }
    }

    const beforeRenderLogic = (event) => {
    }

    return {
      doughnutChart,
      beforeRenderLogic
    }
  },
};

 

결과