带有 axios 的 Vue-chartjs 用于堆叠条形图答案

【问题标题】：Vue-chartjs with axios for stacked bar chart带有 axios 的 Vue-chartjs 用于堆叠条形图
【发布时间】：2021-07-10 08:35:50
【问题描述】：

在我的模板中，我有

<BarChart
  v-if="loaded"
  :data1="data1"
  :data2="data2"
  :chart-labels="labels"
/>

对于脚本部分，我有

this.loaded = false
axios.get(`url`).then((response) => {
  this.data1 = response.data.xxx
  this.loaded = true
  axios.get(`url`).then((response) => {
    this.data2 = response.data.xxx
    this.loaded = true
  })
})

对于barchart vue，我有

export default {
  extends: Bar,
  props: {
      data1: {
        type: [Array, Object],
        required: false
      },
      data2: {
        type: [Array, Object],
        required: false
      },
      chartLabels: {
        type: Array,
        required: true
      }
    },
  mounted() {
    this.renderChart(
      {
        labels: this.chartLabels,
        datasets: [
          {
            label: "data1",
            backgroundColor: "#f87979",
            data: this.data1
          },
           {
            label: "data2",
            backgroundColor: "#6bb6ef",
            data: this.data2
          },
        ],
      },
........

换句话说，我为data1调用了第一个axios，然后为data2调用了第二个axios。两者都设置 this.loaded=true; 但是，该图表仅显示第一个数据，而不是 data1 和 data2。我认为这是因为 this.loaded。

调用两个axios api渲染堆积条形图时如何正确实现？

【问题讨论】：

您确定可以将data1 和data2 作为道具吗？在尝试使用 API 响应之前，您是否尝试过使用静态数组？我的意思是：尝试获取 API，将数组写入data，然后看看它是否能像这样使用它。
是的，他们都可以获得数据1和2，但只能显示一个。（取决于我把 this.loaded = true 放在哪里）
你想用async/await重写它吗？多亏了它，IMO 会更容易理解。
感谢您的建议。它会产生不同的结果吗？
它将帮助您处理当前的回调地狱：callbackhell.com 因此，代码将不易出错且同时更具可读性。

标签： vue.js axios chart.js stacked-chart vue-chartjs

【解决方案1】：

我认为您对this.loaded = true 的看法是正确的。在对 data2 进行第二次 API 调用后尝试设置一次。

但是，主要问题似乎是您的 axios 调用中的拼写错误。您正在设置 data1 两次：

this.loaded = false
axios.get(`url`).then((response) => {
  this.data1 = response.data.xxx
  this.loaded = true
  axios.get(`url`).then((response) => {
    this.data1 = response.data.xxx
    this.loaded = true
  })
})

将第二个 axios get 调用改为 data2：

this.loaded = false
axios.get(`url`).then((response) => {
  this.data1 = response.data.xxx
  //this.loaded = true
  axios.get(`url`).then((response) => {
    this.data2 = response.data.xxx
    this.loaded = true
  })
})

另外，请确保您的网址在实际代码中不同且正确。

【讨论】：

是的，我已经尝试过你的代码的第二部分，如果你不在data1的axios中调用this.loaded = true，它只会显示data2。