[Vue-todo-list] #4 chart.js로 todo data 시각화하기 (2) - Pie Chart

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #3 chart.js로 todo data 시각화하기 (1) - Line Chart

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #2 카테고리가 있는 Todo List 만들기

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링

 

---

Pie chart는 이전 포스팅에서 다뤘던 Line chart에 비해 엄청 엄청 쉬운 편에 속해 크게 고민하지 않고 import 해준 뒤 바로 썼다.

 

import { Vue } from "vue-property-decorator";
import { Pie } from "vue-chartjs";

export default Vue.extend({
  extends: Pie,
  data: () => ({
    msg: "🎨 My Pie Stats",
    stats: [],
    chartdata: {
      labels: [],
      datasets: [
        {
          label: [],
          data: [],
          backgroundColor: []
        }
      ]
    },
    options: {
      hoverBorderWidth: 20
    }
  }),
  mounted() {
    this.renderChart(this.chartdata, this.options);
  },
  created() {
    this.stats = this.$store.state.categories;
    const obj = this.chartdata.datasets[0];

    for (const stat of this.stats) {
      this.chartdata.labels.push(stat.title);
      obj.label.push(stat.title);
      obj.data.push(stat.value);
      obj.backgroundColor.push(stat.backgroundColor);
    }
  }
});

포맷을 보면 chart.js 공식 documnet에서 복사해온 구조와 거의 동일하고, datasets 내부 데이터만 reactive 하게 연동해주기만 했다.

renderChart() 메서드가 mounted에서 실행되기 전 필요한 데이터들은 created() 훅에서 생성되도록 한다.

 

필요한 데이터는 category에 대한 부분이었으니 store에 저장된 categories를 this.$store.state.categories로 접근한다. todo page에서 카테고리에 대한 컬러를 바꿀 수 있게 했으므로, 변화가 생긴다면 바로 chart 쪽에서도 반영된다.

 

💌 PieChart.js 컴포넌트의 전체 소스 코드는 이곳에서