Question

我正在尝试通过更改数据来更新图表。我尝试通过遵循此示例Vue Chart.js - Chart is not updating when data is changing来做到这一点，但是我遇到了一些问题。首先，开发人员工具中的这些错误1.缺少必需的属性：“ chartData”。 2.计算的属性“ chartData”已经定义为prop。我是该框架的新手，如果您不将此问题标记为重复，并且您给我一些解决此问题的提示，我将不胜感激。

<template>
 <bar-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"></bar-chart> // Bar chart
 <button class="click" @click="changeUi">Change chart</button>// Button 
</template>
<script>
 import Bar from '../Charts/Bar'
   export default {
     data(){
       return{
         dataChart: [44, 49, 48, 49, 55, 47, 43, 55, 53, 43, 44, 51]// data displayed by default   
    },
    components:{
      'bar-chart' : Bar
    },
    methods:{
      changeUi(){
        this.dataChart = [36, 46, 33, 35, 44, 36, 46, 43, 32, 65, 15, 46];// this data should be displayed after clicking button
      }
    }
  }
}
</script>

// Bar.js
import {Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;

export default {
    extends: Bar,
    mixins: [reactiveProp],
    props: ["data", "options"],// recieving props
    mounted() {
        this.renderBarChart();
    },
    computed: {
        chartData: function() {
            return this.data;
        }
    },
    methods: {
      renderBarChart: function() {
         this.renderChart({
           labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
             datasets: [{
               label: 'Data One',
               backgroundColor: '#505464',
               hoverBackgroundColor: '#2196f3',
               data: this.chartData
                        }
                    ]
                },
                { responsive: true, maintainAspectRatio: false }
            );
        }
    },
    watch: {
        data: function() {
            this._chart.destroy();
            this.renderBarChart();
        }
    }
}

Answer 1

https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js#L89-L92

chartData 被定义为 mixin.reactiveProp 中的一个对象

通过更改数据Vue-chartjs重新呈现图表

1 个答案: