Не удается отобразить диаграмму, данные из 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": "Android", "dt": 80}, {"lb": "IOS", "dt": 20} ]

извините из-за моего плохого английского sh.

Answer 1

Можете ли вы также включить сообщения об ошибках? Я подозреваю, что неправильная структура данных "chartdata" вызывает ошибку еще до получения данных для отображения, т.е. "chartdata" должна быть

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