Vue2/vue 图表 js - element._view 未定义

问题描述

我尝试使用 vue-chartjs 为我当前的 vue-js 项目编写一些简单的图表组件。 这个想法是创建一个实时图表，所以我想自动将数据添加到我的图表中，而无需渲染新数据。

我的问题是我没有看到任何数据或图表不会更新。

我的 LineChart.vue (components/charts/LineCharts.vue) 看起来像：

    <script>
import { Line,mixins } from 'vue-chartjs'
export default {
  extends: Line,mixins: [mixins.reactiveProp],props: ['options'],watch: {
    chartData () {
      this.$data._chart.update()
    }
  },mounted () {
    this.renderChart(this.chartData,this.options)
  }
}
</script>

还有我要测试组件的 demo.vue：

 <template>
  <ViewTemplate>
    <LineChart
      v-if="loaded"
      :chartData="lineChartData"
      :options="options"
    />
  </ViewTemplate>
</template>

<script>
import ViewTemplate from '../../components/ViewTemplate'
import LineChart from '../../components/charts/LineChart'
import pollingMixin from '../../mixins/pollingMixin'

export default {
  name: 'demo',components: { LineChart,ViewTemplate },mixins: [pollingMixin],data () {
    return {
      loaded: false,lineChartData: {
        labels: [],datasets: []
      },options: {
        responsive: true,maintainAspectRatio: false,title: {
          display: true,text: '',position: 'left'
        },legend: {
          display: true,position: 'top'
        },scales: {
          yAxes: [
            {
              ticks: {
                min: this.calculateMin,max: this.calculateMax
              }
            }
          ],xAxes: [
            {
              scaleLabel: {
                display: true
              },type: 'time',time: {
                displayFormats: {
                  second: 'HH:mm:ss',minute: 'HH:mm',hour: 'DD. MMM HH:mm',day: 'DD. MMM'
                },tooltipformat: 'DD.MM HH:mm:ss'
              },position: 'bottom'
            }
          ]
        },elements: {
          point: {
            radius: 0,hiTradius: 10,hoverRadius: 10
          },line: {
            tension: 0
          }
        }
      }
    }
  },methods: {
    createChart () {
      this.lineChartData = {
        labels: [],datasets: [
          {
            label: 'Data One',backgroundColor: '#f87979',data: []
          },{
            label: 'Data One',data: []
          }
        ]
      }
      this.loaded = true
    },fillData () {
      // this.lineChartData.labels.push(1)
      let i
      for (i in this.lineChartData.datasets) {
        if (Object.prototype.hasOwnProperty.call(this.lineChartData.datasets,i)) {
          this.lineChartData.datasets[i].data.push(this.getRandomInt())
        }
      }
    },getRandomInt () {
      const dp = {}
      dp.x = Date.Now()
      dp.y = Math.floor(Math.random() * (50 - 5 + 1)) + 5
      return dp
    },updateState () {
      if (this.loaded === true) {
        this.fillData()
      }
    }
  },computed: {
    calculateMin () {
      if (Object.prototype.hasOwnProperty.call(this.lineChartData,'datasets')) {
        let min = this.lineChartData.datasets[0].data[0].y
        let i
        for (i = 0; i < this.lineChartData.datasets.length; i++) {
          let j
          for (j = 0; j < this.lineChartData.datasets[i].data.length; j++) {
            if (this.lineChartData.datasets[i].data[j].y < min) {
              min = this.lineChartData.datasets[i].data[j].y
            }
          }
        }
        return min
      } else {
        return null
      }
    },calculateMax () {
      if (Object.prototype.hasOwnProperty.call(this.lineChartData,'datasets')) {
        let max = this.lineChartData.datasets[0].data[0].y
        let i
        for (i = 0; i < this.lineChartData.datasets.length; i++) {
          let j
          for (j = 0; j < this.lineChartData.datasets[i].data.length; j++) {
            if (this.lineChartData.datasets[i].data[j].y > max) {
              max = this.lineChartData.datasets[i].data[j].y
            }
          }
        }
        return max
      } else {
        return null
      }
    }
  },mounted () {
    this.createChart()
  }
}
</script>

由于我的 PollingMixing，方法 UpdateState 将每秒执行一次。 每个数组 lineChartData.datasets[i].data 每一步都在增长。 我的意思是，60 秒后，每个数据集将有 60 个值。

问题是：我没有看到，图表没有说明。 我在控制台窗口中收到错误“element._view 未定义”。

有人知道这个错误是什么意思吗？ 有没有人知道如何正确使用reactiveProp？ 其实我想，有了 watch chartData 和一些新数据， 我的图表将自动更新。

我尝试了多种解决方案，但都没有奏效。 这只是我真实作品的简单剪辑。 我希望有人有好主意。

提前致谢！ 马蒂亚斯

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）