vue-chart.js未在array.push上更新

编程问答 2022-07-09

问题描述

我正在使用vue-chartjs在我的网站上显示折线图。当我单击一个按钮时，它应该向图表添加另一个值。数据集已更新，但图表未更新。

LinieChart.vue 

<script>
import { Line,mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,mixins: [reactiveProp],props: {
    options: {
      type: Object,default: null
    }
  },mounted () {
    this.renderChart(this.chartData,this.options)
  },methods: {

  }
}
</script>

我将此添加到了 dashboard.vue 图表的显示位置

<line-chart
          ref="LineChart"
          :chart-data="chartdata"
          :options="options"
          class="h-64"
        />

JavaScript：

<script>
export default {
  middleware: 'auth',layout: 'dashboard',name: 'Dashboard',components: {
    temporarydisableModal,LineChart
  },data: () => ({
    sensors: [],sensorTypes: [],valueTypes: [],measurements: [],websockets: [],lastMeasurements: null,loaded: false,chartdata: null,options: {
      maintainAspectRatio: false,responsive: true
    }
  }),beforeMount () {
  },async mounted () {
    this.fillData()
    const self = this
    // self.fillData()
    await self.getSensors()
    self.loaded = false
    self.loaded = true
    console.log('Sensors:')
    console.log(self.sensors)
    console.log(self.sensors.length)
    for (let i = 0; i < self.sensors.length; i++) {
      console.log(i)
      console.log('Subscribed to ' + self.sensors[i].id)
      self.measurements[self.sensors[i].id] = []
      console.log(self.measurements)
      window.Echo.channel('measurement.' + self.sensors[i].id).listen('.App\\Events\\WebsocketMeasurements',(e) => {
        console.log('Data:')
        console.log(e)
        self.websockets.push(e.measurement)
        self.measurements[self.sensors[i].id].push(e.measurement)
        console.log(self.measurements)
      })
    }
  },methods: {
    log () {
      this.chartdata.labels.push(10)
      this.chartdata.datasets[0].data.push(10)
      this.chartdata.datasets[1].data.push(10)
    },fillData () {
      this.chartdata = {
        labels: this.getRandomInt(),datasets: [
          {
            label: 'value_1',borderColor: 'rgba(131,24,48,1)',backgroundColor: 'rgba(131,0.3)',data: this.getRandomInt()
          },{
            label: 'value_2',borderColor: 'rgba(216,42,81,backgroundColor: 'rgba(216,data: this.getRandomInt()
          }
        ]
      }
    },getRandomInt () {
      let array = []
      for (let i = 0; i < 100; i++) {
        array.push(Math.floor(Math.random() * (6) * Math.random() * 3 * Math.random() * 9) + 15)
      }
      console.log(array)
      return array
    },// other functions...
</script>

因此，当我执行功能log()时，应将值10作为标签和一行中的点添加。它被添加到数据集中，而不是添加到图表中。

当我执行log()函数时，悬停图表时出现错误： Chart.js?30ef:6719 Uncaught TypeError: Cannot read property 'skip' of undefined 当我还没有执行该功能时，不会发生这种情况。

解决方法

这是vuecharts的一个已知问题，而不是修改数据上的嵌套元素，而是一直重新分配它们，所以，代替这个：

      this.chartdata.labels.push(10)
      this.chartdata.datasets[0].data.push(10)
      this.chartdata.datasets[1].data.push(10)

执行此操作：

this.chartdata.labels = MyNewArrayOfLabels
this.chartdata.datasets= [  //Me new array of datasets
   {
    label: 'value_1',borderColor: 'rgba(131,24,48,1)',backgroundColor: 'rgba(131,0.3)',data: this.getRandomInt()
   },{
     label: 'value_2',borderColor: 'rgba(216,42,81,backgroundColor: 'rgba(216,data: this.getRandomInt()
   }
 ]
chartsjavascriptvue-chartjsvue.js