@DemonLaplas

Vue как обновить Круговую диаграмму через инпут?

В первые пользуюсь 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
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Документацию пробовали открывать? Там есть ответ на ваш вопрос.

Делаете вычисляемое свойство, которое будет содержат labels и datasets, передаёте его значение в компонент графика под именем chartData. В самом компоненте этот chartData передаёте в renderChart. Например.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы