Vue Chart.jsコンポーネントはレンダリングされません

Question

Dashboardは、10要素のデータ配列をchdataプロパティとして取得します。 0.5秒ごとに新しいアイテムがアップデートされます。データがデータセットで変化しているが、グラフが表示されていないことがわかります。

また、ホバー時にこのエラー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> 

私はmounted()でこれを作った：

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

そして、私はそれに満足していませんよ。

Answer 1

問題は、ラベルを更新していないということです。 ラベル配列に10個のアイテムを定義します。これは10個のデータ入力に対して有効です。

新しいエントリをデータ配列にプッシュする場合は、新しいラベルも追加する必要があります。それ以外の場合は、chart.jsがこのエラーをスローします。