диаграммы чарджу-вюе пусты

Question

Я слежу за примерами, чтобы создать тестовую диаграмму и визуализировать диаграмму, но она пуста с фиктивными данными.

Моя первая мысль: возможно, опции не передаются для линий, но с любым другим типом диаграммы он такой же, как если бы dataCollection просто не заполнялся. Я очень новичок в Vue (несколько часов), так что, может быть, это как-то связано с отсутствием обновления состояния?

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>

Answer 1

Это потому, что вы вызываете метод fillData() в вашем подключенном хуке.Ваша диаграмма отображается с пустым объектом данных.

И данные заполняются после визуализации диаграммы.И поскольку chart.js не реагирует, у вас есть пустой график.

Решения:

• Вместо этого передайте заполненный объект данных в диаграмму, используя fillData method
• Или добавить reactiveProp mixin

Answer 2

Это действительно было, потому что не было передано ни одной опции для линий сетки.В приведенном ниже примере предполагается, что у вас уже есть настройки, которые у меня не были.

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

}