Vue.js与Vue chartjs-从API中提取数据

我尝试使用类似的方法来进行项目，在子组件中定义标签和数据集，并绑定到父组件中的道具，但我没有得到任何结果

Vue.js devtools加载项显示道具包含在父组件中传递的数据，但初始控制台日志显示空数组：

loadData init
Array []
Array []

因此，如果您更改我尝试的数据集，Chart.js不会提供实时更新，这会引发下面的错误，很可能是因为我只更新了一个数据集：

watcher chartData回调时出错：TypeError: newData.dataset未定义

问题:

如果最初绑定的数组为空，并且我没有看到任何相关的mixin或mixin，那么GitHub项目中的图表是如何更新的

在这种情况下，如何使用vue chartjs mixins提供实时更新？我想保留图表组件中的所有选项和配置，只更新标签和数据集

组件/线形图.vue

App.vue

在你的例子中，reactivePropMixin不起作用。因为只有将整个chart.js数据对象作为道具传递时，它才会起作用。不仅仅是一个数据集的数据数组。这是相当有限的。但是，您只需添加自己的观察者，然后将其命名为。$data.\u chart.update

API请求的主要问题是它们是异步的。因此，您可以挂载组件，请求数据，并且您的图表在没有数据的情况下呈现，因为您的api调用当时可能还没有完成。然后它完成，改变你的数据，你的图表就会破裂。为了防止这种情况，通常会添加一个条件。在promise或async调用中，需要定义类似isLoaded的内容，如果完成api调用，可以将其设置为true。然后向图表添加一个条件v-if=isLoaded，这样，只有在从API获取数据的情况下，图表才会最初呈现

<script>

import { Line, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins

export default {
  extends: Line,
  //mixins: [reactiveProp],
  props: {
    chartData: {
      type: Array | Object,
      required: true
    },
    chartLabels: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {display: false},
        scales: {
          xAxes: [{
            display: false,
            scaleLabel: {
              display: false,
              labelString: 'Date'
            }
          }],
          yAxes: [{
            stacked: false,
            display: true,
            scaleLabel: {
              display: false,
              labelString: 'Price'
            },
            ticks: {
              beginAtZero: false,
              reverse: false
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.renderChart({
      labels: this.chartLabels,
      datasets: [{
        label: 'Data One',
        backgroundColor: '#18BC9C',
        fill: true,
        pointRadius: 0,
        borderColor: '#18BC9C',
        data: this.chartData,
      }]
    }, this.options)
  }
}

</script>

<template>
  <div class="main">
    <line-chart :chart-data="systemUptimeData" :chart-labels="systemUptimeLabels"/>
  </div>
</template>

<script>

import LineChart from './components/LineChart'

export default {
  name: 'Test',
  components: {
    LineChart
  },
  data: () => {
    return {
      systemUptimeLabels: [],
      systemUptimeData: [],
    }
  },
  methods: {
    loadData () {
      // This method will fetch data from API
      console.log('loadData init', this.systemUptimeLabels, this.systemUptimeData)
      this.systemUptimeLabels = ['a', 'b', 'c']
      this.systemUptimeData = [1, 2, 3]
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style scoped>
.main {
  max-width: 800px;
  max-height: 600px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
</style>