使用 JavaScript 和 ApexCharts 实现数据动态追加的柱状图-js教程-PHP中文网

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

聖光之護

发布： 2025-10-12 10:40:22

原创

995人浏览过

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

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

1. 前期准备

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

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

登录后复制

或者使用 npm 安装：

npm install apexcharts

登录后复制

然后在你的 JavaScript 文件中引入 ApexCharts。

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

2. 创建基本的 ApexCharts 图表

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

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

登录后复制

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

Booltool

常用AI图片图像处理工具箱

140

查看详情

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 轴分类。

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. 完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>ApexCharts Dynamic Data</title>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <style>
    #chart {
      max-width: 650px;
      margin: 35px auto;
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

登录后复制

6. 注意事项和总结

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

通过本文的介绍，你应该能够使用 JavaScript 和 ApexCharts 库创建一个动态更新的柱状图。这种方法可以应用于各种实时数据可视化场景，例如股票行情、传感器数据监控等。

以上就是使用 JavaScript 和 ApexCharts 实现数据动态追加的柱状图的详细内容，更多请关注php中文网其它相关文章！