无法渲染图表，来自 api 的数据

Question

我从 api 获取数据。我可以显示图表数据，但不能呈现图表。 我的代码：

<script>
import { Pie, mixins } from 'vue-chartjs'
import axios from 'axios'
export default {
mixins: [mixins.reactiveData],
extends: Pie,
data() {
return {
  chartdata: ''
 }
},
mounted () {
this.renderChart(this.chartdata, this.options)
},

created() {
axios.get("http://localhost:3000/chart1")
.then(response => {
  const responseData = response.data
  
  this.chartdata = {
    labels: responseData.map(item => item.lb),
    datasets: 
      [
          {
            label: 'hrlo',
            backgroundColor: ['purple','#b2b2b2'],
            data: responseData.map(item => item.dt)
          }
      ]
  } 
 })
  .catch( e => {
    this.errors.push(e)
  })

 },  
}
</script>

API：[ { "lb": "安卓", “dt”：80 }, { “磅”：“IOS”， “dt”：20 } ]

对不起，因为我的英语不好。

Answer 1

您还可以包含任何错误消息吗？我怀疑“chartdata”的错误数据结构甚至在检索要显示的数据之前导致错误，即“chartdata”需要是

chartdata: {
    labels: [],
    datasets: []
}