从 JSON API 更新图表 & AJAX

#### 关于如何从 JSON API 和 AJAX 更新图表的指南
在许多情况下，您可能无法在呈现页面时立即获得可用数据。或者，您可能必须等待特定的用户交互才能获取数据。在这种情况下，最好先呈现一个空图表，然后通过 AJAX 请求获取图表数据。

在本教程中，我们将看到如何使用不同的方法使用 `jQuery/Axios` 获取数据，然后调用 `ApexCharts` 的 [updateSeries](http://www.bixiaguangnian.com/manual/apexcharts/339.html "updateSeries") 方法。

### 样本数据
我们将使用位于 GitHub 存储库上的本地 [JSON 文件](https://github.com/apexcharts/apexcharts.js/blob/master/db.json "JSON 文件") 中的示例数据

示例数据将采用以下格式：

```javascript
"data": [
  {
    "x": timestamp,
    "y": value
  },
  .
  .
  {
    "x": timestamp,
    "y": value
  },
]
```

### 绘制空图表
最初，我们将设置图表选项并在不提供任何数据的情况下呈现图表。您可以在下面的代码片段中看到我们在 `series` 属性中提供了一个空数组。

```javascript
var options = {
  chart: {
      height: 350,
      type: 'bar',
  },
  dataLabels: {
      enabled: false
  },
  series: [],
  title: {
      text: 'Ajax Example',
  },
  noData: {
    text: 'Loading...'
  }
}

var chart = new ApexCharts(
  document.querySelector("#chart"),
  options
);

chart.render();
```

运行上面的代码片段后，您将看到一个如下所示的空图表，`Loading...` 中间有一个文本。此文本是可自定义的，并且可以通过设置 `noData` 属性进行更改。

![](/uploads/images/20221226/8e19da7e240b0bdff4e7a13940af9414.png)

## 使用 jQuery.getJSON 获取数据
我们将通过调用jQuery的 [getJSON方法](https://api.jquery.com/jQuery.getJSON/ "getJSON方法") 发出 AJAX 请求。

```javascript
var url = 'http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly';

$.getJSON(url, function(response) {
  chart.updateSeries([{
    name: 'Sales',
    data: response
  }])
});
```

上面的实现指定了一个成功处理程序，我们在其中从 API 获得响应。我们提供从成功回调返回的数据并调用该updateSeries()方法来更新我们的图表。

从 API 获取数据后，您应该会看到以下包含新数据的图表。

![](/uploads/images/20221226/d8bf519ee4b7a5313b3247fbcdfd5edd.png)

## 使用 axios 获取数据
我们还将演示使用 [axios](https://github.com/axios/axios "axios") 发出 AJAX 请求并updateSeries在从 API 获取数据后进行调用。

```javascript
var url = 'http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly';

axios({
  method: 'GET',
  url: url,
}).then(function(response) {
  chart.updateSeries([{
    name: 'Sales',
    data: response.data
  }])
})
```

当您发出请求时，Axios 会返回一个承诺，如果成功，该承诺将解析为响应对象。回调将 `then()` 接收一个带有数据属性的响应对象。使用它将它注入到 `updateSeries()` 方法中。

总而言之，为了使用 JSON 数据创建动态图表，您需要做的就是首先呈现一个空图表，然后调用 [updateSeries](http://www.bixiaguangnian.com/manual/apexcharts/339.html "updateSeries") 方法。

## 查看完整示例
您可以在 GitHub 存储库的 [示例目录](https://github.com/apexcharts/apexcharts.js/blob/master/samples/vanilla-js/misc/jquery.html "示例目录") 中查看完整示例。

从 JSON API 更新图表 &amp; AJAX

从 JSON API 更新图表 & AJAX