Vue.js 使用 vue-chartjs - 从 API 中提取数据

Question

我正在尝试使用与 this 项目类似的方法，其中 labels 和 datasets 在子组件中定义，并绑定到父组件中的道具，但我'我没有得到任何结果。

"Vue.js devtools" 附加组件显示 props 包含在父组件中传递的数据，但是初始控制台日志显示空数组：

loadData init
Array []
Array []

所以由于 "Chart.js does not provide a live update if you change the datasets" 我尝试了 reactiveProp mixin 抛出了下面的错误，很可能是因为我只更新了一个数据集：

Error in callback for watcher "chartData": "TypeError: newData.datasets is undefined"

问题：

如果最初绑定数组为空并且我没有看到任何相关的 mixin 或 watcher，那么 GitHub 这个项目中的图表如何更新？
如何使用 vue-chartjs mixins 在这种情况下提供实时更新？我想保留图表组件中的所有选项和配置，只更新标签和数据集。

components/LineChart.vue

<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>

App.vue

<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>

Answer 1

好吧，reactivePropMixin 在您的示例中不起作用。因为只有当你将整个 chart.js 数据对象作为 prop 传递时它才会起作用。不仅是一个数据集的数据数组。这是非常有限的。但是，您可以简单地添加一个自己的观察者，然后调用 this.$data._chart.update()
API 请求的主要问题是它们是异步的。所以你的组件被挂载，请求数据并且你的图表呈现没有数据，因为你的 api 调用当时可能没有完成。然后它完成，改变你的数据，你的图表就会崩溃。为了防止这种情况，通常的做法是添加一个条件。在您的 promise 或异步调用中，您需要定义类似 isLoaded 的内容，如果您完成了 api 调用，您可以将其设置为 true。然后向您的图表添加一个条件 v-if="isLoaded" 这样您的图表最初只会在您的数据来自 API.

Vue.js 使用 vue-chartjs - 从 API 中提取数据

Vue.js with vue-chartjs - pulling data from API

vue.js

charts

vue-chartjs