一段时间后显示 Vue 饼图（就像显示带有警告的控制台）

Question

我正在尝试在我的 vue 应用程序中填充一个饼图，我可以正确地向其中填充数据，但是页面没有立即显示饼图，但是过了一会儿（就像显示控制台一样），我在控制台中收到警告：

vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null

found in

---> at src/components/StastCard.vue at src/App.vue

这是我的代码（也许还有另一种填充数据的方法，但我只是通过这种方式成功完成）： StastCard.vue:

<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: {
        labels: ["Km", "KJ", "HB"],
        datasets: [
          {
            label: "Data One",
            backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
            data: [1, 10, 5]
          }
        ]
      },
    }
  },
  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)
   },
  },
  mounted() {
    this.addData()
  }
}

</script>

这是我的 PieChart.js

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

我做错了什么？为什么我的饼图没有立即显示出来？谢谢

Answer 1

首先，我认为您可能希望使用 reactiveProp 使您的图表对数据更改做出反应。

其次，由于vue-chartjs会在父组件之前渲染子组件，所以你会得到无效的道具警告。要修复它，您可以将 mounted 挂钩更改为 created 挂钩。您可以找到更多信息 here.

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

最后，您应该将 chartData 对象分配给一个新的引用以使 Vue 具有反应性。一种简单的方法是使用 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))
   },
  },

Answer 2

我终于找到了解决办法，我把 .js 文件改成这样：

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() {}
}

这是我的看法：

<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>

一段时间后显示 Vue 饼图（就像显示带有警告的控制台）

Vue pie chart show after a while (like show console with a warning)

pie-chart

vue.js

chart.js