Jupyter Notebook运行Bokeh滑块示例代码后图表不显示

官方画廊的示例默认面向独立HTML输出场景配置，直接放到Jupyter Notebook中运行时，缺少Jupyter环境专属的Bokeh渲染初始化逻辑，因此执行无报错但不会渲染出交互图表。

• 首先在代码头部添加Jupyter渲染初始化逻辑：
  导入output_notebook方法，并在调用show()前执行一次该方法，让Bokeh把输出目标设置为Notebook的内联输出区域，而非默认的独立HTML文件。
• 匹配当前使用的Jupyter环境做对应配置：
  • 若使用经典Jupyter Notebook（6.x及以下版本）：完成上述初始化后即可直接运行代码，无需额外操作
  • 若使用Jupyter Lab（3.0及以上版本）：需要先安装对应Bokeh扩展，在终端执行命令jupyter labextension install @bokeh/jupyter_bokeh，安装完成后重启Jupyter Lab内核即可
  • 若使用VS Code内置的Notebook功能：仅需添加上述初始化代码，无需安装额外扩展
• 排查配置冲突：如果初始化后依然不显示，检查代码中是否误调用了output_file()方法，该方法会将输出重定向到本地磁盘的HTML文件，覆盖Notebook内联渲染的配置。

提示：output_notebook()仅需要在当前Notebook内核生命周期内执行一次，无需在每个绘图单元格重复调用。

import numpy as np
# 新增Jupyter渲染依赖导入
from bokeh.io import output_notebook
from bokeh.layouts import column, row
from bokeh.models import CustomJS, Slider
from bokeh.plotting import ColumnDataSource, figure, show

# 初始化Notebook内联渲染，必须在show()调用前执行
output_notebook()

x = np.linspace(0, 10, 500)
y = np.sin(x)

source = ColumnDataSource(data=dict(x=x, y=y))

plot = figure(y_range=(-10, 10), width=400, height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

amp_slider = Slider(start=0.1, end=10, value=1, step=.1, title="Amplitude")
freq_slider = Slider(start=0.1, end=10, value=1, step=.1, title="Frequency")
phase_slider = Slider(start=0, end=6.4, value=0, step=.1, title="Phase")
offset_slider = Slider(start=-5, end=5, value=0, step=.1, title="Offset")

callback = CustomJS(args=dict(source=source, amp=amp_slider, freq=freq_slider, phase=phase_slider, offset=offset_slider),
                    code="""
    const data = source.data;
    const A = amp.value;
    const k = freq.value;
    const phi = phase.value;
    const B = offset.value;
    const x = data['x']
    const y = data['y']
    for (let i = 0; i < x.length; i++) {
        y[i] = B + A*Math.sin(k*x[i]+phi);
    }
    source.change.emit();
""")

amp_slider.js_on_change('value', callback)
freq_slider.js_on_change('value', callback)
phase_slider.js_on_change('value', callback)
offset_slider.js_on_change('value', callback)

layout = row(
    plot,
    column(amp_slider, freq_slider, phase_slider, offset_slider),
)

show(layout)

补充说明：上述示例基于CustomJS实现纯前端交互，滑块拖动调整曲线时不需要和Python内核通信，渲染完成后即使断网也可以正常使用交互功能。

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