vue-chartjs如何加载数据

Question

Linechart.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})
    }
}

我使用道具传递数据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})
    }
}