在 Vuejs 应用程序上重绘 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();
        }
    }
})

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

在 Vuejs 应用程序上重绘 Highcharts

Redraw Highcharts on Vuejs app

javascript

highcharts

vue.js

vue-component

vuejs2