vue.js - vue-chartjs如何加载数据

Question

线图.js

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props:['chart']
    mounted () {
      this.renderChart({
        labels: ['1','2','3','4','5','6','7'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#F64A32',
            data: this.chart
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})
    }
}

我使用 props 传递数据 example.vue

<template>
<line-chart :width="370" :height="246" :chart="chartdata"></line-chart>
</template>
<script>
import LineChart from './vue-chartjs/LineChart'
export default {
components: {
      LineChart
    },
},
data(){
 return{
   chartdata:[]
  }
}
methods:{
  getdata(){
    this.chartdata=[10,20,30,40,50]
    }
}

</script>

当我单击 getdata() 时，我认为它已传递给 Linechart.js，但为什么图表没有更新？还是空的

Answer 1

如果你想动态改变数据，你要么需要reactiveMixin http://vue-chartjs.org/#/home?id=reactive-data

或者您必须自己触发图表更新。

这是因为，即使 Vue.js 是响应式的，Chart.js 本身也不是。

如果你想更新你的图表，只需在你的 LineChart.js 组件中添加一个观察者并观察图表的变化。然后调用 .update()

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props:['chart']
  watch: {
    chart () {
      this.$data._chart.update()
    }
  }
  mounted () {
      this.renderChart({
        labels: ['1','2','3','4','5','6','7'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#F64A32',
            data: this.chart
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})
    }
}