javascript - Redraw Highcharts on Vuejs app - Stack Overflow

admin管理员组

文章数量:1355542

I'm building a little pension calculator where I want to show the value of the pension pot depending on the users current and retirement age.

I'm looking to take the user's data, number fields bound to a Vue model and then puting the value of the pot based on that data.

That works just fine but having an issue with not being able to have Highcharts redraw the chart when the models change.

The redrawChart method fires but the chart stays the same with the console telling me Chart.redraw is not a function.

Redraw is an option for the Highcharts API so not sure where I'm failing.

Here's the markup:

<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>

and the associated Vue code

const Chart = Vueponent('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
    },
    puted: {
        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;
    }
    },
    ponents: { Chart },
    methods: {
        redrawChart() {
      Chart.redraw();
        }
    }
})

Here's the the fiddle /

Any help appreciated.

I'm building a little pension calculator where I want to show the value of the pension pot depending on the users current and retirement age.

I'm looking to take the user's data, number fields bound to a Vue model and then puting the value of the pot based on that data.

That works just fine but having an issue with not being able to have Highcharts redraw the chart when the models change.

The redrawChart method fires but the chart stays the same with the console telling me Chart.redraw is not a function.

Redraw is an option for the Highcharts API so not sure where I'm failing.

Here's the markup:

<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>

and the associated Vue code

const Chart = Vue.ponent('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
    },
    puted: {
        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;
    }
    },
    ponents: { Chart },
    methods: {
        redrawChart() {
      Chart.redraw();
        }
    }
})

Here's the the fiddle https://jsfiddle/stevieg_83/naLqzunz/11/

Any help appreciated.

• javascript
• highcharts
• vue.js
• vue-ponent
• vuejs2

Share Improve this question Follow asked Jan 5, 2017 at 19:54 Steven GrantSteven Grant 1,32544 gold badges1515 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Please see this working fiddle

https://jsfiddle/naLqzunz/12/

I make a little change on your approach, ponent will be watching for changes

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

and redraws method just update chart data (that fires redraw automatically)

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

本文标签： javascriptRedraw Highcharts on Vuejs appStack Overflow