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