求Jupyter Notebook中Highcharts内联示例，复制代码后出现空div

我之前在Jupyter Notebook里用Highcharts也碰到过这种空div的情况，大概率是资源加载顺序不对或者CDN没生效，给你一个亲测能用的完整示例，照着来应该就能解决问题：

第一步：加载Highcharts核心资源 #

先在Notebook单元格里通过IPython.display.HTML加载Highcharts的官方CDN资源，确保页面能识别Highcharts的API：

from IPython.display import HTML

# 加载Highcharts核心库及导出相关模块
HTML("""
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
""")

第二步：编写内联图表渲染代码 #

在新的单元格（或者和上面代码放同一单元格）里，先定义图表容器，再用JavaScript初始化Highcharts图表，注意容器ID要和JS里的选择器完全对应：

HTML("""
<!-- 定义图表容器，设置宽高 -->
<div id="sales-chart" style="width: 800px; height: 450px;"></div>

<script type="text/javascript">
// 初始化Highcharts交互式图表
Highcharts.chart('sales-chart', {
    title: {
        text: '2024年上半年产品销售数据'
    },
    xAxis: {
        categories: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
        title: {
            text: '销售额（万元）'
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    series: [{
        name: '产品X',
        data: [128, 156, 192, 174, 210, 235]
    }, {
        name: '产品Y',
        data: [95, 112, 140, 155, 178, 202]
    }]
});
</script>
""")

常见问题排查 #

如果还是显示空div，可以检查这几点：

• 网络是否能正常访问Highcharts的CDN（内网环境建议下载JS文件到本地，引用本地路径）
• 容器ID和JS里Highcharts.chart()的第一个参数是否完全一致（大小写也要注意）
• Notebook环境是否禁用了JavaScript（部分默认配置会禁用，需要开启）

另外也可以把加载资源和渲染图表的代码合并到同一个HTML块里，避免顺序问题：

HTML("""
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="temp-chart" style="width: 100%; height: 500px;"></div>

<script>
Highcharts.chart('temp-chart', {
    chart: {
        type: 'spline'
    },
    title: {
        text: '一周气温变化趋势'
    },
    xAxis: {
        categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        title: {
            text: '温度 (°C)'
        }
    },
    series: [{
        name: '最高温',
        data: [26, 28, 30, 31, 29, 27, 25]
    }, {
        name: '最低温',
        data: [19, 21, 23, 24, 22, 20, 18]
    }]
});
</script>
""")

亲测这个方案在Jupyter Notebook和JupyterLab里都能正常渲染出交互式的Highcharts图表~

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