Los gráficos chartjs-vue están vacíos

1

Estoy siguiendo ejemplos para hacer un gráfico de prueba y el gráfico se representa, pero está en blanco con datos ficticios.

ingrese la descripción de la imagen aquí

Mi primer pensamiento es que tal vez no se estén pasando opciones para las líneas, pero con cualquier otro tipo de gráfico es lo mismo que si dataCollectionno se estuviera completando. Soy muy nuevo en Vue (pocas horas), así que tal vez tenga algo que ver con no actualizar el estado.

Languages.js

import { Line, mixins } from 'vue-chartjs'
//const { reactiveProp } = mixins

export 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>
2

Esto se debe a que está llamando al fillData()método en su gancho montado. Su gráfico se renderiza con un objeto de datos vacío.

Y los datos se completan después de que se renderiza el gráfico. Y como chart.js no es reactivo, tiene un gráfico vacío.

Soluciones:

  • Pase un objeto de datos completo al gráfico en lugar de usar el fillDatamétodo
  • O agrega el reactivePropmixin
1

De hecho, fue porque no se estaban pasando opciones para las líneas de cuadrícula. El ejemplo que estaba siguiendo asume que ya tiene sus opciones configuradas donde yo no las tenía.

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

}

ingrese la descripción de la imagen aquí

0

Llame a su fillData()método en created(){..here...}lugar de mounted(){}en su StatsSection.vue resolverá su problema. Createdse llamará antes de montar, por lo que su variable de recopilación de datos no será nula la primera vez.