Vue Chart.js: el gráfico no se actualiza cuando los datos cambian

Agradeceríamos tu ayuda para compartir nuestros enunciados acerca de las ciencias de la computación.

Solución:

Utilice una propiedad calculada para los datos del gráfico. Y en lugar de llamar this.renderChart de guardia envuélvalo en un método y reutilice ese método en mounted y en 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];
    
  
);

  
  
  



     dataChart 
   Change data
  
 

También puede hacer que las opciones sean una propiedad calculada, y si la opción no va a cambiar mucho, puede configurar accesorios predeterminados. https://vuejs.org/v2/guide/components.html#Prop-Validación

Aquí hay un codepen en funcionamiento https://codepen.io/azs06/pen/KmqyaN?editors=1010

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)

agregue un observador personalizado para actualizar cualquier gráfico de gráfico vue

Nunca antes usé vue-chartjs, pero parece que su único problema es que olvidó recibir explícitamente chartData como accesorio en su componente de gráfico de líneas:

Cambiar

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

con

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

Además, tenga en cuenta los problemas de reactividad de vue al cambiar objetos, esto no funcionará:

this.dataChart['datasets'] = datasets;

tienes que hacer algo como esto:

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

para que Vue detecte cambios en su objeto.

Más información sobre reactividad: https://vuejs.org/v2/guide/reactividad.html

Más información sobre reactividad en gráficos: http://vue-chartjs.org/#/home?id=reactive-data

Calificaciones y comentarios

Si entiendes que ha sido provechoso nuestro artículo, nos gustaría que lo compartas con más seniors y nos ayudes a dar difusión a nuestro contenido.

---

---

Utiliza Nuestro Buscador