vue-chartjs 无法显示标签和数据集

Question

我的line-chart 有问题。来自 api/controller 的数据无法在我的图表上传输，但作为响应显示了我的所有数据

如图所示，line-chart 为空，但response 中有数据。

据说有错误

TypeError: 无法读取未定义的属性“地图” 在 app.js:86744

我不知道如何解决它，请帮助我。谢谢

---

代码

报告.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
     }]
  }
})

这应该渲染一些东西。但是，要正确解决此问题，我需要查看 Laravel 中 Mortality 模型的 DB 模式。

您可以尝试将控制器更新为：

公共函数索引()

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

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

但同样没有看到架构，我不确定这是否能解决问题。如果您进行更改，请在 chrome 开发工具中发布响应的更新结果

Answer 3

您没有在 reportMortalityLineChart.js 中安装道具 示例：

props: {
    // eslint-disable-next-line vue/require-default-prop
    chartData: {
        type: Array,
        required: false
    },
    chartLabels: {
        type: Array,
        required: true
    }
    },

mounted () {
        this.renderChart({
        labels: this.chartLabels,
        datasets: [
          {
            label: 'downloads',
            borderColor: '#249EBF',
            pointBackgroundColor: 'rgba(0,0,0,0)',
            borderWidth: 1,
            data: this.chartData
          }
        ]
      }, this.options)
    }