# 获取 API 数据

URL: https://caijiao.org/chartjs/07-backend/01-fetch-api
Source: docs/chartjs/07-backend/01-fetch-api.md
Description: 讲解如何在 Chart.js 中通过 JavaScript 异步请求 API 数据，并动态更新图表，实现数据的实时加载和展示。

在实际项目中，图表数据通常来自远程 API。利用 [JavaScript](/javascript/) 的 `fetch` 或其他异步方法，可以获取接口数据后动态更新 [Chart.js](/chartjs/) 图表，实现实时展示最新信息。

以下示例演示通过 `fetch` 请求模拟接口数据，并更新折线图的数据。

```js
const ctx = document.getElementById("apiDataChart").getContext("2d");

const apiChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [],
    datasets: [
      {
        label: "用户活跃度",
        data: [],
        borderColor: "rgb(54, 162, 235)",
        fill: false,
        tension: 0.1,
      },
    ],
  },
  options: {
    responsive: true,
    plugins: {
      legend: { display: true },
    },
  },
});

// 模拟异步获取数据
fetch("https://jsonplaceholder.typicode.com/posts?_limit=5")
  .then((response) => response.json())
  .then((data) => {
    // 模拟解析数据，使用帖子id和title长度作为示例
    apiChart.data.labels = data.map((item) => "ID " + item.id);
    apiChart.data.datasets[0].data = data.map((item) => item.title.length);
    apiChart.update();
  })
  .catch((err) => {
    console.error("获取数据失败", err);
  });
```

[在线代码演示](/chartjs/demos/24.html)