Apexcharts <svg>属性高度：预期长度，加载其他页面时为“NaN”

Question

我有一个使用 ApexCharts v3.45.1 生成的简单图表。这是在单页应用程序中，当我通过 AJAX 调用获取另一个页面时，DOM 中的原始图表会被故意删除（使用淘汰赛的数据绑定 if 语句）。

在stacktrace中，似乎apexchart的redrawOnParentResize正在被触发，当它发现节点不再存在时，它的高度为“NaN”：

key: "setAttrs"
value: function(t,e) -> t.setAttribute(i, e[i])

它正试图重新绘制一张在我还没来得及摧毁它之前就已经不存在的图表。

花了一些时间试图找到解决方案。我可以将 redrawOnParentResize 和 WindowResize 都设置为 false。这解决了问题，但图表不会动态调整大小。

我确实实现了一个解决方案，该解决方案似乎通过在渲染图表之前启动 ResizeObserver 来工作。这里的目的是在图表被隐藏/从 DOM 中删除时销毁图表。

 self.chart = new ApexCharts(element, options);

    setTimeout(function () {
    
    new ResizeObserver(function (ele) {
        var height = ele[0].contentRect.height;
        if (height == 0) self.Destroy();
    }).observe(element);

    self.chart.render();
   }, 200);

这是 Apexcharts 中的错误还是有更好的方法来处理这个问题？

Answer 1

在 svelte 中，我遇到了同样的问题，并通过使用 onDestroy 销毁图表来解决

import { onDestroy } from 'svelte';

onDestroy(()=>{
    chart.destroy();
});