通过更改数据重新渲染图表 Vue-chartjs

Posted 2023-02-16

【中文标题】通过更改数据重新渲染图表 Vue-chartjs

【英文标题】：Rerender chart via changing data Vue-chartjs

【发布时间】：2019-01-03 21:49:25

【问题描述】：

我正在尝试通过更改数据来更新我的图表。我试图这样做，按照这个例子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();
        
    

【问题讨论】：

我复制了你的代码然后创建了this fiddle，它看起来工作正常。 （只注释掉mixins: [reactiveProp]）

我发表了评论，但它不起作用。在你的小提琴中你写了“Vue.config.productionTip = false”，也许我应该使用这个字符串，如果是的话我应该在哪里写？第二个问题，也许我应该将我的 Bar.js 重写为 vue 组件，因为现在它是简单的 js 文件？

【参考方案1】：

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

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