破坏顶图

Question

我有两个职能：

首先是init图

function init(data, id) {
    let options = {
        series: data[1],
        chart: {
            width: 380,
            type: "donut"
        },
        labels: data[0],
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: "bottom"
                }
            }
        }],
        colors: [primary, success, warning, danger, info]
    };
    var chart = new ApexCharts(document.querySelector("#" + id), options);
    chart.render();
}

二是加载新图表。

function loadChart(data, id) {
    initChart(data, id);
}

用新数据(新系列和新标签)尝试init图表：

loadChart(data, 'chart_1');

loadChart(new_data, 'chart_1');

我怎么能从我的第一个洞穴中摧毁图表？

Answer 1

function init(data, id) {
    if ( document.querySelector("#" + id).hasChildNodes() ) {
        document.querySelector("#" + id).innerHTML = '';
    }

    let options = {
        series: data[1],
        chart: {
            width: 380,
            type: "donut"
        },
        labels: data[0],
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: "bottom"
                }
            }
        }],
        colors: [primary, success, warning, danger, info]
    };

    var chart = new ApexCharts(document.querySelector("#" + id), options);
    chart.render();
}

我就是这么做的。我只是简单地检查了div是否有childNodes。如果是的话，我就把它清除了。简单而有效！只是在寻找另一个顶点图时遇到了这个问题。我想这不太常见。