在Vuejs app上重绘Highcharts

Question

我正在建立一个小养老金计算器，我想根据用户当前和退休年龄显示养老金罐的价值。

我希望获取用户的数据，绑定到Vue模型的数字字段，然后根据该数据计算底池的值。

这样可以正常运行，但是当模型发生变化时，无法让Highcharts重绘图表。

redrawChart方法触发，但图表保持不变，控制台告诉我Chart.redraw is not a function 。

Redraw是Highcharts API的一个选项，因此不确定我失败的地方。

这是标记：

<div id="app">
 <input type="number" min="55" v-model.number="age"  v-on:change="redrawChart">{{ age }}
 <br>
<input type="number" min="1" max="1000000" v-model.number="currentPensionValue" v-on:change="redrawChart">{{ currentPensionValue }}
<br>
<input type="number" min="56" v-model.number="retireAge"  v-on:change="redrawChart">{{ retireAge }}
<br>

<Chart :data="data" :steven="steven" :age-pot-value="agePotValue"></Chart>

以及相关的Vue代码

const Chart = Vue.component('Chart', {
    props: ['data', 'steven', 'agePotValue'],
    template: `
    <div>
        <p>{{ data }}</p>

        <h1>{{ steven }}</h1>
        <h1>{{ agePotValue }}</h1>
        <div id="thechart"></div>
    </div>
    `,
    mounted() {
        var highchartsOptions = {
            chart: {
                type: 'area',
                renderTo: 'thechart'
            },
            credits: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            title: {
                text: ''
            },
            xAxis: {
                allowDecimals: false,
                title: {
                    text: 'Age'
                }
            },
            yAxis: {
                title: {
                  text: 'Pot Value'
                },
                labels: {
                    formatter: function () {
                    return '£' + this.value / 1000 + 'k';
                  }
                },
                opposite: true,
            },
            plotOptions: {},
            series: [{
            name: '',
            data: this.agePotValue
        }],
            credits: false
        }
            Highcharts.chart(highchartsOptions)
    }
});

new Vue({
    el: '#app',
    data: {
        age: 55,
        currentPensionValue: 22000,
        retireAge: 87
    },
    computed: {
        data() { return (this.currentPensionValue) / (this.retireAge - this.age) },
        steven() { return this.data * 1.4 },
        agePotValue() {
      var vm = this;
      var agePotValue = [[vm.age, (vm.data)], [vm.retireAge, vm.currentPensionValue]];

      return agePotValue;
    }
    },
    components: { Chart },
    methods: {
        redrawChart() {
      Chart.redraw();
        }
    }
})

这是小提琴https://jsfiddle.net/stevieg_83/naLqzunz/11/

任何帮助赞赏。

Answer 1

请看这个工作小提琴

https://jsfiddle.net/naLqzunz/12/

我对你的方法做了一些改变，组件将关注变化

  watch:{
    data(){this.redraw()},
    steven(){this.redraw()},
    agePotValue(){this.redraw()},
  },

和重绘方法只是更新图表数据（自动触发重绘）

  methods:{
    redraw(){
        this.chart.series[0].setData(this.agePotValue,true);
    }
  },