Проверьте, отображается ли график в верхних диаграммах - PullRequest
Новая
       4

Проверьте, отображается ли график в верхних диаграммах

0 голосов
/ 12 февраля 2020

Я уничтожаю диаграмму , но когда она не отображается, я получаю ошибку.

Есть ли способ проверить, отображается ли диаграмма, а затем уничтожить ее? 

if(chart)
chart.destroy()

Каждый раз, когда я уничтожаю несуществующий объект, я получаю TypeError : Не удалось выполнить «removeChild» на «Узле»: параметр 1 не имеет типа «Узел».

Также мне нужно отрендерить его снова, если он не рендерится, я не буду рендерить его снова и снова. Мне нужна эта проверка

1 Ответ

3 голосов
/ 12 февраля 2020

В связанной документации указано, что render() возвращает обещание, как только диаграмма будет отображена на странице.

Однако, похоже, код возвращает это обещание немедленно (что имеет смысл) и разрешает это обещание, когда график был нарисован. Насколько я вижу, должно быть достаточно установить и сохранить флаг состояния после того, как обещание разрешено следующим образом: 

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

...