📊 Javascript_ json 데이터배열 값 추출해서 Chart로 나타내기

템플릿에 Chart 자리 만들기

  <div>
    <canvas
      ref="MyChart"/>
  </div>
</template>

chart.js를 import

<script> 
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)
</script> 

axios를 import

axios : npm을 이용하여 다운로드 가능한 HTTP request 라이브러리

import axios from 'axios'

창이 실행되면 createchart가 실행

export default {
  mounted(){
    this.createChart()
  }

데이터의 배열값을 추출해보자

1. axios.get으로 데이터 가져오기

returnData로 선언

export default {
      axios.get('실제데이터')
       .then(res =>{
                  var returnData = res.data;
                  
                  const arrLabels =[];
                  const arrData=[];
                }
     

2. for문으로 차트용 데이터 배열을 만들어준다

returnData에서 key값을 가지고 오도록 함
Labels(arrLabels)에 추출한 데이터를 넣음
data(arrData)에 추출한 데이터를 넣음

export default {
                  for(var key in returnData) {
                    arrLabels.push(returnData[key]."배열에서 추출하고자 하는값(1)")
                    arrData.push(returnData[key]."배열에서 추출하고자 하는값(2)")
                    }
                    }

3. 차트를 만들어준다

                  new Chart(this.$refs.MyChart, {
                    type:'bar',
                    data:{
							//배열에서 추출하고자 하는값(1)
                            labels: arrLabels, 
                            datasets: [{
                            label: '# of Votes',
                            //배열에서 추출하고자 하는값(2)
                            data: arrData, 
                            borderWidth: 1
                            }]
                          },
                    options:{
                              scales: {
                                y: {
                                  beginAtZero: true
                                 }
                              }
                            }      
                                                   }