0

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

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

loadData init
Array []
Array []

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

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

问题：

  1. 如果最初绑定的数组为空并且我没有看到任何相关的 mixin 或watcher ，那么来自 GitHub 的这个项目中的图表如何更新？

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

组件/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>

应用程序.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>
4

1 回答 1

1

  1. 好吧，这reactivePropMixin在您的示例中不起作用。因为只有将整个 chart.js 数据对象作为道具传递时它才会起作用。不仅是一个数据集的数据数组。这是相当有限的。但是，您可以简单地添加一个自己的观察者，然后调用this.$data._chart.update()

  2. API 请求的主要问题是它们是异步的。因此，您的组件被挂载，请求数据并且您的图表在没有数据的情况下呈现，因为您的 api 调用当时可能尚未完成。然后它完成，改变你的数据，你的图表就会中断。为了防止这种情况发生，通常的做法是添加条件。在您的承诺或异步调用中，您需要定义类似的东西isLoaded，如果您完成了 api 调用，您可以将其设置为 true。然后向您的图表添加一个条件，v-if="isLoaded"以便您的图表最初仅在您从 API 获取数据时才会呈现。

于 2018-07-31T09:33:42.720 回答