javascript - 为什么这个 ChartJS 图表没有被加载？ (使用Vue.js)

Question

这是我的 Chartjs 组件，我正在尝试从后端传递两个数组。不知何故，Vue.js 获取了 Vue 中的数组，但它不显示任何内容。我对 Vue 很陌生，所以请耐心等待。

Chartjs.vue

<template>
  <div class="main-content">
    <div class="page-header">
      <h3 class="page-title">Chart JS</h3>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Charts</a></li>
        <li class="breadcrumb-item active">Chart JS</li>
      </ol>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <h6>Chartjs</h6>
          </div>
          <div class="card-body">
            <div class="mb-4">
              <h5 class="section-semi-title">
                Line Chart
              </h5>
              <line-chart
                :labels='["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]'
                :values='values'
              />
            </div>
            <div class="mb-4">
              <h5 class="section-semi-title">
                Bar Chart
              </h5>
              <bar-line-chart
                :labels='["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]'
                :values='values'
                :valuesline='valuesline'
              />
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
import LineChart from '../../../components/chartjs/LineChart.vue'
import BarChart from '../../../components/chartjs/BarChart.vue'
import BarLineChart from '../../../components/chartjs/BarLineChart.vue'
import PieChart from '../../../components/chartjs/PieChart.vue'
import DoughnutChart from '../../../components/chartjs/DoughnutGraph.vue'

export default {
  components: {
    LineChart,
    BarChart,
    BarLineChart,
    PieChart,
    DoughnutChart,
    values:[],
    valuesline:[]
  },
  methods: {
    async fetchBarChartData ({ anio, sort }) {
      await axios.get(`/api/ingresos-por-mes/${anio}`).then(res=>{
        this.values=res.data.qty;
        this.valuesline=res.data.perc;
       });
    }
  },
  mounted() {
      this.fetchBarChartData({anio:2018});
  },
  data () {
    return {
      pieAndDoughtnut: {
        labels: ['Red', 'Blue', 'Yellow'],
        data: [300, 50, 100],
        bgColors: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56'
        ],
        hoverBgColors: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56'
        ]
      },
      values: this.values,
      valuesline: this.valuesline
    }
  }
}
</script>

BarLineChart.vue

<template>
  <div class="graph-container">
    <canvas id="graph" ref="graph"/>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  props: {
    labels: {
      type: Array,
      require: true,
      default: Array
    },
    values: {
      type: Array,
      require: true,
      default: Array
    },
    valuesline: {
      type: Array,
      require: true,
      default: Array
    }
  },

  mounted () {
    let context = this.$refs.graph.getContext('2d')
    let options = {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      }
    }

    let data = {
      labels: this.labels,
      datasets: [
        {
          label: 'My First dataset',
          backgroundColor: 'rgba(79, 196, 127,0.2)',
          borderColor: 'rgba(79, 196, 127,1)',
          borderWidth: 1,
          hoverBackgroundColor: 'rgba(79, 196, 127,0.4)',
          hoverBorderColor: 'rgba(79, 196, 127,1)',
          data: this.values
        },
        {
          label: 'My First dataset',
          data: this.valuesline,
          type: 'line'
        }
      ]
    }

    this.myBarChart = new Chart(context, {
      type: 'bar',
      data: data,
      options: options
    })
  },

  beforeDestroy () {
    this.myBarChart.destroy()
  }
}
</script>

<style scoped>
.graph-container {
  height: 300px;
}
</style>

奇怪的是，如果我在将参数传递给较低组件时犯了错误。例如:

<line-chart
                :labels='["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]'
                :values='values.data'
              />

将“.data”添加到值会破坏该组件，但允许其他组件加载下面的图表。

过去有人曾经处理过这个问题吗？我正在使用在 laraspace.in 上找到的仪表板，以防万一。

编辑:我已将其添加到代码和框中，以便您可以更轻松地帮助我。

https://codesandbox.io/embed/vue-template-x4z7b

编辑 2:设法使其与沙箱中的本地值一起工作，但不知何故，当调用 api 时，它在本地不起作用。

Answer 1

抱歉:有关如何获取异步数据并将其集成到应用程序中的 vuejs 文档并不是最好的。我希望他们能够通过更多示例对这里的最佳实践更加有自己的看法。

您的问题:依赖于异步数据的组件

在进行异步 api 调用时，this.values 是一个空数组(this.values.data 在 api 调用响应之前不存在)。在数据返回之前，vue 创建子组件，该子组件使用空值数组在其中创建图表，从而产生空白图表。您必须等到数据加载后才能创建子组件(以及图表)。那么我们该如何做到这一点呢？

解决方案:条件组件渲染

1. 在创建的钩子(Hook)中获取数据，而不是在安装的钩子(Hook)中获取数据。 原因:尽早请求数据性能更高，请参阅:https://v2.vuejs.org/v2/guide/instance.html
2. 在数据响应时，将该数据保存到您的 vue 组件中。 原因:您需要该数据，请参阅:https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#ad
3. 保存时，使用变量 this.loaded = true 向您的 html 发出数据已准备就绪的信号，并在任何内容上使用 v-if="loaded"依赖于该数据的子组件，请参阅:https://v2.vuejs.org/v2/guide/conditional.html

这是一个工作代码沙箱，其中包含复制您的更改的虚拟 API 调用:https://codesandbox.io/s/vue-template-4b3lm

所有更改均针对 Chartjs.vue 文件进行。

我看到你犯的一些其他错误:

• 在组件部分声明变量
• 在太多地方多次设置 this.values。只需在数据中声明一次，然后根据需要进行设置即可。

解决此问题的其他一些方法:

• 在子组件中使用观察器而不是v-if:当数据传入时，重新渲染组件内的图表(而不是使用 v-if 延迟整个组件)(任何时候 props 改变)。
• 使用vuex