使用 JavaScript 和 ApexCharts 实现数据动态追加与实时更新-js教程-PHP中文网

使用 JavaScript 和 ApexCharts 实现数据动态追加与实时更新

碧海醫心

发布： 2025-10-12 13:05:00

原创

319人浏览过

使用 javascript 和 apexcharts 实现数据动态追加与实时更新

本文将介绍如何使用 JavaScript 和 ApexCharts 库，实现每隔固定时间向图表中动态追加数据的功能。通过 `setInterval` 函数，我们可以定时更新图表数据，从而实现数据的实时展示。文章将提供详细的代码示例和步骤说明，帮助开发者快速掌握该技术。

需求分析

我们的目标是创建一个 ApexCharts 图表，并在用户点击按钮后，每隔 2 秒钟向图表追加一组新的数据，总共追加 5 次。这需要用到 JavaScript 的定时器功能，以及 ApexCharts 的数据更新方法。

实现步骤

初始化 ApexCharts 图表

首先，我们需要初始化 ApexCharts 图表。这包括定义图表的配置项（options），例如图表的类型、数据序列、X 轴分类等。

```javascript
var salesdata = [30, 40, 45, 50, 49, 60, 70, 91, 125];
var buysdata = [20, 30, 45, 52, 42, 33, 40, 41, 65];
var i = 0;
var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: salesdata,
  },
          {
    name: 'buys',
    data: buysdata,
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999,2000,2001,2002,2003,2004,2005]
  }
}

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

chart.render();
```

这段代码定义了两个数据序列 `salesdata` 和 `buysdata`，以及图表的配置项 `options`，包括图表类型为柱状图、数据序列的名称和数据，以及 X 轴的分类。然后，我们使用 `ApexCharts` 构造函数创建一个新的图表实例，并使用 `render()` 方法将其渲染到页面上。

登录后复制

创建数据追加函数

接下来，我们需要创建一个函数 appendStats，该函数负责向图表中追加新的数据。在这个函数中，我们将更新 salesdata 和 buysdata 数组，并使用 chart.appendData() 方法将新的数据追加到图表中。

立即学习“Java免费学习笔记（深入）”；

Ex驾校预约小程序

传统驾校预约方式步骤繁琐，效率低下，随着移动互联网科技和5G的革新，驾校考试领域迫切需要更加简洁、高效的预约方式，便捷人们的生活。因此设计基于微信小程序的驾校预约系统，改进传统驾校预约方式，实现高效的驾校学校预约。采用腾讯提供的小程序云开发解决方案，无须服务器和域名。驾校预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项驾校预约凭证：支持线下到场后校验签到/核销/二维码自

查看详情

```javascript
function appendStats(){
  i++;

  salesdata.push(salesdata[salesdata.length-1]+22);
  buysdata.push(buysdata[buysdata.length-1]+32);
  // appendData的参数需要是一个数组，数组中包含一个对象，对象中包含一个data属性，data属性的值是一个数组
  chart.appendData([{
    data: [salesdata[salesdata.length-1]],
  },
  {
    data: [buysdata[buysdata.length-1]],
  }])
  if(i===4)
    clearInterval(timerId);
}
```

在这个函数中，我们首先递增计数器 `i`。然后，我们分别向 `salesdata` 和 `buysdata` 数组追加新的数据，新的数据是在原有数据的基础上增加一个固定的值。最后，我们使用 `chart.appendData()` 方法将新的数据追加到图表中。注意，`appendData`的参数需要是一个数组，数组中包含一个对象，对象中包含一个data属性，data属性的值是一个数组。

登录后复制

使用 setInterval 函数定时调用数据追加函数

现在，我们需要使用 JavaScript 的 setInterval 函数，每隔 2 秒钟调用一次 appendStats 函数。

```javascript
function update(){
  let timerId=setInterval(appendStats,2000);
}
```

这段代码定义了一个 `update` 函数，该函数使用 `setInterval` 函数每隔 2 秒钟调用一次 `appendStats` 函数。`setInterval` 函数返回一个定时器 ID，我们可以使用 `clearInterval` 函数来取消定时器。

登录后复制

HTML 结构

最后，我们需要在 HTML 中添加一个按钮，当用户点击该按钮时，调用 update 函数，启动定时器。

```html
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<button onclick='update()'>Click me</button>
<div id="chart">
</div>
```

这段代码包含一个按钮和一个用于显示图表的 `div` 元素。当用户点击按钮时，`update()` 函数会被调用，启动定时器，开始向图表中追加数据。

登录后复制

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ApexCharts Dynamic Data</title>
  <style>
    @import url(https://fonts.googleapis.com/css?family=Roboto);

    body {
      font-family: Roboto, sans-serif;
    }

    #chart {
      max-width: 650px;
      margin: 35px auto;
    }
  </style>
</head>
<body>
  <button onclick='update()'>Click me</button>
  <div id="chart">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script>
    var salesdata = [30, 40, 45, 50, 49, 60, 70, 91, 125];
    var buysdata = [20, 30, 45, 52, 42, 33, 40, 41, 65];
    var i = 0;
    var options = {
      chart: {
        type: 'bar'
      },
      series: [{
        name: 'sales',
        data: salesdata,
      },
              {
        name: 'buys',
        data: buysdata,
      }],
      xaxis: {
        categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999,2000,2001,2002,2003,2004,2005]
      }
    }

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

    chart.render();

    function update(){

      function appendStats(){
        i++;
        salesdata.push(salesdata[salesdata.length-1]+22);
        buysdata.push(buysdata[buysdata.length-1]+32);
        chart.appendData([{
          data: [salesdata[salesdata.length-1]],
        },
        {
          data: [buysdata[buysdata.length-1]],
        }])
        if(i===4)
          clearInterval(timerId);
      }
      let timerId=setInterval(appendStats,2000);
    }
  </script>
</body>
</html>

登录后复制

注意事项

appendData 参数格式： appendData 方法的参数需要是一个数组，数组中包含一个对象，对象中包含一个 data 属性，data 属性的值是一个数组。
定时器管理： 使用 setInterval 函数时，需要注意及时清除定时器，避免内存泄漏。可以使用 clearInterval 函数来清除定时器。
数据更新逻辑： 在 appendStats 函数中，可以根据实际需求修改数据更新的逻辑。例如，可以从服务器获取新的数据，或者根据一定的算法生成新的数据。