График Вю.JS-Chart не обновляется при изменении данных

Я использую Vue.js и диаграмма.js, чтобы нарисовать диаграмму. Каждый раз, когда я вызываю функцию generateChart() диаграмма не обновляется автоматически. Когда я проверяю данные в VueDevTools, они верны, но диаграмма не представляет их.

забавный факт: диаграмма обновляется, когда я изменяю размер окна.

  • что не так с тем, что я делаю ?
  • Как обновить диаграмму каждый раз, когда я звоню generateChart() ?

Я чувствую, что это будет что-то связанное с object и array предупреждение обнаружения изменений, но я не уверен, что делать.

https://codepen.io/anon/pen/bWRVKB?editors=1010

 <el-dialog title="Chart" v-model="showGeneratedChart">
     <line-chart :chartData="dataChart"></line-chart>
</el-dialog>

 export default{
    data (){
        const self = this;
        return {
         dataChart : {
                labels : [],
                datasets: [{
                        label: 'label',
                        backgroundColor: '#FC2525',
                        data: [0, 1, 2, 3, 4],
                    }]
        }
    }
}


 generateChart() { 
     this.dataChart['labels'] = [];
     this.dataChart['datasets'] = [];

     ... compute datasets and formattedLabels

     this.dataChart['labels'] = formattedLabels;
     this.dataChart['datasets'] = datasets;
 }

LineChart.js

import { Line, mixins } from 'vue-chartjs'

export default Line.extend({
    mixins: [mixins.reactiveProp],
    props: ["options"],
    mounted () {
        this.renderChart(this.chartData, this.options)
    }
})
8
charts javascript vue.js

3 ответов

использовать вычисляемое свойство для данных диаграммы. И вместо того, чтобы звонить this.renderChart on watch оберните его в метод и повторно используйте этот метод на mounted и watch.

Vue.component("line-chart", {
  extends: VueChartJs.Line,
  props: ["data", "options"],
  mounted() {
    this.renderLineChart();
  },
  computed: {
    chartData: function() {
      return this.data;
    }
  },
  methods: {
    renderLineChart: function() {
    this.renderChart(
      {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July"
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: this.chartData
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false }
    );      
    }
  },
  watch: {
    data: function() {
      this._chart.destroy();
      //this.renderChart(this.data, this.options);
      this.renderLineChart();
    }
  }
});

var vm = new Vue({
  el: ".app",
  data: {
    message: "Hello World",
    dataChart: [10, 39, 10, 40, 39, 0, 0],
    test: [4, 4, 4, 4, 4, 4]
  },
  methods: {
    changeData: function() {
      this.dataChart = [6, 6, 3, 5, 5, 6];
    }
  }
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue.jS Chart</title>
</head>
<body>
<div class="app">
    {{ dataChart }}
   <button v-on:click="changeData">Change data</button>
  <line-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"></line-chart>
 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@2.5.7-rc3/dist/vue-chartjs.full.min.js"></script>
</body>
</html>

вы также можете сделать параметры вычисляемым свойством, и если опция не изменится, вы можете настроить реквизит по умолчанию. https://vuejs.org/v2/guide/components.html#Prop-Validation

вот рабочий codepen https://codepen.io/azs06/pen/KmqyaN?editors=1010

13

Я никогда не использовал vue-chartjs раньше, но похоже, что ваша единственная проблема заключается в том, что вы забыли явно получить chartData в качестве опоры в вашем компоненте линейной диаграммы:

изменить

export default Line.extend({
    mixins: [mixins.reactiveProp],
    props: ["options"],
    mounted () {
        this.renderChart(this.chartData, this.options)
    }
})

С

export default Line.extend({
    mixins: [mixins.reactiveProp],
    props: ["chartData", "options"],
    mounted () {
        this.renderChart(this.chartData, this.options)
    }
})

кроме того, имейте в виду проблемы реактивности vue при изменении объектов, это не сработает:

this.dataChart['datasets'] = datasets;

вы должны сделать что-то вроде этого:

Vue.set(this.dataChart, 'datasets', datasets);

для того, чтобы Vue обнаруживал изменения в вашем объекте.

Подробнее о реактивности: https://vuejs.org/v2/guide/reactivity.html

больше информации о реактивности в диаграммах: http://vue-chartjs.org/#/home?id=reactive-data

1
watch: {
chartData: function (newData, oldData) {
  // let ctx = document.getElementById('doughnut-chart').getContext('2d')
  // console.log(ctx)
  // var chart = new Chart(ctx, {type: 'doughnut', data:, options: self.options})
  // // chart.config.data.datasets.push(newData)
  // chart.config.options.animation = false
  // console.log(chart)
  // chart.config.data.datasets.push(newData)
  // chart.config.optionsNoAnimation = optionsNoAnimation
  // console.log(chart.config.data.datasets.push(newData))
  // this.dataset = newData
  // chart.update()
  // console.log('options', this.data)
  console.log('new data from watcher', newData)
  this.data.datasets[0].data = newData
  this.renderChart(this.data, this.options)
}
}

добавить пользовательский наблюдатель для обновления любого графика диаграммы vue

1