Vue Chart.js - Graphique n'est pas mise à jour lorsque les données est en train de changer

Je suis en utilisant Vue.js et Chart.js le tirage de graphique.
Chaque fois que j'appelle la fonction generateChart(), le tableau n'est pas mis à jour automatiquement. Quand j'ai vérifier les données du VueDevTools, ils sont corrects mais le tableau ne représente pas ceux.

Fait amusant : La carte est mise à jour lorsque je suis le redimensionnement de la fenêtre.

  • Ce qui est faux avec ce que je fais ?
  • Comment mettre à jour le graphique, chaque fois que je vais appeler generateChart() ?

Je sens que cela va être quelque chose en rapport avec object et array de détection des changements de mise en garde, mais je ne suis pas sûr de quoi faire.

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)
    }
})

OriginalL'auteur Léo Coco | 2017-05-02

  1. 2
    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)
}
}

    ajouter des observateur à la mise à jour de vue graphique graphique

    OriginalL'auteur Shrikant

  2. 1

    Je n'ai jamais utilisé de vue-chartjs avant, mais il semble que votre seul problème est que vous avez oublié explicitement recevoir chartData comme un accessoire dans votre ligne graphique de la composante:

    Changement

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

    avec

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

    Aussi, être conscient de vue de la réactivité des problèmes lors de la modification d'objets, cela ne fonctionne pas:

    this.dataChart['datasets'] = datasets;

    que vous avez à faire quelque chose comme ceci:

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

    en vue Vue de détecter des changements dans votre objet.

    Plus d'infos sur la réactivité:
    https://vuejs.org/v2/guide/reactivity.html

    Plus d'infos sur la réactivité dans les graphiques:
    http://vue-chartjs.org/#/home?id=reactive-data

    Malheureusement, il n'a pas le faire. Sur le manque prop, comme il est indiqué dans le chart.js la documentation, le mixin fait le travail.

    OriginalL'auteur Gerardo Rosciano