如何在Vuejs上下文中使用API获取图表数据

我是Vuejs新手，我希望通过从API获取数据而不是直接提供数据来提高代码的效率

这是我的密码：

导出默认值{
名称：'图表'，
数据：（）=>({
到达日期：[
1600934100.0,
1602009600.0,
1602747060.0,
1603050158.390939,
1603305573.992575
],
挑战：[
9.0,
9.5,
2.5,
11.52,
12.4
]
}),
挂载（）{
//eslint禁用下一行无未使用的变量
const data=this.arrdate.map（（arrdate，index）=>({
x：新日期（arrdate*1000），
y:这个.挑战[索引]
}))
const ctx=document.getElementById（'myChart'）.getContext（'2d'））
//eslint禁用下一行无未定义，无未使用的变量
常量myChart=新图表（ctx{
键入：“行”，
数据：{
数据集：[
{
数据，
标签：“性能”，
边框颜色：“#7367F0”
}
]
},
选项：{
比例：{
xAxes：[
{
键入：“时间”，
时间：{
单位：月，
显示格式：{
月份：'MMM YYYY'
}
}
}
],
雅克斯：[
{
滴答声：{
//eslint禁用下一行无未使用的变量
回调（值、索引、值）{
返回`${value}%`
}
}
}
]
}
}
})
}
}

如您所见，“date”和“challenge”包含直接提供的数据，但我想从API获取数据

我的API返回的内容：

 {  
     "date": [
                 1600934100.0,
                 1602009600.0,
                 1602747060.0,
                 1603050158.390939,
                 1603305573.992575
             ],

    "challenge": [
                       9.1
                       9.5
                      -2.8
                       18.52
                       15.4
            
                 ]
  }

如您所见，我希望使用API将“日期”数据置于arrdate中，“挑战”数据置于arrchallenge中

---

请有人帮我解决这个问题，如果有人知道答案，请将更改添加到我的代码中，因为我是vuejs新手，包装内容对我来说很困难。

首先将

axios

添加到您的项目中，并阅读vue文档中的以下链接：

之后，您有两个选择：

在页面加载时调用API

使用此选项，您的vue应用程序加载后，您的API将立即调用，因此在您创建的

钩子中执行如下API调用：

created() {
axios.get('yourAPIUrl').then((response) => {
  // reassign date and challenge with the response from the API call here for example:
  this.date = response.data.date;
  this.challenge = response.data.challenge
});
}

<button @click="callAPI">get data from server</button>

methods: {
  callAPI() {
    // same code as in the created example
  }
}

基本上，它的作用是在创建vue时调用API，然后在
部分使用响应更新
数据中定义的变量

点击按钮调用API

使用此方法，页面上有一个按钮，如下所示：

created() {
axios.get('yourAPIUrl').then((response) => {
  // reassign date and challenge with the response from the API call here for example:
  this.date = response.data.date;
  this.challenge = response.data.challenge
});
}

<button @click="callAPI">get data from server</button>

methods: {
  callAPI() {
    // same code as in the created example
  }
}

您还可以使用
async。。。如果需要，请等待API调用的语法

您还可以阅读这篇关于如何在项目中安装和使用axios的文章：

首先将
axios
添加到您的项目中，并阅读vue文档中的以下链接：


之后，您有两个选择：

在页面加载时调用API

使用此选项，您的vue应用程序加载后，您的API将立即调用，因此在您创建的
钩子中执行如下API调用：

created() {
axios.get('yourAPIUrl').then((response) => {
  // reassign date and challenge with the response from the API call here for example:
  this.date = response.data.date;
  this.challenge = response.data.challenge
});
}

<button @click="callAPI">get data from server</button>

methods: {
  callAPI() {
    // same code as in the created example
  }
}

基本上，它的作用是在创建vue时调用API，然后在
部分使用响应更新
数据中定义的变量

点击按钮调用API

使用此方法，页面上有一个按钮，如下所示：

created() {
axios.get('yourAPIUrl').then((response) => {
  // reassign date and challenge with the response from the API call here for example:
  this.date = response.data.date;
  this.challenge = response.data.challenge
});
}

<button @click="callAPI">get data from server</button>

methods: {
  callAPI() {
    // same code as in the created example
  }
}

您还可以使用
async。。。如果需要，请等待API调用的语法

您还可以阅读这篇关于如何在项目中安装和使用axios的文章：

我创建了此API供您用于测试任何人提供的解决方案：


以下是回应：


您还可以在Wirespec上创建自己的API，并使用它生成更多数据（顺序或随机），如果您需要更多不同的测试。
我创建了此API供您用于测试任何人提供的解决方案：


以下是回应：


您也可以在Wirespec上创建自己的API，并使用它生成更多数据（顺序或随机），如果您需要更多不同的测试。
使用HTTP客户端或本机调用您的API，然后将响应加载到您的数据属性中并绘制图表。我如何在代码中做到这一点，请告诉我，我应该把它放在我的代码中的什么地方，我想从我的API调用日期和挑战。使用HTTP客户端或本机调用你的API，然后将响应加载到你的数据属性中并绘制图表。我如何在我的代码中做到这一点，你能告诉我，我应该把它放在我的代码中的什么地方，我想从我的API中调用date和Challenge。谢谢你的回答，我将使用“页面加载时调用API”，现在你能告诉我应该把它放在我上面给出的代码中的什么位置，然后在“arrdate和arrchallenge”中使用什么变量来使用“date&challenge”来自API。请帮助我，因为我是vue的新手，在您的vue对象中定义
created（）
，就像您在代码中定义
mounted（）
一样（比如将其放在
mounted（）
的上方，这并不重要），然后实现API调用，如我回答中的示例所示。之后，检查网络选项卡，查看API响应中所需数据的位置。很可能您可以在
中访问它，然后在
中访问它，如
响应.data.'variableName'
。然后使用它设置vue对象的适当数据，就像ans中的示例一样答：是的，正如你所说，我加载了我的API，现在我只有一个问题，那就是我应该在代码中的“arrdate&arrchance”中使用哪个变量。我尝试在arrdate中使用this.date，在arrchance中使用this.challenge。但是我的图表中没有显示任何内容。你能回答吗