Vuejs 앱에서 하이차트 다시 그리기

Vuejs 앱에서 하이차트 다시 그리기

현재, 퇴직 연령에 따른 연금 냄비의 가치를 나타내는 작은 연금 계산기를 만들고 있습니다.

사용자의 데이터, 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/이 있습니다.

아무쪼록 잘 부탁드립니다.

이 동작하는 바이올린을 봐 주세요.

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

접근 방식을 조금만 변경하면 구성 요소가 변화를 주시하게 됩니다.

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

redraw 메서드는 차트 데이터만 업데이트합니다(자동으로 redraw 실행).

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

언급URL : https://stackoverflow.com/questions/41493581/redraw-highcharts-on-vuejs-app