检查图表是否在 apexcharts 中呈现

Question

我是 destroying the chart 但是当它没有呈现时我得到错误。

有没有办法检查图表是否已呈现，然后销毁它？

if(chart)
chart.destroy()

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

还有就是没渲染的话我要再渲染一遍，我不会再渲染一遍。我需要那张支票

Answer 1

链接的文档指出，render() return一旦将图表绘制到页面上就是一个承诺。

然而，代码似乎 return 立即承诺（这是有道理的）并在绘制图表时解决该承诺。据我所知，在 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

Answer 2

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

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

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

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

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

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

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

检查图表是否在 apexcharts 中呈现

Check if chart is rendered in apexcharts

javascript

apexcharts