亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

chartjs-vue 圖表為空

chartjs-vue 圖表為空

千萬里不及你 2021-06-01 12:43:00
我正在按照示例制作測試圖表并呈現圖表,但它是空白的,帶有虛擬數據。我的第一個想法是可能沒有為線條傳遞選項,但是對于其他所有類型的圖表,它dataCollection就像沒有被填充一樣。我對 Vue 很陌生(幾個小時)所以也許它與不更新狀態有關?語言.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 回答

?
繁華開滿天機

TA貢獻1816條經驗 獲得超4個贊

這確實是因為沒有為網格線傳遞任何選項。我下面的例子假設你已經在我沒有的地方設置了你的選項。


語言.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

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

TA貢獻1788條經驗 獲得超4個贊

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


查看完整回答
反對 回復 2021-06-03
  • 3 回答
  • 0 關注
  • 363 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號