어떻게 해야하는지좀 봐주시면 감사하겠습니다
292
뷰린이탈출대작전
작성한 질문수 32
1
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 이거만나오네요
어디서 틀렸고 어떻게 해결을 해야할까요 ??
ㅠㅠ
답변 2
0
안녕하세요, 문제 해결하셨나요?
저는 BarChart.vue 에서 아래처럼 고치니 잘 나왔습니다.
datasets: this.propsdata[0].datasets,
깃 권한 요청 드립니다
0
54
1
깃 권한 신청
0
53
1
깃 권한 요청드립니다.
0
112
1
깃허브 권한 요청 드립니다
0
145
1
깃허브 권한 요청 드립니다
0
165
1
깃허브 권한 요청 드립니다
0
169
1
깃허브 권한 요청 드립니다.
0
154
1
안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.
0
211
1
ide 타입추론 기능 사용할 수 없을까요??
0
215
1
컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??
0
232
1
Vue3로 진행중입니다
1
340
1
Vue router-link 사용시 같은 url이면
1
509
1
vue3 에러 메세지...
1
676
2
id ="app" 중복
0
273
2
use undefined 에러가 나옵니다.
1
323
2
깃허브 권한 요청드립니다.
1
361
2
권한요청드립니다.
1
302
2
Vue3에서 구글 애드센스 탑재하기
1
438
2
코드가 정상 작동 되는건지 ...
1
305
1
강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?
1
246
1
vuex 적용시 질문
1
292
2
라우터 버전이 안맞는데 어떤걸 써야하나요
1
385
2
UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..
1
456
2
권한요청 드립니다!
1
275
2