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

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

vue-chartjs如何加载数据

vue-chartjs how to load data

vue.js

chart.js

vue-chartjs