【问题标题】：Why is this chartjs graph not being loaded? (Using Vue.js)为什么这个chartjs图表没有被加载？（使用 Vue.js）
【发布时间】：2020-01-02 03:53:33
【问题描述】：

这是我的 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 时不知何故它在本地不起作用。

【问题讨论】：

你能把它扔进codesandbox.io/s/vue吗？另外，请确保您使用的是 vue devtools - 它对调试有很大帮助。
我现在做不到，但我正在使用 devtools，这就是为什么我知道两个组件中都填充了数组。
codesandbox.io/embed/vue-template-x4z7b
我对这个问题做了两次更新。
将很快发布答案，但关键是在进行异步 api 调用时，值是空 []（values.data 不存在），然后您创建子组件并使用空数组在其中创建一个图表。您必须等到数据加载后才能使用上的 v-if 创建子组件，并且在数据部分中将值最初设置为 undefined，或者像现在一样立即创建子组件，但是每当值发生变化时（使用观察器），使用调用“new Chart()”重新渲染图表。在两者中，从组件部分中删除值。

标签： javascript vue.js chart.js

【解决方案1】：

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

你的问题：依赖异步数据的组件

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

解决方案：条件组件渲染

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

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

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

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

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

其他一些可以解决这个问题的方法：

在子组件中使用观察者而不是v-if：在数据进入时（任何时候道具发生变化）重新渲染组件内的图表（而不是用 v-if 延迟整个组件）。
使用 vuex

【讨论】：