Javascript Vue Vue chartjs在一个页面上加载相同数据的两个图表

我正在使用vue chartjs尝试在一个vue页面上创建两个图表。其中一个图表是条形图，另一个是饼图。我为两张图表中的每一张创建了一组数据，它们相似但不相同。问题是，当图形构建时，它们似乎反映了相同的数据集。我对vue还比较陌生，对chartjs也很陌生，但我的直觉是问题在于我的html中的这些行

<reactive :chart-data="datacollection"></reactive> 
<doughnut :chart-data="doughnutData"></doughnut>

然而，我不知道如何才能改变这一点。如果有人能为我指出正确的方向，告诉我该如何解决这个问题，那将是令人惊讶的。提前谢谢

这是我的密码

<template>
  <div class="home">
    <section class="container">
      <div class="columns">
        <div class="column">
          <h2 class="graph-title">Monthly Expenses</h2>
          <reactive :chart-data="datacollection"></reactive>
        </div>
      </div>
    </section>

    <section class="container">
      <div class="doughnut">
        <h2 class="graph-title">Monthly Goals</h2>
          <doughnut :chart-data="doughnutData"></doughnut>
      </div>
    </section>
  </div>
</template>
    
<script>
import axios from 'axios';
import Reactive from '@/components/Reactive'
import Doughnut from '@/components/Doughnut'
export default {
  name: 'HomePage',
  components: {
    Reactive,
    Doughnut
  },
  data() {
    return {
      income: this.$root.$data.user.income,
      expenses: [],
      expense: null,
      datacollection: null,
      doughnutData: null,
      actualColorGood: '#5AAA95',
      actualColorBad: '#BB9F06',
    }
  },
  created () {
    this.getExpenses();
  },
  methods: {
    fillData () {
      var labelsTemp = [];
      var dataMaxTemp = [];
      var dataActualTemp = [];
      var totalSpent = 0;
      var colors = [];
      for(var i = 0; i < this.expenses.length; ++i) {
        labelsTemp.push(this.expenses[i].name);
        dataMaxTemp.push(this.expenses[i].max);
        dataActualTemp.push(this.expenses[i].actual);
        if(this.expenses[i].actual != undefined) {
          totalSpent = parseInt(totalSpent) + parseInt(this.expenses[i].actual);
        }
        if( parseInt(this.expenses[i].actual) > parseInt(this.expenses[i].max) ) {
          colors.push(this.actualColorBad);
        }
        else {
          colors.push(this.actualColorGood);
        }
      }
      labelsTemp.push('Total Income V.S. Total Expenses');
      dataMaxTemp.push(this.income);
      dataActualTemp.push(totalSpent);
      if( parseInt(this.income) < parseInt(totalSpent) ) {
        colors.push(this.actualColorBad);
      }
      colors.push(this.actualColorGood);

      this.datacollection =
      {
        labels: labelsTemp,
        datasets: [
          {
            label: 'Max Monthly Limit',
            backgroundColor: '#087F8C',
            data: dataMaxTemp
          },
          {
            label: 'Actual Spent This Month',
            backgroundColor: colors,
            data: dataActualTemp
          }
        ]
      }
      //doughnut graph
      var doughnutLabels = labelsTemp;
      var doughnutMax = dataMaxTemp;
      doughnutLabels.pop();
      doughnutMax.pop();
      this.doughnutData =
      {
        labels: doughnutLabels,
        datasets: [
          {
            backgroundColor: '#087F8C',
            data: doughnutMax
          }
        ]
      }
    },
   async getExpenses() {
      try {
        let response = await axios.get("/api/expense");
        this.expenses = response.data;
        this.fillData();
      } catch (error) {
        console.log(error);
      }
    },
  }
}
</script>

每月费用
每月目标
从“axios”导入axios；
从“@/components/Reactive”导入反应式
从“@/components/Doughnut”导入甜甜圈
导出默认值{
名称：'主页'，
组成部分：{
反应性，
炸圈饼
},
数据（）{
返回{
收入：此.$root.$data.user.income，
费用：[]，
费用：空，
数据收集：null，
甜甜圈数据：null，
实际颜色良好：“#5AAA95”，
实际颜色错误：“#BB9F06”，
}
},
创建（）{
这个。getExpenses（）；
},
方法：{
fillData（）{
var labelsTemp=[]；
var dataMaxTemp=[]；
var dataActualTemp=[]；
var TotalExplored=0；
var颜色=[]；
对于（var i=0；iparseInt（this.expenses[i].max））{
颜色。按（这个。实际颜色不好）；
}
否则{
颜色。推（此。实际颜色良好）；
}
}
labelsTemp.push（“总收入vs.总费用”）；
dataMaxTemp.push（此收入）；
dataActualTemp.push（总花费）；
if（parseInt（this.income）

这里是两个使用的组件，我不认为它们是相关的，但在案件中的JU

<script>
  import { Bar, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins
  export default {
    extends: Bar,
    mixins: [ reactiveProp ],
    data () {
      return {
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [ {
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: true,
          },
          responsive: true,
          maintainAspectRatio: false,
        }
      }
    },
    mounted () {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

从“vue chartjs”导入{Bar，mixins}
常量{reactiveProp}=mixins
导出默认值{
延伸：酒吧，
mixins:[reactiveProp]，
数据（）{
返回{
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
},
网格线：{
显示：真
}
}],
xAxes:[{
网格线：{
显示：假
}
}]
},
图例：{
显示：对，
},
回答：是的，
MaintaintAspectRatio:false，
}
}
},
挂载（）{
this.renderChart（this.chartData，this.options）
}
}

从“vue chartjs”导入{Doughnut，mixins}
常量{reactiveProp}=mixins
导出默认值{
扩展：甜甜圈，
mixins:[reactiveProp]，
数据（）{
返回{
选项：{
图例：{
显示：对，
},
回答：是的，
MaintaintAspectRatio:false，
}
}
},
挂载（）{
this.renderChart（this.chartData，this.options）
}
}

<script>
  import { Doughnut, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins
  export default {
    extends: Doughnut,
    mixins: [ reactiveProp ],
    data () {
      return {
        options: {
          legend: {
            display: true,
          },
          responsive: true,
          maintainAspectRatio: false,
        }
      }
    },
    mounted () {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>