检查图表是否在 apexcharts 中呈现答案

【问题标题】：Check if chart is rendered in apexcharts检查图表是否在 apexcharts 中呈现
【发布时间】：2021-07-20 22:43:36
【问题描述】：

我是 destroying the chart，但是当它没有被渲染时，我得到了错误。

有没有办法检查图表是否被渲染，然后销毁它？

if(chart)
chart.destroy()

每次我销毁一个不存在的对象时，我都会得到 TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

另外，如果它没有渲染，我需要再次渲染它，我不会一次又一次地渲染它。我需要这张支票

【问题讨论】：

您能否提供完整的代码以及您在控制台中遇到的错误？
我试图销毁一个不存在的对象，因为它已经被销毁了。我收到 apexcharts 错误：TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

标签： javascript apexcharts

【解决方案1】：

链接的文档指出，一旦图表被绘制到页面上，render() 就会返回一个承诺。

然而，代码似乎会立即返回该承诺（这是有道理的）并在绘制图表时解决该承诺。据我所见，在 promise 像这样解决之后设置和保持状态标志就足够了：

let chart = new ApexCharts(el, options);

chart.render().then(() => chart.ohYeahThisChartHasBeenRendered = true);

/* ... */

if (chart.ohYeahThisChartHasBeenRendered) {
    chart.destroy();
}

评论后更新

是的，这行得通！我为您制作了这个可运行的示例（通常这是提出问题的人的职责；））按下按钮并检查日志）：

<html>
    <head>
        <title>chart test</title>
        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <head>

    <body>

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

        <script>
            let options = {
                    chart: { type: 'line' },
                    series: [{ name: 'sales', data: [30,40,35,50,49,60,70,91,125] }],
                    xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]}
                },
                chart = new ApexCharts(document.querySelector("#chart"), options),
                logChart = () => console.log(chart),
                destroyChart = () => {
                    if (chart.ohYeahThisChartHasBeenRendered) {
                        chart.destroy();
                        chart.ohYeahThisChartHasBeenRendered = false;
                    }
                };

            chart.render().then(() => chart.ohYeahThisChartHasBeenRendered = true);

        </script>

        <button onclick="logChart()">Log chart</button>
        <button onclick="destroyChart()">Destroy chart</button>

    </body>
</html>

我怀疑你尝试过这样的方法来检查标志：

chart.render().then(() => chart.ohYeahThisChartHasBeenRendered = true);
console.log(chart.ohYeahThisChartHasBeenRendered);

它不会做你所期望的，因为承诺还没有解决。

在另一条评论后更新

正如评论所指出的，apexcharts 存在一个相关的已知问题： https://github.com/apexcharts/apexcharts.js/pull/415

【讨论】：

什么时候被销毁我需要使用chart.ohYeahThisChartHasBeenRendered - false它会设置为false吗？
它没有用。我在图表呈现后控制台日志chart.ohYeahThisChartHasBeenRendered，但它返回未定义。
不幸的是，destroy() 没有返回任何有用的信息。您可以在通话后交叉手指并将状态标志设置为 false。我建议查看源代码以了解实际情况。顺便说一句，在 javascript 中，我们通常使用赋值运算符 = 进行赋值，而不是 -。所以当你想保留标志的名字时，它应该是chart.ohYeahThisChartHasBeenRendered = false;。
这是 ApexCharts 中的一个已知错误，如此处所述 - github.com/apexcharts/apexcharts.js/pull/415。不幸的是，我无法重现它，因此 PR 仍未合并。有人可以在代码和框上创建一个可重现的示例吗？
@junedchhipa 您链接的错误是基于反应 apexcharts？顺便说一句，我不再收到该错误，我做了两件事：我在系列中添加了data: []，因为我使用 AJAX 将数据添加到图表中。其次，我做了一个解决方法，我创建了一个变量chartRendered=false，一旦渲染我将它设置为true。然后我创建一个 if if not is rendered 然后创建图表对象并渲染它。对于destroy()，我使用相同的逻辑，只有在呈现图表时才会销毁。我也用try-catch

【解决方案2】：

尽管这个问题要求“检查图表是否已呈现”，但代码表明他们实际上想要“检查图表是否存在”。我还想在渲染之前检查图表是否存在，我怀疑这是更常见的问题。

我不确定这里接受的答案。似乎这个答案总是会创建一个新图表，因此无需检查图表是否存在。

我在这方面工作了一段时间 - 没有从文档中获得帮助 - 最终发现了 Apex 对象。查看Apex._chartInstances：此字段在任何图表呈现之前未定义，并且在它们呈现时，它们在此处存储引用。至少渲染一次后，该字段的长度等于现有图表的数量。

检查是否存在任何图表：(Apex._chartInstances === undefined)

检查当前是否存在任何图表：(Apex._chartInstances.length > 0)

访问现有图表的 id：(Apex._chartInstances[0].id)

这些位足以使它适用于我的情况。希望这对其他人有帮助。

【讨论】：