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

Question

在我的模板中，我有

<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 渲染堆积条形图时如何正确实现这一点？

Answer 1

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

但是，主要问题似乎是您的 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 调用 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
  })
})

此外，请确保您的 URL 在您的实际代码中是不同的且正确的。