哎呀，最近好多人问我怎么用 ApexCharts 做图表，然后让它自动更新数据。这事儿啊，其实挺简单的，别看那些教程写得高深莫测的，其实就是几行代码的事儿。今天我就来跟你们唠唠嗑，用最接地气的方式，教你们怎么搞定这个定时追加数据的活儿，挖野菜。。

啥是 ApexCharts 啊？

也是醉了... 先说一下 ApexCharts 这玩意儿。简单它就是一个用来画图的库。比那些传统的图表库好一点点，界面也好看点。如果你想把你的数据变成漂亮的图表展示出来那肯定要找一个这样的库。

为什么要定时追加数据呢？

你有没有遇到过这种情况？你画了一个图表，然后想让它一直显示最新的数据。这个时候就需要定时追加数据的功能了。比如你监控服务器的流量，或者跟踪网站的访问量等等。

准备工作

安装 ApexCharts

先说说你要安装 ApexCharts。可以用 npm 或者 yarn 安装：

npm install apexcharts

或者：

yarn add apexcharts

引入 CSS 和 JavaScript

安装完之后你要把 ApexCharts 的 CSS 和 JavaScript 文件引入到你的项目中。 加油！ 可以从官网下载： 或者直接用 CDN：

代码实现

先说说我们需要一个地方来放我们的图表和一个按钮来启动更新。

更新图表

JavaScript 代码

这部分代码是核心！ 我们需要用 JavaScript 来初始化 ApexCharts 图表，然后编写一个函数来定时添加新的数据，我直接好家伙。。

var salesdata = ; //销售额的数据 ， 随便造的吧!
var buysdata = ; //购买量的数据 ，也是随便编的!
var i = 0; // 用于记录追加数据的次数 - 其实没啥用处啊
function updateChart { //每次点击按钮就更新一次 ,这样演示起来比较方便吧!如果想定时更新的话就不用这个了!
    // 这里我们模拟添加一些新的数据... 不管什么数据都行啦! 主要就是为了演示咱们怎么把新数据加进去！
    salesdata.push * )); //随机生成新的销售额 数据 + i 让每次生成的数字不一样
    buysdata.push * )); //随机生成新的购买量 数据 + i 让每次生成的数字不一样
     // 使用 updateSeries 来更新图表数据 - 这个方法可能有点老了... 现在应该直接修改 data 参数就行了..不过没关系！
     const options = { //配置选项
        chart: {
            type: 'bar'
        },
        series: 
     };
     const chart = new ApexCharts, options);
}
function update { // 这个函数本来是用来定期更新的 ,但是现在已经没用了 ,主要原因是我们点击按钮就更新了
    function appendStats {
      i++;
       // ;
       // ;
      // 使用 updateSeries 来更新图表数据
      ();
      if  {
        clearInterval; //停止定时器
      }
    }
    let timerId = setInterval; // 每隔2秒施行一次 appendStats 函数
}
//document.addEventListener { // 等页面加载完毕再施行
//   update; ///取消注释这行代码就可以实现自动更新啦
//});
 

运行看看

就这？ 把上面的 HTML 和 JavaScript 代码复制到你的项目中，然后在浏览器里打开它。 你会看到一个柱状图和一个按钮。“点击我”按钮会触发 `updateChart` 函数将新的随机数添加到 `sales` 和 `buys` 数据中并刷新柱状图.

怎么样？是不是很简单？其实只要掌握了几个关键点：初始化 ApexCharts、 准备好要追加的数据、 共勉。 以及使用 `updateSeries` 或直接修改 `data` 参数就可以实现了。

希望这篇文章能帮到你！ 如果还有什么问题欢迎在评论区留言哦，大体上...！