javascript - 在 Vuejs 应用程序上重绘 Highcharts

Question

我正在构建一个小型养老金计算器，我想根据用户当前和退休年龄显示养老金 jar 的值(value)。

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

这工作得很好，但在模型更改时无法让 Highcharts 重绘图表时出现问题。

redrawChart 方法触发，但图表保持不变，控制台告诉我 Chart.redraw 不是函数。

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();
        }
    }
})

这是 fiddle https://jsfiddle.net/stevieg_83/naLqzunz/11/

感谢任何帮助。

Answer 1

请看这个工作 fiddle

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);
    }
  },