javascript - Graph does not update automatically when the data is changed

Question

I am having trouble with my charts. They don't get updated even though the data is changed.

I am currently using Meteor framework with chart.js. I am using only Reactive variables.

Template.xyz.onCreated(function () {
this.budget = new ReactiveVar();
this.budget_used_check = new ReactiveVar();
this.budget_used = new ReactiveVar();
this.profit = new ReactiveVar();
this.budget.set(Template.instance().data.project.calculated_budget)
})
Template.xyz.onRendered({
const instance = this
instance.autorun(() => {
    var color_budget = ["#1f497b", "#FF0000", "#48c774"];
    this.budget_used_check.set(Template.instance().data.project.planned_int_cost * Template.instance().data.project.usedHours);
    this.budget_used.set(Template.instance().budget_used_check.get() + parseFloat(expense(Template.instance().data.expenses, 'internal_amount')));
    this.profit.set(this.budget.get() - this.budget_used.get());
    var context = '.expenses-graph';
    var budget_ctx = $(context);
    var budget_chart = new Chart(budget_ctx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [Template.instance().budget.get(), Template.instance().budget_used.get(), Template.instance().profit.get()],
                backgroundColor: color_budget
            }],
            labels: [TAPi18n.__("budget"), TAPi18n.__("expense"), TAPi18n.__("profit")],
        },
        options: {
            legend: {
                onClick: (e) => e.stopPropagation()
            }
        }
    });
    console.log(Template.instance().profit.get(),"inside autorun");
    
  })
})

Answer 1

等待大神解答