CODEWITHSUNDEEP
javascriptvue.jsvuejs2chart.js
Exterminator
Exterminator

Reputation: 23

Graph is not displayed

The graph is displayed and everything is fine, but I don't understand how to transfer my values entered in the input to it.

the update seems to be correct, but if I update it, nothing changes, and the data is not updated

Page.vue

<script>

  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.BCT -= this.myMoney * 0.000017
        },
    },

  }
</script>

PieExample.js

import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,


  mounted () {
    this.renderChart({
      labels: ['backs', 'uin', 'Rub'],
      datasets: [
        {
          backgroundColor: [
            '#41B883',
            '#E46651',
            '#00D8FF',
    
          ],
          data: [1,1,1]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
}

Upvotes: 0

Views: 35

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31331

As per the documentation of vue-chartjs you shouldnt include a template tag in the component you render your chart in because that wont work:

Template Tag can not be merged

Do not include the <template> tag in your .vue single-file components. 
Vue can not merge templates.
If you add an empty <template> tag, Vue will take the template from your component and not from the extended one, which will result in an empty template and unexpected errors.

So you will need to make a child component for your chart in which you dont include a script tag that you include in your main file

Upvotes: 1

Related Questions