Question

我在Laravel上使用vue-chartjs，我遇到了加载时数据未加载的问题。但是当我在Legend上点击3x时，数据会显示出来。

这是gif：https://gfycat.com/gifs/detail/SimilarShockedAffenpinscher

我的代码：

<template>
    <Chart :chartData="this.data" :width="800" :height="500"></Chart>
</template>
<script>
    import Chart from './Chart.vue';

    export default {
      name: 'home',
      components: {
        Chart
      },
      data() {
        return {
            data: {},
            weights: [],
            dates: []
        }
      },
      mounted () {
        this.render()
      },
      methods: {
        render() {
            self = this
            axios.get('/api/data')
              .then(function (response) {
                for (var i = 0; i < response.data.data.length; i++) {
                    self.weights.push(response.data.data[i].kg)
                    self.dates.push(response.data.data[i].created_at)
                }
                console.log(response)
              })
              .catch(function (error) {

                console.log(error);
              });
            // Overwriting base render method with actual data.
          self.data = {
            labels: self.dates,
            datasets: [
              {
                label: 'Data One',
                data: self.weights,
              }
            ]
          }
        }
      }
    }
</script>

Chart.vue：

<script>
    import VueCharts from 'vue-chartjs'
    import { Bar, Line, mixins } from 'vue-chartjs'
    import moment from 'moment'
    import axios from 'axios'
    export default {
      extends: Bar,
      mixins: [mixins.reactiveProp],
      props: ['chartData', 'options'],
      data() {
        return {

        }
      },
      mounted () {
        this.renderChart(this.chartData, this.options)
      },
      methods: {
      }
    }
</script>

Answer 1

我怀疑这是你的问题：

  self.data = {
        labels: self.dates,
        datasets: [
          {
            label: 'Data One',
            data: self.weights,
          }
        ]
      }

Self引用了这个self.data = this.data。它直接分配给您的组件数据属性。

Vue chart.js不显示加载数据

1 个答案: