JavaScript调用AnyChart切换图表时新增div而非覆盖原有内容的问题求解

• 每次触发下拉切换事件时，都重复绑定了anychart.onDocumentReady监听回调，导致同一个逻辑被多次执行
• 没有复用或销毁之前的图表实例，每次都生成新的图表插入容器，自然就会出现叠加效果
• 额外问题：你的HTML下拉框所有option都加了selected="selected"属性，会导致默认选中逻辑异常

调整后的JS代码 #

// 全局存储当前图表实例
var wordTreeChart = null;

function switchType() {
    var e = document.getElementById("typeSelect");
    var selected_value = e.options[e.selectedIndex].value;
    console.log(selected_value)
    var ents = {{ entities_dict|safe }}
    var val = selected_value;

    var data = [];
    // 这里可以替换成你自己的动态取数逻辑，把之前注释的循环取数逻辑放开修改即可
    data.push({
        value: val,
        children: [
            {value: "country"},
            {value: "europe"},
            {value: "German"},
        ]
    })

    // 先销毁已存在的旧图表实例
    if(wordTreeChart) {
        wordTreeChart.dispose();
        wordTreeChart = null;
    }
    // 清空容器残留内容
    document.getElementById("word_tree").innerHTML = '';

    // 生成新图表
    wordTreeChart = anychart.wordtree(data, "as-tree");
    wordTreeChart.title("Word Tree: Data (Tree)");
    wordTreeChart.container("word_tree");
    wordTreeChart.draw();
}

// 页面首次加载完成后自动调用一次，渲染默认选项的图表
anychart.onDocumentReady(function () {
    switchType();
});

调整后的HTML下拉框部分 #

<select id="typeSelect" onchange="switchType()">
    {% for key in entities_dict.keys() %}
        {% if loop.first %}
            <option selected="selected" value="{{ key }}">{{ key }}</option>
        {% else %}
            <!-- 非首选项去掉selected属性，避免默认选中异常 -->
            <option value="{{ key }}">{{ key }}</option>
        {% endif %}
    {% endfor %}
</select>

• 全局变量存储当前图表实例，每次切换前先销毁旧实例、清空容器，保证容器干净后再插入新图表
• 去掉了switchType内部的anychart.onDocumentReady包裹，下拉切换时页面已经加载完成，不需要重复监听加载事件
• 首屏加载单独监听文档就绪事件调用一次switchType，保证首次进入页面就能渲染默认选项的图表
• 修正了下拉框多选项默认选中的错误

内容的提问来源于stack exchange，提问作者Egzon Korenica