第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

chartjs-vue 圖表為空

chartjs-vue 圖表為空

千萬里不及你 2021-06-01 12:43:00
我正在按照示例制作測試圖表并呈現(xiàn)圖表,但它是空白的,帶有虛擬數(shù)據(jù)。我的第一個想法是可能沒有為線條傳遞選項(xiàng),但是對于其他所有類型的圖表,它dataCollection就像沒有被填充一樣。我對 Vue 很陌生(幾個小時)所以也許它與不更新狀態(tài)有關(guān)?語言.jsimport { Line, mixins } from 'vue-chartjs'//const { reactiveProp } = mixinsexport default {  extends: Line,  //mixins: [reactiveProp],  props: ['options'],  mounted () {    // this.chartData is created in the mixin.    // If you want to pass options please create a local options object    this.renderChart(this.chartData, this.options)  }}StatsSection.vue<template><!-- Stats Section --><div class="stats-wrapper" style="margin: 15px 0; padding: 15px;">  <languages :chart-data="datacollection"></languages></div></template><script>import Languages from './charts/Languages.js'export default {  components: {    Languages  },  data() {    return {      datacollection: {}    }  },  mounted() {    this.fillData()  },  methods: {      fillData () {        this.datacollection = {          labels: [80, 12],          datasets: [            {              label: 'Data One',              backgroundColor: '#f87979',              data: [40, 60]            }, {              label: 'Data One',              backgroundColor: '#f87979',              data: [72, 43]            }          ]        }      }    }}</script>
查看完整描述

3 回答

?
繁華開滿天機(jī)

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超4個贊

這確實(shí)是因?yàn)闆]有為網(wǎng)格線傳遞任何選項(xiàng)。我下面的例子假設(shè)你已經(jīng)在我沒有的地方設(shè)置了你的選項(xiàng)。


語言.js


import {

  Bar,

  mixins

} from 'vue-chartjs'


export default {

  extends: Bar,

  mixins: [mixins.reactiveProp],

  props: ['chartData', 'options'],

  data() {

      return {

          options: { 

              scales: {

                  yAxes: [{

                      ticks: {

                          beginAtZero: true

                      },

                      gridLines: {

                          display: true

                      }

                  }],

                  xAxes: [{

                      gridLines: {

                          display: false

                      }

                  }]

              },

              legend: {

                  display: true

              },

              responsive: true,

              maintainAspectRatio: false

          }

      }

  },

  mounted() {

      this.renderChart(this.chartdata, this.options)

  }


}

http://img1.sycdn.imooc.com//60b88bc50001166609330943.jpg

查看完整回答
反對 回復(fù) 2021-06-03
?
尚方寶劍之說

TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個贊

在 StatsSection.vuefillData()created(){..here...}而不是mounted(){}在 StatsSection.vue 中調(diào)用您的方法將解決您的問題。Created將在掛載之前調(diào)用,因此您的數(shù)據(jù)收集變量在第一次不會為空。


查看完整回答
反對 回復(fù) 2021-06-03
  • 3 回答
  • 0 關(guān)注
  • 359 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號