# 定时刷新图表

URL: https://caijiao.org/chartjs/07-backend/03-auto-refresh
Source: docs/chartjs/07-backend/03-auto-refresh.md
Description: 讲解如何通过 JavaScript 的定时器定期获取最新数据并刷新 Chart.js 图表，实现图表的自动实时更新功能。

使用定时器可以让 [Chart.js](/chartjs/) 图表定期更新数据，适合实时监控和动态展示需求。通过定时请求接口并调用 `chart.update()`，保证图表数据同步最新。

以下示例每隔 3 秒模拟更新图表数据，实现自动刷新效果。

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

const refreshChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["一月", "二月", "三月", "四月", "五月"],
    datasets: [
      {
        label: "销售额",
        data: [12, 19, 3, 5, 2],
        backgroundColor: "rgba(54, 162, 235, 0.7)",
      },
    ],
  },
  options: {
    responsive: true,
    plugins: {
      legend: { display: true },
    },
  },
});

setInterval(() => {
  // 模拟数据更新
  refreshChart.data.datasets[0].data = refreshChart.data.datasets[0].data.map(
    () => Math.floor(Math.random() * 30)
  );
  refreshChart.update();
}, 3000);
```

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