鍍金池/ 問(wèn)答/HTML5  HTML/ Vue-chartjs載入數(shù)據(jù)

Vue-chartjs載入數(shù)據(jù)

Linechart.js

import { Line } from 'vue-chartjs'

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

example.vue

<template>
<line-chart :width="370" :height="246"></line-chart>
</template>
<script>
import LineChart from './vue-chartjs/LineChart'
export default {
components: {
      LineChart
    },
},
    methods:{
      getdata(){
        var user_id = this.getcookies('user_id');
          this.$http.post('http://example.com',{
            //post body
            user_id:user_id
          },{headers:{
            'datatoken':data_token,            
          }}).then((data)=>{
            //success
            //得到的數(shù)據(jù)假設(shè)為data 將data賦值給Linechart.js中的data
          })
        }
    }

</script>

假設(shè)post的返回值是數(shù)組data，我現(xiàn)在想賦值給Linechart.js中的data變量應(yīng)該怎么做呢？

回答
編輯回答
筱饞貓

在Linechart.js寫(xiě)props

    props: {
        Data: {
          type: Array,
          default: []
        },
    }

在example.vue傳數(shù)據(jù)過(guò)去

<line-chart 
    :width="370" 
    :height="246"
    :Data="data">
</line-chart>

這樣Linechart.js就能拿到數(shù)組

2017年4月5日 01:10