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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-12

浏览次数：次

返回列表

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

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

需求分析

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

实现步骤

初始化 ApexCharts 图表

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

```j*ascript
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() 方法将新的数据追加到图表中。

网趣网上购物系统旗舰版

网趣网上购物系统支持PC电脑版+手机版+APP，数据一站式更新，支持微信支付与支付宝支付接口，是专业的网上商城系统，网趣商城系统支持淘宝数据包导入，实现与淘宝同步更新!支持上传图片水印设置、图片批量上传功能，同时支持订单二次编辑以及多级分类隐藏等实用功能，新版增加商品大图浏览与列表显示功能，使分类浏览更方便，支持最新的支付宝即时到帐接口。

0 查看详情网趣网上购物系统旗舰版

```j*ascript
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 函数定时调用数据追加函数

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

```j*ascript
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 函数中，可以根据实际需求修改数据更新的逻辑。例如，可以从服务器获取新的数据，或者根据一定的算法生成新的数据。