Javascript 图表中没有'；t使用Axios显示我对API的调用中的数据

一段时间以来，我一直在尝试显示一个图形，其中包含来自axios API的数据。API上使用axios的get运行良好，但数据未显示在图形上。但是，我在教程之后在chart.js上加载了v-if=

有谁能帮我，因为我真的不明白

多谢各位

这是我的密码：

`<template>
  <div class="charts">
    <div class="row">
      <div class="flex md6 xs12">
        <va-card
          v-if ="loaded"
          class="chart-widget"
          :title="$t('charts.verticalBarChart')"
        >
          <va-chart :data="verticalBarChartData" type="vertical-bar"/>
        </va-card>
      </div>
      <div class="flex md6 xs12">
        <va-card
          class="chart-widget"
          :title="$t('charts.horizontalBarChart')"
        >
          <va-chart :data="horizontalBarChartData" type="horizontal-bar"/>
        </va-card>
      </div>
    </div>

    <div class="row">
      <div class="flex md12 xs12">
        <va-card
          class="chart-widget"
          :title="$t('charts.lineChart')"
        >
          <va-chart :data="lineChartData" type="line"/>
        </va-card>
      </div>
    </div>

    <div class="row">
      <div class="flex md6 xs12">
        <va-card
          class="chart-widget"
          :title="$t('charts.pieChart')"
        >
          <va-chart :data="pieChartData" type="pie"/>
        </va-card>
      </div>
      <div class="flex md6 xs12">
        <va-card
          class="chart-widget"
          :title="$t('charts.donutChart')"
        >
          <va-chart :data="donutChartData" type="donut"/>
        </va-card>
      </div>
    </div>
    <div class="row">
      <div class="flex md12 xs12">
        <va-card
          class="chart-widget"
          :title="$t('charts.bubbleChart')"
        >
          <va-chart :data="bubbleChartData" type="bubble"/>
        </va-card>
      </div>
    </div>
  </div>
</template>

```
<script>
var dataget
import { getLineChartData } from '../../../data/charts/LineChartData'
import { getBubbleChartData } from '../../../data/charts/BubbleChartData'
import { getPieChartData } from '../../../data/charts/PieChartData'
import { getDonutChartData } from '../../../data/charts/DonutChartData'
// import { getVerticalBarChartData } from '../../../data/charts/VerticalBarChartData'
import { getHorizontalBarChartData } from '../../../data/charts/HorizontalBarChartData'
import axios from 'axios'

```

```
export default {
  name: 'charts',
  data () {
    return {
      loaded : false,
      bubbleChartData: getBubbleChartData(this.$themes),
      lineChartData: getLineChartData(this.$themes),
      pieChartData: getPieChartData(this.$themes),
      donutChartData: getDonutChartData(this.$themes),
      verticalBarChartData: getVerticalBarChartData(this.$themes),
      horizontalBarChartData: getHorizontalBarChartData(this.$themes),
    }
  },
  methods: {
    refreshData () {
      this.lineChartData = getLineChartData(this.$themes)
    },
  },
  // Ajout
  async mounted () {
    this.loaded = false
    try {
      axios.get('http://localhost:8080/reading/_size?filter={"device":"Random-Integer-Device"}', {
        auth: {
          username: 'admin',
          password: 'secret'
        }
      })
      .then(function (response) {
        //console.log(response.data._size);
        dataget = response.data._size;
        console.log("SIZE :  "+ dataget)
      })
      this.loaded = true

    } catch (e) {
      console.error(e)
    }
  },
  // Ajout 
}

// this is a test 
const getVerticalBarChartData = (themes) => ({
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [
    {
      label: 'USA',
      backgroundColor: themes.primary,
      borderColor: 'transparent',
      data: null, 
    },
    {
      label: 'USSR',
      backgroundColor: themes.info,
      borderColor: 'transparent',
      // It doesn't work here for dataget value
      data: [dataget, 10, 22, 39, 15, 20, 85, 32, 60, 50, 20, 30],
    },
  ],
})
// This is a test 
</script>

<style lang="scss">
.chart-widget {
  .va-card__body {
    height: 550px;
  }
}
</style>
```

`
```
var数据获取
从“../../data/charts/LineChartData”导入{getLineChartData}
从“../../data/charts/BubbleChartData”导入{getBubbleChartData}
从“../../data/charts/PieChartData”导入{getPieChartData}
从“../../data/charts/DonutChartData”导入{getDonutChartData}
//从“../../data/charts/VerticalBarChartData”导入{getVerticalBarChartData}
从“../../data/charts/HorizontalBarChartData”导入{getHorizontalBarChartData}
从“axios”导入axios
```
```
导出默认值{
名称：'图表'，
数据（）{
返回{
加载：false，
bubbleChartData:getBubbleChartData（此.$themes），
lineChartData:getLineChartData（此.$themes），
pieChartData:getPieChartData（这是$themes），
donutChartData:getDonutChartData（此.$themes），
verticalBarChartData:getVerticalBarChartData（此.$themes），
horizontalBarChartData:getHorizontalBarChartData（此.$themes），
}
},
方法：{
刷新数据（）{
this.lineChartData=getLineChartData（this.$themes）
},
},
//阿约
异步装入（）{
this.loaded=false
试一试{
axios.get（）http://localhost:8080/reading/_size?filter={“设备”：“随机整数设备”}{
认证：{
用户名：“admin”，
密码：“机密”
}
})
.然后（功能（响应）{
//控制台.log（响应.data.\u大小）；
dataget=响应。数据。\u大小；
log（“大小：+dataget”）
})
this.loaded=true
}捕获（e）{
控制台错误（e）
}
},
//阿约
}
//这是一个测试
常量getVerticalBarChartData=（主题）=>({
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[
{
标签：“美国”，
背景颜色：themes.primary，
边框颜色：“透明”，
数据：空，
},
{
标签：“苏联”，
背景颜色：themes.info，
边框颜色：“透明”，
//对于dataget值，它在这里不起作用
数据：[数据获取，10,22,39,15,20,85,32,60,50,20,30]，
},
],
})
//这是一个测试
.图表小部件{
.va-卡体{
高度：550px；
}
}
```

问题在于，

axios.get

发出异步HTTP请求，并仅在变量

dataget

收到响应后（在函数内部）才为其赋值。但是，当变量

dataget

仍未定义时，将创建图表

将位于两个注释之间的整个代码块移动到下一代码行之后的函数，这是一个测试，应该可以工作

dataget = response.data._size;

---

问题在于，

axios.get

发出异步HTTP请求，并仅在变量

dataget

收到响应后（在函数内部）才为其赋值。但是，当变量

dataget

仍未定义时，将创建图表

将位于两个注释之间的整个代码块移动到下一代码行之后的函数，这是一个测试，应该可以工作

dataget = response.data._size;

---

顺便说一句，console.log（dataget）显示76576问题在VerticalBarChartDatatw上，console.log（dataget）显示76576问题在verticalBarChartData上