Vue-ChartJS 数据集推送不更新图表

Question

我正在使用 Vue-ChartJS 在我的网页上显示图表。因此，当我使用推送功能更新数据集时，图表不会更新（据说它应该更新视图）。使用直接设置反应变量正在更新图表（如this.transaction = Object）。当前的 ChartComponent 是这样工作的，但我想从 API 获取数据并将其添加到视图中。

LineChart.js

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

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],

  mounted () {
    this.renderChart(this.chartData,  this.options)
  }
}

ChartComponent.vue（使用直接设置）

<template>
<div class="card">
    <div class="card-header">

      Статистика

      <div class="float-right">
        <form method="POST" class="form-inline">
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('week')" class="btn btn-primary">Седмица</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('month')" class="btn btn-primary">Месец</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <button type="button" v-on:click="updateChart('year')" class="btn btn-primary">Година</button>
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <label for="custom_from" class="mx-sm-2">От:</label>
            <input id="custom_form" type="date" class="form-control" />
          </div>
          <div class="form-group mx-sm-2 mb-2">
            <label for="custom_to" class="mx-sm-2">До:</label>
            <input id="custom_to" type="date" class="form-control" />
          </div>
        </form>
      </div>
    </div>
    <div class="card-body p-0">
      <div class="p-4">
        <line-chart :options="options" :chart-data="transactions"></line-chart>
      </div>
    </div>
  </div>
</template>

import LineChart from './LineChart.js'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      transactions: {},
      options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: true
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.transactions = {
        labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
        datasets: [{
          label: 'Users',
          data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }]
      }
    },
    updateChart (period) {
      console.log('Chart updated for period: ' + period);
      this.transactions = {
        labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
        datasets: [{
          label: 'Users',
          data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }, {
          label: 'Users',
          data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }]
      }
      console.log(this.transactions)
    }
  },
}

ChartComponent.vue（使用推送功能）

import LineChart from './LineChart.js'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      transactions: {},
      options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: true
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.transactions = {
        labels: ["Януари", "Февруари", "Март", "Април", "Май", "Юни", "Юли", "Август", "Септември", "Октомври", "Ноември", "Декември"],
        datasets: [{
          label: 'Users',
          data: [12, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
          backgroundColor: 'rgba(66, 165, 245, 0.5)',
          borderColor: '#2196F3',
          borderWidth: 1
        }]
      }
    },
    updateChart (period) {
      console.log('Chart updated for period: ' + period);
      this.transactions.datasets.push({
        label: 'Users',
        data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
        backgroundColor: 'rgba(66, 165, 245, 0.5)',
        borderColor: '#2196F3',
        borderWidth: 1
      });
      console.log(this.transactions)
    }
  },
}

Answer 1

可能是Vue reactivity problem。您需要更新对 this.transactions 的引用以使 Vue 具有响应性

updateChart(period) {
  console.log('Chart updated for period: ' + period);
  this.transactions.datasets.push({
    label: 'Users',
    data: [123, 19, 3, 5, 2, 3, 20, 33, 23, 12, 33, 10],
    backgroundColor: 'rgba(66, 165, 245, 0.5)',
    borderColor: '#2196F3',
    borderWidth: 1
  });
  this.transactions = JSON.parse(JSON.stringify(this.transactions))
}