使用 J*aScript 和 ApexCharts 实现数据动态追加的柱状图

新闻中心 NEWS CENTER

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

使用 J*aScript 和 ApexCharts 实现数据动态追加的柱状图

2025-10-12

浏览次数：次

返回列表

使用 javascript 和 apexcharts 实现数据动态追加的柱状图

本文将介绍如何使用 J*aScript 和 ApexCharts 库创建一个柱状图，并通过定时器每隔 2 秒动态追加新的数据到图表中。我们将详细讲解实现原理，并提供可运行的代码示例，帮助你理解和掌握动态图表的实现方法。

1. 前期准备

首先，确保你的项目中已经引入了 ApexCharts 库。可以通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

或者使用 npm 安装：

npm install apexcharts

然后在你的 J*aScript 文件中引入 ApexCharts。

2. 创建基本的 ApexCharts 图表

在 HTML 中创建一个用于渲染图表的容器：

<div id="chart"></div>

接下来，在 J*aScript 中初始化 ApexCharts 图表。我们需要定义图表的 options，包括图表类型、数据系列、X 轴分类等。

var salesdata = [30, 40, 45, 50, 49, 60, 70, 91, 125];
var buysdata = [20, 30, 45, 52, 42, 33, 40, 41, 65];

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]
  }
}

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

chart.render();

这段代码创建了一个基本的柱状图，包含两个数据系列（'sales' 和 'buys'）以及对应的 X 轴分类。

秀脸FacePlay

一款集成AI换脸、照片跳舞等多种AI特效玩法的App

124 查看详情秀脸FacePlay

3. 实现数据动态追加

关键在于使用 setInterval 函数来定时执行数据追加操作。定义一个 appendStats 函数，用于更新数据并刷新图表。

var i = 0;

function appendStats() {
  i++;

  salesdata.push(salesdata[salesdata.length - 1] + 22);
  buysdata.push(buysdata[buysdata.length - 1] + 32);

  chart.updateSeries([{
    name: 'sales',
    data: salesdata
  }, {
    name: 'buys',
    data: buysdata
  }]);

  // 可以选择同时更新X轴
  options.xaxis.categories.push(2000 + i);
  chart.updateOptions(options);

  if (i === 4)
    clearInterval(timerId);
}

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

在这个 appendStats 函数中，我们：

递增计数器 i。
向 salesdata 和 buysdata 数组中追加新的数据（这里简单地在前一个数据的基础上加上一个固定值）。
使用 chart.updateSeries() 方法更新图表的数据系列。注意，updateSeries 接收一个包含 name 和 data 属性的对象数组，与初始化图表时的 series 属性结构相同。
更新 X 轴分类，使之与新数据对应。
当计数器 i 达到指定次数（这里是 4）时，使用 clearInterval 停止定时器。

update 函数用于启动定时器，每隔 2 秒执行 appendStats 函数。

4. 添加按钮触发数据更新

在 HTML 中添加一个按钮，点击按钮时调用 update 函数：

<button onclick='update()'>Click me</button>

5. 完整代码示例




  ApexCharts Dynamic Data
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  


  <button onclick='update()'>Click me</button>
  <div id="chart"></div>

  <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]
      }
    }

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

    chart.render();

    function appendStats() {
      i++;

      salesdata.push(salesdata[salesdata.length - 1] + 22);
      buysdata.push(buysdata[buysdata.length - 1] + 32);

      chart.updateSeries([{
        name: 'sales',
        data: salesdata
      }, {
        name: 'buys',
        data: buysdata
      }]);

      options.xaxis.categories.push(2000 + i);
      chart.updateOptions(options);


      if (i === 4)
        clearInterval(timerId);
    }

    function update() {
      let timerId = setInterval(appendStats, 2000);
    }
  </script>

6. 注意事项和总结

数据更新： chart.updateSeries() 方法是更新图表数据的关键。确保传递给该方法的对象结构与初始化图表时的 series 属性结构一致。
X 轴同步： 如果需要动态更新 X 轴分类，可以使用 chart.updateOptions() 方法。
定时器管理： 使用 clearInterval() 方法停止定时器，避免无限循环。
性能优化： 在实际应用中，如果数据量很大，频繁更新图表可能会影响性能。可以考虑使用更高效的数据更新策略，例如只更新部分数据，或者使用 Web Workers 在后台处理数据。