将动态数组值分配给vuejs2中的canvajs图形数据答案

【问题标题】：Assign dynamic array values to the canvajs graph data in vuejs2将动态数组值分配给vuejs2中的canvajs图形数据
【发布时间】：2017-07-21 14:57:28
【问题描述】：

我正在尝试使用随机数组值填充画布图。我正在使用 Veujs2 库来实现模板来显示图形数据。请找到我粘贴代码的以下文件。

import {Line} from 'vue-chartjs'

export default Line.extend({
  created () {
    this.generateRandomArray()

    setInterval(function () {
      this.generateRandomArray()
    }.bind(this), 1000)
  },
  methods: {
    generateRandomArray: function () {
    this.dataForServerOne = Array.from({ length: 7 }, () => Math.floor(Math.random() * 40))
    this.dataForServerTwo = Array.from({ length: 7 }, () => Math.floor(Math.random() * 40))
    console.log(this.dataForServerOne + ' = ' + this.dataForServerTwo)
  }
},
data: () => {
  return {
    dataForServerOne: [],
    dataForServerTwo: []
  }
},
mounted () {
  this.renderChart({
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
    {
      label: 'Server One',
      backgroundColor: '#FC2525',
      // data: [40, 39, 10, 40, 39, 80, 40]
      data: this.dataForServerOne
    },
    {
      label: 'Server Two',
      backgroundColor: '#05CBE1',
      data: this.dataForServerTwo
    }
  ]
 }, {responsive: true, maintainAspectRatio: false})
}

})

在 generateRandomArray() 中我有 dataForX 变量值，我无法在 renderchart 函数中使用这个变量。

【问题讨论】：

你确定你的库支持reactive data吗？
@MatJ - 我使用 chartjs 作为 vue(Vue-chartjs) 的包，我希望它应该支持响应式数据。
您检查了链接吗？是同一个图书馆吗？那么，我有消息要告诉你。
是的，我正在使用同一个库@Mat J

标签： vue.js vuejs2

【解决方案1】：

你可以替换这个：

created () {
  this.generateRandomArray()
},
methods: {
  generateRandomArray: () => {
  var dataForX = Array.from({ length: 7 }, () => Math.floor(Math.random() * 40))
}

有

data(){
  return {
    dataForX: Array.from({ length: 7 }, () => Math.floor(Math.random() * 40))
  }
}

然后使用this.dataForX获取它

【讨论】：

此解决方案适用于首次显示数据。我想每秒显示一次随机数。我在数据中使用了 setInterval 但它不起作用。你能帮我如何检索每秒的数据吗？
在这种情况下，您希望每秒调用一次 generateRandomArray 方法。但是你想要this.dataForX = 而不是var dataForX =，所以它会更新你组件上的属性。
使用 setInterval 更新代码，但视图内的值仍然没有更新。只有一次它正在更新视图。然后每一秒的视图都没有更新，但代码每秒钟都在执行，我用 console.log 验证。
使用 bind 确保你的区间函数在你的 Vue 组件范围内运行。 setInterval(function(){}.bind(this));
我已经在 setInterval 中使用了 bind(this)，请检查我更新的代码。仍然无法看到视图中的数据变化。