当状态改变时如何更新图表? [英] How to update chart when state changes in vue?

查看:255
本文介绍了当状态改变时如何更新图表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经使用vuex将chartData映射到state属性。我想做的是在更新数据集时更新图表。我听说可以用mixin或观察程序来完成,但是我不知道如何实现。我知道mixins会创建一个观察程序,但我不知道在vuex中如何使用它。

I've mapped chartData to a state property using vuex. What I'd like to do is update the chart when a dataset is updated. I have heard that it can be done with mixins or watchers but I don't know how to implement it. I understand that mixins creates a watcher but I don't know how it is used within vuex.

Chartline.vue:

Chartline.vue:

<script>
import { Line } from 'vue-chartjs'
import { mapState } from 'vuex'

export default {
  name: 'ChartLine',
  extends: Line,
    computed:{
      ...mapState(['charData','options'])
    },
    methods:{
      regraph: function(){
        this.renderChart(this.charData,this.options);
      }
    },
    mounted () {
      this.regraph();
    },
    watch: {
    }
}
</script>

Pension.vue:

Pension.vue:

<template>
  <div id='pension' class="navbarPar">
    <ChartLine/> 
  </div>
</template>

<script>
import ChartLine from '../components/ChartLine.vue';
import { mapState } from 'vuex'
//import { Line } from 'vue-chartjs'

export default {
  name: 'Pension',
  components: {
    ChartLine,
  },
  data(){
    return{
      form: {
        ...
      },
      var:{
        ...
      },
    }
  },
  methods: {

    calculate: function(indice){
      ...
      //modify data of mapState
      //after here, I want to rerender chart
      }
  },
  computed:{
    ...mapState(['charData','options']),

  },
}
</script>


推荐答案

如果您使用的是vue-chartjs,该库

If you are using vue-chartjs, the library has its own way to handle reactive data in charts:

// ChartLine.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'], // passed from the parent
  mounted () {
    // this.chartData is created in the mixin (pass it as any prop with :chart-data="data").
    this.renderChart(this.chartData, this.options)
  }
}

现在Pension.vue文件

Now the Pension.vue file

// Pension.vue
<template>
  <div id='pension' class="navbarPar">
    <ChartLine :chart-data="charData" :options="options" /> 
  </div>
</template>

<script>
  import ChartLine from '../components/ChartLine';
  import { mapState } from 'vuex'

  export default {
    name: 'Pension',
    components: {
      ChartLine,
    },
    data(){
      return{
        form: {
          ...
        },
        var:{
          ...
        },
      }
    },
    methods: {
      calculate: function(indice){
      ...
      //modify data of mapState
      //after here, I want to rerender chart
      }
    },
    computed:{
      ...mapState(['charData','options']),
    },
  }
</script>

您可以在此处了解更多信息: https://vue-chartjs.org/guide/#updating-charts
有一些警告

You can read more about it here: https://vue-chartjs.org/guide/#updating-charts, there are some caveats

这篇关于当状态改变时如何更新图表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆