页面初始化清空Highcharts数据报错：Uncaught TypeError解决方案咨询

这个报错本质是：你调用destroy()的时候，$('#container').highcharts()没有找到已初始化的Highcharts实例，返回了undefined，自然没法读取destroy属性。下面给你几个实用的解决思路：

1. 先检查实例是否存在再执行销毁 #

最直接的方式是先判断实例是否存在，再调用销毁方法，避免空指针错误：

const chartInstance = $('#container').highcharts();
if (chartInstance) {
    chartInstance.destroy();
}

2. 利用Highcharts全局实例列表管理 #

Highcharts会自动把所有创建的图表实例存入Highcharts.charts数组，你可以通过这个数组定位到目标容器的实例并销毁：

// 遍历所有图表实例，找到对应容器的实例销毁
Highcharts.charts.forEach(chart => {
    if (chart && chart.renderTo.id === 'container') {
        chart.destroy();
    }
});

3. 初始化时保存实例引用（推荐最佳实践） #

更好的做法是在初始化图表时直接保存实例引用，后续操作直接用这个引用，既高效又避免查找错误：

// 全局保存图表实例引用
let myChart;

// 初始化图表的函数
function initMyChart() {
    myChart = Highcharts.chart('container', {
        // 你的图表配置项
        title: { text: '示例图表' },
        series: [{ data: [1, 2, 3] }]
    });
}

// 需要清空/销毁图表时
if (myChart) {
    myChart.destroy();
    myChart = null; // 重置引用，避免后续误操作
}

另外还要注意：确保你的代码是在DOM完全加载后执行的——比如把脚本放在</body>标签末尾，或者用$(document).ready()包裹，不然#container元素还没被浏览器解析，$('#container').highcharts()肯定返回undefined。

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