Windows10本地Anaconda Jupyter Notebook中Highcharts.js加载失败问题

问题概述 #

在Windows10本地Anaconda环境的Jupyter Notebook中复现Highcharts示例代码时，调用chart.display()触发Highcharts.js脚本加载异常，提示Highcharts is not defined。

示例代码 #

from highcharts_core.chart import Chart
from highcharts_core.options import HighchartsOptions
from highcharts_core.options.plot_options import PlotOptions
from highcharts_core.options.axes.x_axis import XAxis
from highcharts_core.options.axes.y_axis import YAxis
from highcharts_core.options.axes.accessibility import AxisAccessibility
from highcharts_core.options.axes.title import AxisTitle
from highcharts_core.options.title import Title
from highcharts_core.options.subtitle import Subtitle
from highcharts_core.options.legend import Legend
from highcharts_core.options.plot_options.series import SeriesOptions
from highcharts_core.options.series.area import LineSeries
from highcharts_core.options.series.labels import SeriesLabel
from highcharts_core.options.responsive import Responsive, ResponsiveRules, Condition
from highcharts_core.constants import EnforcedNull


chart_options = HighchartsOptions(
    title = Title(text = 'U.S Solar Employment Growth by Job Category, 2010-2020',
                  align = 'left'),
    subtitle = Subtitle(text = 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>',
                        align = 'left'),
    y_axis = YAxis(title = AxisTitle(text = 'Number of Employees')),
    x_axis = XAxis(
        accessibility = AxisAccessibility(range_description = 'Range: 2010 to 2020')
    ),
    legend = Legend(layout = 'vertical',
                    align = 'right',
                    vertical_align = 'middle'),
    plot_options = PlotOptions(series = SeriesOptions(point_start = 2010,
                                                      label = SeriesLabel(connector_allowed = False)))
)

override_options = HighchartsOptions(legend = Legend(layout = 'horizontal',
                                                     align = 'center',
                                                     vertical_align = 'bottom'))
responsive_config = Responsive(
    rules = [
        ResponsiveRules(chart_options = override_options,
                        condition = Condition(max_width = 500))
    ]
)
chart_options.responsive = responsive_config

series1 = LineSeries(name = 'Installation & Developers',
                     data = [43934, 48656, 65165, 81827, 112143, 142383, 171533, 165174, 155157, 161454, 154610])
series2 = LineSeries(name = 'Manufacturing',
                     data = [24916, 37941, 29742, 29851, 32490, 30282, 38121, 36885, 33726, 34243, 31050])
series3 = LineSeries(name = 'Sales & Distribution',
                     data = [11744, 30000, 16005, 19771, 20185, 24377, 32147, 30912, 29243, 29213, 25663])
series4 = LineSeries(name = 'Operations & Maintenance',
                     data = [EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, 11164, 11218, 10077])
series5 = LineSeries(name = 'Other',
                     data = [21908, 5548, 8105, 11248, 8989, 11816, 18274, 17300, 13053, 11906, 10073])

chart_options.add_series(series1, series2, series3, series4, series5)

chart = Chart.from_options(chart_options)
chart.display()

错误信息 #

Highcharts.js脚本加载出现异常。该脚本本应自动加载，但超过5秒仍未加载完成。请检查您的网络连接，若问题持续请寻求支持。（您也可以查看浏览器控制台日志获取更多详情。）

详细错误信息：
Highcharts is not defined

环境版本 #

• Python: 3.10.13
• highcharts-core: 1.3.7
• ipython: 8.16.0
• ipykernel: 6.25.2
• jupyter_client: 8.3.1

已尝试的解决方法 #

• 清除单元格输出
• 重启Jupyter内核

解决建议 #

1. 手动引入Highcharts.js脚本 #

在Notebook顶部添加单独的代码单元格，运行以下JavaScript代码手动配置Highcharts加载路径：

%%javascript
require.config({
    paths: {
        highcharts: 'https://code.highcharts.com/highcharts'
    }
});

执行该单元格后，再运行绘图代码。

2. 检查网络/代理设置 #

若机器使用代理服务器，确认代理允许访问Highcharts的CDN域名；或切换至无代理网络环境重试加载。

3. 调整highcharts-core版本 #

部分版本兼容性问题可能导致加载失败，尝试降级到稳定版本：

pip install highcharts-core==1.3.5

4. 本地托管Highcharts.js #

1. 从Highcharts官网下载highcharts.js文件至本地
2. 在Notebook中配置本地路径加载脚本：

%%javascript
require.config({
    paths: {
        highcharts: '/absolute/path/to/local/highcharts'
    }
});

注意替换路径为实际文件所在的绝对路径，确保Jupyter服务器有权访问该文件。

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