JupyterLab中使用Highcharts绘制AreaRange图表时出现脚本加载错误

1. 显式指定加载arearange模块 #

在JupyterLab的代码中，初始化Highcharts图表时必须明确加载arearange模块。修改代码示例如下：

from highcharts_core.chart import Chart
from highcharts_core.options import HighchartsOptions

# 这里替换成你自己的图表配置代码
your_options = HighchartsOptions(
    # ... 你的图表配置项
)

# 初始化图表时指定需要加载的JS库（在线模式）
chart = Chart(options=your_options,
              js_libraries=['https://code.highcharts.com/highcharts.js',
                            'https://code.highcharts.com/modules/arearange.js'])
chart.display()

如果是离线环境，需先下载arearange.js到本地，将上述URL替换为本地文件的绝对路径

2. 离线模式下配置本地资源路径 #

若使用离线部署的Highcharts资源，需先配置本地资源路径，再指定模块：

from highcharts_core import utilities
from highcharts_core.chart import Chart

# 设置本地Highcharts核心库和模块的路径
utilities.HIGHCHARTS_LIBRARY_PATH = 'C:/your/local/highcharts/'
utilities.HIGHCHARTS_MODULES_PATH = 'C:/your/local/highcharts/modules/'

# 初始化图表时指定要加载的模块
chart = Chart(options=your_options, modules=['arearange'])
chart.display()

3. 验证模块加载状态 #

打开JupyterLab的浏览器控制台（按F12），输入以下命令检查模块是否加载成功：

typeof Highcharts.seriesTypes.arearange

返回"function"表示加载成功；返回"undefined"则需检查资源路径是否正确，或在线模式下网络是否能访问CDN资源。

4. 匹配Highcharts JS版本与highcharts-core版本 #

确保使用的Highcharts JS版本和highcharts-core版本兼容，可通过以下代码查看推荐的JS版本：

import highcharts_core
print(highcharts_core.__highcharts_js_version__)

在线模式下需使用对应版本的CDN资源，比如推荐版本为10.3.3，模块URL则改为https://code.highcharts.com/10.3.3/modules/arearange.js

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