ChartJS 未捕获的类型错误:无法设置未定义的属性(设置“render”)

czq61nw1  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(164)

我正在尝试另一种方法来为一些报告制作图表,为此我使用了ChartJs,vue,axios和我的数据库中的信息。我已经查看了代码,并按照错误指出的要点,但我一直无法解决它,以下是代码:

<template>
<div>
    <br>
    <br>
    <chart></chart>
        <br>
        <br>
</div>
</template>

<script>
import VueChartJs from 'vue-chartjs'
import Chart from 'chart.js'
import Vue from 'vue'

Vue.component('chart',{
  extends:VueChartJs.Pie,
  data(){
    return{
      etiquetas: [],
      stock: [],
      bgColors: ['#5DB3E2', '#5DE2C1 ', '#C0E25D '],
    }
  },
  mounted(){
    this.mostrar()
    this.renderChart({
      labels: this.etiquetas,
      datasets: [
        {
          label:'Graficos',
          backgroundColor: this.bgColors,
          data: this.stock
        }
      ]
    }, {responsive:true, maintainAspectRadio:false})
  },
  methods:{
    mostrar(){
      axios.get('http://localhost:4000/users')
      .then(response => {
        response.data.forEach(element => {
          this.etiquetas.push(element.position)
          this.stock.push(element.id)
        });
      })
    }
  }
})

</script>

这是整个错误:

Uncaught TypeError: Cannot set properties of undefined (setting 'render')
    at normalizeComponent (componentNormalizer.js?2877:24)
    at eval (Reports.vue?ab61:8)
    at Module../src/views/Reports.vue (app.js:1836)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (index.js?a18c:1)
    at Module../src/router/index.js (app.js:1716)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:13)

我非常感谢你帮助解决这个问题。

8gsdolmq

8gsdolmq1#

看起来您没有正确导出Vue组件定义。请尝试添加export default {

2g32fytz

2g32fytz2#

您应该使用export default来注册组件,就像通常使用单文件组件一样。

<script>
export default {
  name: 'chart'
}
</script>

相关问题