Question

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

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

loadData init
Array []
Array []

因此，由于“如果更改数据集，Chart.js不会提供实时更新”，我尝试了reactiveProp mixin，将错误提示如下，这很可能是因为我仅更新了一个数据集：

观看者“ chartData”的回调错误：“ TypeError： newData.datasets未定义”

问题：

如果最初，绑定数组为空，并且看不到任何相关的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数据对象作为道具传递，它才会起作用。不仅是一个数据集的数据数组。它是相当有限的。但是，您只需添加自己的观察者，然后调用this.$data._chart.update()
API请求的主要问题是它们是异步的。因此，您的组件将被挂载，请求数据，并且图表将不包含任何数据，因为此时api调用可能尚未完成。然后完成，对您的数据进行变异，图表将被破坏。为防止这种情况，通常的做法是添加一个条件。在您的promise或async调用中，您需要定义类似isLoaded的名称，如果您完成了api调用，则可以将其设置为true。然后将条件添加到图表v-if="isLoaded"中，这样一来，仅当您从API获得数据时，图表才会被渲染。

Vue.js与Vue-ChartJS-从API提取数据

1 个答案: