在 vuejs 的 chartjs 中按下提交时更新数据

Question

我正在用 vuejs 创建一个显示数据的图表，我尝试再次更新 labels 但仍然无法正常工作。

在ChartjsComponentLineChart.vue中：

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

export default {
  extends: Line,
  props: {
    data: {
      type: Object,
      default: null,
    },
    options: {
      type: Object,
      default: null,
    },
    plugins: {
      type: Array,
      default: null,
    },
    styles: {
      type: Object,
      default: null,
    },
  },
  mounted() {
    this.renderChart(this.data, this.options, this.plugins, this.styles)
  },
}
</script>

在report.vue

 <b-card-body>
    <chartjs-component-line-chart
      :height="400"
      :data="data"
      :options="options"
      :plugins="plugins"
    />
  </b-card-body>

 <b-button
    variant="primary"
    class="btn-tour-finish"
    @click="submitData"
    >Submit
</b-button>



data() {
  return: {
     data: {
        labels: [],
        datasets: [
          {
            data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
            label: "Supper",
            borderColor: "#3e95cd",
          },
        ],
      },
      options: {
        title: {
          display: true,
          text: "Report",
        },
        responsive: true,
        maintainAspectRatio: false,
      },
  }
},
created() {
    this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
  },
methods: {
   submitData() {
     this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
  }
}

图表有效。但是当我点击提交 (submitData()) 时 labels 没有更新。有没有办法在我单击时更新 'labels'。给我任何想法。谢谢

Answer 1

Chart.js本身不是响应式的，需要在数据变化时自己调用update方法。 vue-chartjs 正在接管这种开箱即用的非反应性行为。

要使其具有反应性，您需要根据 docs.

将 reactiveProp mixin 添加到 lineChart 组件中

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

也可以自己实现watcher，根据docs

自己调用chart.js的update方法

watch: {
  data () {
    this.$data._chart.update()
  }
}

Answer 2

我是这样修复的 successfully.In : v-if="loaded"

<b-card-body>
    <chartjs-component-line-chart
      v-if="loaded"
      :height="400"
      :data="data"
      :options="options"
      :plugins="plugins"
    />
  </b-card-body>

data() {
  return: {
     data: {
        loaded: false,
        labels: [],
        datasets: [
          {
            data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
            label: "Supper",
            borderColor: "#3e95cd",
          },
        ],
      },
      options: {
        title: {
          display: true,
          text: "Report",
        },
        responsive: true,
        maintainAspectRatio: false,
      },
  }
},
created() {
    this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
    this.loaded = true;
  },
methods: {
   submitData() {
     this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
     this.loaded = true;
  }
}

在 vuejs 的 chartjs 中按下提交时更新数据

Update data when pressing submit in chartjs in vuejs

vue.js

chart.js