vue-chartjs не может отображать метки и наборы данных

Question

У меня проблема с моим line-chart.Данные от API / контроллера не могут быть переданы на мой график, но в ответ отображаются все мои данные

Как показано на рисунке, line-chart было пусто, но в response были данные.

У меня есть сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'map'undefined at app.js: 86744

Я не знаю, как это исправить, пожалуйста, помогите мне.Спасибо

---

Коды

Report.Vue

 <div class="container">
       <h1>USAGE</h1>
       <mortalityLineChart :chartdata="datacollection"> </mortalityLineChart>

    </div>
</template>

<script>
export default {
     data () {
      return {
          date_input: null,
          number_of_morality: null,
          chicken_age:null,
        datacollection: null
      }
    },
      created () {

          this.fillData()
        },
    mounted () {

        this.fillData()

    },
   methods: {
      fillData () {
          axios.get('/api/report')
          .then(response =>{
              let results = response.data.data

              let dateresult = results.map(a => a.date_input)
              let mortalityresult = results.map(a => a.number_of_morality)
              let chickenageresult = results.map(a => a.chicken_age)

              this.date_input = dateresult
              this.number_of_morality= mortalityresult
              this.chicken_age= chickenageresult    

              this.datacollection = {
                  labels: this.number_of_morality,
                  datasets:[
                      {
                          label:'Mortality',
                          backgroundColor: '#f87979',
                          data:this.date_input
                      }
                  ]
              }
          })
    .catch(error => {
            console.log(error)
          })
      },
    }
}
</script>

reportMortalityLineChart.js

  import {Line} from 'vue-chartjs' // We specify what type of chart we want from vue-chartjs and the mixins module
  export default({
    extends: Line, //We are extending the base chart class as mentioned above
    props: ["mychartData"],
    watch: {
       mychartData: {
        handler: function (val) {
        this._chart.update()
      }, 
        deep: true
      }
    },
    data () {
      return {
        options: { //Chart.js options
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [ {
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted () {
      // this.chartData is created in the mixin
      this.renderChart(this.chartData, this.options)
    }
  })

App.js

import reportMortalityLineChart from './charts/reportMortalityLineChart'
Vue.component('mortalityLineChart',reportMortalityLineChart);

Предварительный просмотр

2017-12-10: 4
2017-12-11: 12
2017-12-12: 17
2017-12-13: 16
2017-12-14: 17
2017-12-15: 10
2017-12-16: 11
2017-12-17: 13
2017-12-18: 6
2017-12-19: 1
2017-12-20: 13
2017-12-21: 16
2017-12-22: 4
2017-12-23: 10
2017-12-24: 10
2017-12-25: 10
2017-12-26: 19
2017-12-27: 5
2017-12-28: 7
2017-12-29: 13
2017-12-30: 13
2017-12-31: 10
2018-01-01: 13
2018-01-02: 23
2018-01-03: 15
2018-01-04: 35
2018-01-05: 61

ReportController.php

public function index()

{
    $mortality = Mortality::where('cycle_id', 2)
    ->where(['user_id' => Auth::id()])
    ->pluck('number_of_mortality','date_input','chicken_age');

    return response()->json($mortality);
}

таблица смертности

Schema::create('mortalities', function (Blueprint $table) {
    $table->increments('id');
    $table->date('date_input');
    $table->integer('number_of_mortality');
    $table->integer('chicken_age');
    $table->mediumText('cause_of_death')->nullable();
    $table->unsignedInteger('cycle_id');
    $table->unsignedInteger('user_id'); 
    $table->timestamps();

Answer 1

Ваша проблема в том, что ваш вызов API является асинхронным.Таким образом, может случиться, что ваша диаграмма будет обработана до того, как ваши данные поступят.

Вам необходимо убедиться, что ваши данные там есть.

Самым простым подходом было бы использование состояния loaded и v-if в компоненте диаграммы.

Пример можно посмотреть в документации: https://vue -chartjs.org/guide/#chart-with-api-data

Answer 2

Основываясь на ответе, возвращающемся, есть несколько ошибок при обработке данных.

.then(response => {
  // let results = response.data.data <- does not exist
  let results = response.data

  // These keys do not exist on your response date_input, number_of_morality, chicken_age
  // let dateresult = results.map(a => a.date_input)
  // let mortalityresult = results.map(a => a.number_of_morality)
  // let chickenageresult = results.map(a => a.chicken_age)

  // this.date_input = dateresult
  // this.number_of_morality= mortalityresult
  // this.chicken_age= chickenageresult    

  this.datacollection = {
    labels: 'Manually Name Labels', // this.number_of_morality, <- This does not exist on your response
     datasets:[{
       label: 'Mortality',
       backgroundColor: '#f87979',
       data: response.data // this.date_input <- This did not exist on your response
     }]
  }
})

Это должно что-то визуализировать.Однако, чтобы исправить это должным образом, мне нужно посмотреть, как выглядит схема БД для вашей модели Mortality в Laravel.

Вы можете попробовать обновить свой контроллер до:

public function index ()

{
    $mortality = Mortality::select('number_of_mortality','date_input','chicken_age')->where('cycle_id', 2)
    ->where(['user_id' => Auth::id()]);

    return response()->json($mortality);
}

Но опять же, не видя схемы, я не уверен, что это решит проблему.Если вы сделаете это изменение, опубликуйте обновленные результаты ответа в chrome dev tools