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

vue-chartjs如何加载数据

1 个答案: