如何强制ApexCharts重新绘制，解决隐藏时更新数据后宽度为0的问题

你的推测完全符合ApexCharts的底层逻辑：执行updateSeries等数据更新操作时，库会主动读取当前容器的实际offsetWidth做布局计算，当容器处于display: none状态时宽高返回值为0，就会导致图表最终渲染宽度被设置为0。调整窗口大小时库会自动触发重绘逻辑重新读取尺寸，所以图表会恢复正常。

可用的强制重绘方案如下：

• 方案1：调用内置resize方法
  容器切换为可见状态后，直接调用图表实例的resize()方法即可，该方法和窗口resize触发的重绘逻辑完全一致，代码示例：

  // 先将容器设置为可见
  document.querySelector('#chart-container').style.display = 'block';
  // 调用重绘
  chart.resize();
  

• 方案2：强制全量重绘
  如果resize方法未生效，可以调用render()方法传入true参数强制跳过缓存全量重绘：

  document.querySelector('#chart-container').style.display = 'block';
  chart.render(true);
  

• 方案3：更新时推迟重绘
  若调用updateSeries时已知图表处于隐藏状态，可以先推迟重绘操作，等容器可见后再执行重绘：

  // 第三个参数设为true表示推迟重绘，第四个参数设为0关闭重绘动画
  chart.updateSeries(newSeries, false, true, 0);
  // 容器可见后再执行resize或render操作
  

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