В первые пользуюсь Chart и не понимаю как заставить обновляться диаграмму в зависимости от данных.
Вот код самой диаграммы
import { Pie } from 'vue-chartjs'
export default {
extends: Pie,
mounted () {
this.renderChart({
labels: ['USD', 'ETH', 'BTC'],
datasets: [
{
backgroundColor: [
'#FFA500',
'#6495ED',
'#B22222',
],
data: [1,2,3]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
}
А вот и немного сокращенные но код страницы vue
<template>
<div class="buttom__prof">
<input v-model.number="myMoney" />
<div class="div__but">
<button class="but" @click="addMoney">Add</button>
<button class="but" @click="takeMoney" >Take</button>
</div>
</div>
<div class="info__div">
<div class="state__line">
<h1 style="text-align:center;">USD: {{this.USD}}</h1>
</div>
<div class="char__div">
<pie-example></pie-example>
</div>
</div>
<div class="value__div">
<div class="value__money">USD: {{USD}}</div>
<div class="value__money">ETH: {{ETH.toFixed(4)}}</div>
<div class="value__money">BTC: {{BTC.toFixed(5)}}</div>
</div>
</template>
import PieExample from '../components/PieExample'
export default {
components: {
PieExample,
},
data () {
return {
myMoney: null,
USD: 0,
ETH:0,
BTC:0
}
},
methods: {
addMoney() {
this.USD += this.myMoney
this.ETH += this.myMoney * 0.0003
this.BTC += this.myMoney * 0.000017
},
takeMoney() {
this.USD -= this.myMoney
this.ETH -= this.myMoney * 0.0003
this.BTC -= this.myMoney * 0.000017
},
}
}
Я не очень понимаю как выполнить обращение к datasets так чтобы по нажатию на take или add у меня обновлялась диаграмма и выдавала значения USD, ETH, BTC
