-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
어떻게 해야하는지좀 봐주시면 감사하겠습니다
22.01.14 07:23 작성 조회수 142
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 이거만나오네요
어디서 틀렸고 어떻게 해결을 해야할까요 ??
ㅠㅠ
답변을 작성해보세요.
0
brilliant1225
2022.03.19
안녕하세요, 문제 해결하셨나요?
저는 BarChart.vue 에서 아래처럼 고치니 잘 나왔습니다.
datasets: this.propsdata[0].datasets,
0
답변 2