Komponent Vue Chart.js nie renderuje

Question

Dashboard pobiera tablicę danych z 10 elementami jako właściwość . Każda tablica 0.5s aktualizuje się o nowy element. Widzę, że dane zmieniają się w zestawie danych, ale wykres nie jest wyświetlany.

Po ustawieniu wskaźnika myszy pojawia się również ten błąd Uncaught TypeError: Cannot read property 'skip' of undefined.

//LineChart.vue 
<script> 
import { 
    Line, 
    mixins 
} from 'vue-chartjs' 
export default Line.extend({ 
    mixins: [mixins.reactiveData], 
    props: ["options"], 
    data() { 
     return { 
      chartData: { 
       labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 
       datasets: [{ 
        label: 'Data One', 
        borderColor: '#e67e22', 
        pointBackgroundColor: '#e67e22', 
        borderWidth: 1, 
        pointBorderColor: '#e67e22', 
        backgroundColor: 'transparent', 
        data: this.$root.$data.chdata 
       }] 
      }, 

     } 
    }, 


    mounted() { 
      this.renderChart(this.chartData, { 
      responsive: true, 
      maintainAspectRatio: false, 
      animation: false, 
      //Boolean - If we want to override with a hard coded scale 
      scaleOverride: true, 
      //** Required if scaleOverride is true ** 
      //Number - The number of steps in a hard coded scale 
      scaleSteps: 20, 
      //Number - The value jump in the hard coded scale 
      scaleStepWidth: 10, 
      //Number - The scale starting value 
      scaleStartValue: 0 
     }); 
    }, 
    watch: { 
     chartData: function() { 
      this._chart.destroy() 
      this.renderChart(this.data, this.options) 
      // this._chart.update() 
     } 
    } 


}); 
</script> 

Zrobiłem to w mounted():

var self = this; 
     self.set = setInterval(function() { 
      self._chart.update() 
     }, 200); 

I nie jestem z niego zadowolony.

Answer 1

Problem polega na tym, że nie aktualizujesz etykiet. Zdefiniujesz 10 pozycji w tablicy etykiet. Działa to dla 10 wpisów danych.

Po naciśnięciu nowego wpisu w tablicy danych należy również dodać nową etykietę. W przeciwnym razie chart.js rzuci ten błąd.