IPython运行Highcharts报$(...).highcharts is not a function错误如何解决

报错原因 #

• IPython/Jupyter 运行环境默认已内置 jQuery 库，代码中额外引入的 jQuery 与内置版本产生冲突。Highcharts 仅挂载到了额外引入的 jQuery 实例上，而初始化代码执行时调用的是环境内置的 jQuery 实例，因此找不到对应的 highcharts 方法
• 外部脚本采用异步加载逻辑时，可能出现 Highcharts 及依赖模块未完成加载就执行初始化的时序问题

可运行的修改后代码 #

from IPython.display import HTML, display

statistics_html = """
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
// 检测Highcharts是否已加载，避免重复加载
if (typeof Highcharts === 'undefined') {
    // 动态加载Highcharts核心库
    const hcScript = document.createElement('script');
    hcScript.src = 'https://code.highcharts.com/highcharts.js';
    hcScript.onload = () => {
        // 加载导出模块后再初始化图表
        const exportScript = document.createElement('script');
        exportScript.src = 'https://code.highcharts.com/modules/exporting.js';
        exportScript.onload = initChart;
        document.head.appendChild(exportScript);
    };
    document.head.appendChild(hcScript);
} else {
    initChart();
}

// 图表初始化逻辑
function initChart() {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: '示例折线图'
        },
        series: [{
            name: '测试数据',
            data: [1, 3, 2, 4, 5, 3, 6]
        }]
    });
}
</script>
"""
display(HTML(statistics_html))

核心修改说明 #

• 移除了重复引入的 jQuery、Bootstrap 脚本，直接复用 IPython 环境内置的 jQuery 实例，彻底解决版本冲突问题
• 改为动态加载 Highcharts 及依赖模块，通过 onload 回调保证所有依赖加载完成后再执行初始化逻辑，避免时序问题
• 补充了基础的图表配置与测试数据，避免空配置导致的渲染异常

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