Vue Chart.js 구성 요소가 렌더링되지 않음

Vue Chart.js 구성 요소가 렌더링되지 않음

대시보드는 10개의 요소를 사용하여 데이터 어레이를 가져옵니다.chdata소유물.0.5s 어레이는 매번 새로운 항목으로 갱신됩니다.데이터 집합에서 데이터가 변경되고 있지만 차트가 표시되지 않습니다.

이 에러도 표시된다.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);

그리고 나는 그것에 만족하지 않는다.

문제는 라벨을 업데이트하지 않는다는 것입니다.라벨 배열에 10개의 항목을 정의합니다.이것은 10개의 데이터 엔트리에 대해 기능합니다.

데이터 배열에 새 항목을 푸시할 경우 새 레이블도 추가해야 합니다.그렇지 않으면 chart.js가 이 오류를 발생시킵니다.

언급URL : https://stackoverflow.com/questions/43726342/vue-chart-js-component-does-not-render