어떻게 해야하는지좀 봐주시면 감사하겠습니다

app.vue
<template>
  <div>
    <h1>Chart.js</h1>
    <bar-chart v-on:refresh:chart="refreshChart" v-bind:propsdata="chartDataSet"></bar-chart>
    <line-chart></line-chart>
  </div>
</template>

<script>
import BarChart from './components/BarChart.vue';
import LineChart from './components/LineChart.vue';

export default {
  // 컴포넌트 속성 && 인스턴스 옵션
  components: {
    BarChart,
    LineChart,
  },
  data() {
    return {
      chartDataSet: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }],
      }
    },
    methods: {
      refreshChart() {
        this.chartDataSet = [10, 20];
      }
    },
  created() {
    // axios.get('charts/line/1')
    // .then(response => this.chartDataSet = response.data)
    // .catch(error => console.log(error));
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
 
// 
 
BarChart.vue
 
<template>
<canvas ref="barChart" id="barChart" width="400" height="400"></canvas>
</template>

<script>
export default {
    props: ['propsdata'],
    mounted() {
    var myChart = new this.$_Chart(this.$refs.barChart, {        
    type: 'bar',
    data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: this.propsdata
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        onClick: function() {
            this.$emit('refresh:chart');
                }
            }
        });
        console.log(myChart)
    }
}
 
// linechart.vue
 
<template>
  <canvas ref="lineChart" id="lineChart"></canvas>
</template>

<script>
export default {
  mounted() {
  var Chart = new this.$_Chart(this.$refs.lineChart.getContext('2d'), {
    type: 'line',
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
    label: "My First dataset",
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
        }]
      },
      options: {}
    });
  }
}
강의보면서 따라했는데 Chart.js 이거만나오네요
 
어디서 틀렸고 어떻게 해결을 해야할까요 ??
 
ㅠㅠ
 
인프런 커뮤니티 질문&답변
