Vuejsアプリのハイチャートを再描画

Question

私は年金の価値をユーザーの現在および退職年齢に応じて表示したい小さな年金計算機を構築しています。

私はユーザーのデータを取得し、数値フィールドをVueモデルにバインドし、そのデータに基づいてポットの値を計算します。

これは問題なく動作しますが、モデルが変更されたときにチャートを再描画することができないという問題があります。

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

火災こと（単にグラフのデータを更新し、私はあなたのアプローチにはほとんど変更を加える、部品が変更

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

を監視および方法を再描画されます。この作業フィドル

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

を参照してください。自動的に再描画）

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