Vue Chart.js 구성 요소가 렌더링되지 않습니다.

Question

Dashboard는 chdata 속성으로 10 개 요소가있는 데이터 배열을 가져옵니다. 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가이 오류를 발생시킵니다.