ApexCharts点击按钮每2秒追加数据异常问题及解决

我尝试用ApexCharts实现点击按钮后每2秒追加一条新数据，共执行5次，但代码运行后是等待10秒一次性完成所有数据追加，而非预期的逐次追加。

原代码存在两个关键问题：

• chart.appendData() 的参数格式错误：ApexCharts的appendData方法需要为每个系列提供新数据，原代码仅传了一个值为0的对象，无法正确触发数据追加。
• 计数逻辑偏差：原代码判断i===4时停止定时器，实际只会执行4次追加，不符合“共执行5次”的需求。

以下是修正后的代码，通过setInterval实现定时追加，同时修正参数格式与计数逻辑：

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();

function update(){
  // 重置计数，避免多次点击按钮导致计数混乱
  i = 0;
  function appendStats(){
    i++;
    // 生成新数据
    const newSales = salesdata[salesdata.length-1] + 22;
    const newBuys = buysdata[buysdata.length-1] + 32;
    salesdata.push(newSales);
    buysdata.push(newBuys);
    
    // 正确调用appendData，为每个系列传递新数据
    chart.appendData([
      { data: [newSales] },
      { data: [newBuys] }
    ]);
    
    // 执行5次后停止定时器
    if(i === 5){
      clearInterval(timerId);
    }
  }
  let timerId = setInterval(appendStats, 2000); 
}

CSS #

@import url(https://fonts.googleapis.com/css?family=Roboto);

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

#chart {
  max-width: 650px;
  margin: 35px auto;
}

HTML #

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

• 修正appendData参数：为每个系列单独传递包含新数据的数组，ApexCharts会自动将数据追加到对应系列中，触发图表实时更新。
• 调整计数逻辑：将停止条件改为i===5，确保完成5次数据追加后再停止定时器。
• 重置计数变量：在update函数开头重置i为0，避免多次点击按钮时计数累加，导致定时器提前停止或执行次数错误。

内容的提问来源于stack exchange，提问作者Monty Swanson