求助：nbviewer无法渲染Jupyter的ipywidgets交互式组件怎么办？

我在Jupyter Lab（3.6.3版本）中使用ipywidgets（8.0.6版本）的interact()创建了一个交互式组件，可选择数据框中的列生成Plotly可视化图表，在本地Jupyter Lab中可正常工作。但将Notebook推送到GitHub后，在nbviewer中查看时，该组件仅显示文本：

interactive(children=(Dropdown(description='col_selected', options=('time_period_desc_fixed', 'price_type', 's…*

需要实现该组件在nbviewer中可见且可交互，让用户能通过下拉框选择不同列查看对应图表。

已尝试操作 #

• 在Jupyter Lab中开启「自动保存组件状态」设置，保存正常工作的组件后推送到GitHub
• 使用nbconvert命令行和Jupyter Lab导出HTML的方式转换Notebook，HTML文件中存在交互式下拉框，但图表未渲染，仅显示未解析的HTML代码
• 使用Jupyter Notebook并选择「保存组件状态」后推送到Git

解决方案 #

1. 嵌入ipywidgets交互式状态到Notebook #

通过ipywidgets.embed模块导出组件的交互式状态，再嵌入到Notebook中：

from ipywidgets import embed
# 假设你的interact实例命名为interactive_component
embed.embed_minimal_html('column_selector.html', views=[interactive_component], title='Column Visualization')

将导出的column_selector.html文件与Notebook一同推送到GitHub，然后在Notebook的对应单元格中用Markdown插入iframe嵌入该文件：

<iframe src="column_selector.html" width="100%" height="600" frameborder="0"></iframe>

nbviewer会加载这个HTML文件，完整保留组件的交互性。

2. 使用Voila生成独立交互式应用 #

Voila专为Jupyter Notebook的交互式展示设计，能完整保留ipywidgets和Plotly的交互性：

• 安装Voila：

pip install voila

• 本地验证：运行voila your_notebook.ipynb确认组件正常工作
• 将Voila生成的静态HTML文件推送到GitHub Pages托管，或使用支持Voila的平台部署，用户可通过托管链接访问完整的交互式功能

3. 改用Plotly原生下拉组件 #

如果仅需列选择的交互功能，可直接用Plotly内置的updatemenus实现，无需依赖ipywidgets，这种方式生成的图表在nbviewer中可直接交互：

import plotly.graph_objects as go
import pandas as pd

# 假设数据框为df
fig = go.Figure()

# 添加所有列的可视化轨迹，初始设为隐藏
target_cols = ['time_period_desc_fixed', 'price_type', ...] # 替换为你的列名列表
for col in target_cols:
    fig.add_trace(go.Histogram(x=df[col], name=col, visible=False))

# 设置第一列默认可见
fig.data[0].visible = True

# 创建下拉菜单按钮
dropdown_buttons = []
for idx, col in enumerate(target_cols):
    dropdown_buttons.append({
        'label': col,
        'method': 'update',
        'args': [{'visible': [i == idx for i in range(len(fig.data))]}]
    })

# 更新图表布局，添加下拉菜单
fig.update_layout(
    updatemenus=[{
        'buttons': dropdown_buttons,
        'direction': 'down',
        'showactive': True,
        'x': 0.1,
        'y': 1.15
    }],
    title='Column Visualization Selector'
)

fig.show()

Plotly图表通过JavaScript渲染，nbviewer支持加载Plotly的CDN资源，因此能直接展示交互式效果。

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