컴포넌트에 데이터 넣기 - chart.js

부포에서 자식으로 데이터를 전송하기 위해서는 props를 사용한다.

아래와 같이 차트 컴포넌트를 생성해준다. props를 통하여 받아올 데이터에 대해 설정해준다.

<script>
import {Pie} from 'vue-chartjs'
export default {
  extends: Pie,
  props: {
    datacollection: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.datacollection)
  }
}
</script>

 

 

컴포넌트를 사용할 화면단에서 데이터를 생성해준다.

  data () {
    return {
      sampleData: {
        datasets: [{
          data: [10, 20, 30, 20, 10],
          backgroundColor: //색상
        }],
        labels: ['라벨1', '라벨2', '라벨3', '라벨4', '라벨5']
      }
    }
  }
}

 

하위 컴포넌트에 props를 통해 데이터를 전달해준다.

 <PieChart class="auto-width auto-height" :datacollection="sampleData"/>