[Vuejs]-Vue pie chart show after a while (like show console with a warning)

by

0👍

✅

I finally found a solution, I change the .js file with this:

import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  methods: {
    renderpie() {
      this.renderChart(this.chartdata, this.options)
    }
  },
  mounted() {}
}

Here my view:

<template>
<div>
 <div class="container">
  <div class="row">
    <div class="col-sm">
      <pie-chart :chartData="dataChart"></pie-chart>
    </div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
 </div>
</div>
</template>
<script>
import DataService from '@/services/DataService'
import PieChart from "@/plugins/PieChart.js";
export default {
  name: 'StastCard',
  props: {
    username: {
        type: String
    }
  },
  components: {
      PieChart
  },
  data: function() {
    return {
      dataChart: {},
      firstValue:'',
      secondValue:'',
      thirdValue:''
    }
  },
  methods: {
    addData() {
      this.firstValue=DataService.getFirstValue()
      this.secondValue=DataService.getSecondValue()
      this.thirdValue=DataService.getThirdValue()
      var hrate = []
      this.heart_rate.forEach(el => {
        hrate.push(el.rate)
      })
      this.dataChart = {
        labels: ['Km', 'Kj', 'HB'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: ['#41B883', '#E46651', '#00D8FF'],
            data: [this.firstValue,this.secondValue,this.thirdValue]
          }
        ]
      }
    },
  },
  async created() {
    await this.addData()
    this.$refs.pie.renderpie()
  }
}

</script>

0👍

First, I think you might want to use reactiveProp to make your chart reactive with data changes.

Secondly, because of vue-chartjs will render child component before parent component, so you will get the Invalid prop warning. To fix it, you can change from mounted to created hook. You can find more information here.

import { Pie, mixins } from 'vue-chartjs'
export default {
  extends: Pie,
  mixins: [mixins.reactiveProp],
  created() {
    this.renderChart(this.chartData, {})
  }
}

Lastly, you should assign chartData object to a new reference to make Vue reactive. An easy way is using JSON.parse(JSON.stringify())

  methods: {
    async addData() {
      this.firstValue=DataService.getFirstValue()
      this.secondValue=DataService.getSecondValue()
      this.thirdValue=DataService.getThirdValue()

      this.dataChart.labels.pop()
      this.dataChart.labels.pop()
      this.dataChart.labels.pop()
      this.dataChart.labels.push(["Km"])
      this.dataChart.labels.push(["KJ"])
      this.dataChart.labels.push(["HB"])
      this.dataChart.datasets[0].data.pop()
      this.dataChart.datasets[0].data.pop()
      this.dataChart.datasets[0].data.pop()
      this.dataChart.datasets[0].data.push(this.firstValue)
      this.dataChart.datasets[0].data.push(this.secondValue)
      this.dataChart.datasets[0].data.push(this.thirdValue)
      this.dataChart = JSON.parse(JSON.stringify(this.dataChart))
   },
  },

Leave a comment