嵌入Spectacle编辑器后Dash图表交互性丢失问题排查

我用以下小样本数据集（完整数据量更大）制作了带气泡悬停功能的Plotly图表，并嵌入Dash应用：

data = [{'id': {0: 70.0, 1: 77.0,2: 78.0,3: 83.0,4: 84.0,5: 85.0,6: 90.0,7: 96.0,8: 124.0,9: 125.0}, 'commits': {0: 32, 1: 32, 2: 32,3: 32,4: 37,5: 37,6: 10,7: 10,8: 10, 9: 10}, 'info_title': {0: 'SQAaaS API',1: 'SQAaaS API',2: 'SQAaaS API',3: 'SQAaaS API',4: 'Registry of Open Community Challenge API',5: 'Challenge API', 6: 'Onfido API',7: 'Onfido API', 8: 'Onfido API',9: 'Onfido API'}, 'API Age': {0: 74, 1: 74, 2: 74, 3: 74, 4: 22, 5: 22, 6: 124, 7: 124,8: 124, 9: 124}, 'Total_Versions': {0: 1, 1: 1, 2: 1, 3: 1,4: 1,5: 1, 6: 3, 7: 3,8: 3, 9: 3}} ]

图表及Dash应用代码如下：

fig = px.scatter(final_api, x="API Age", y="Total_Versions", color="commits", hover_name="info_title", height=900, width=1000, size='Total_Versions', size_max=30,color_continuous_scale=px.colors.sequential.Inferno)
fig.update_layout(
    template='ggplot2',
    yaxis_title=" Total number of versions",
    xaxis_title="Age of the API (in days)",
    yaxis_range=[0, 180],
    hoverlabel=dict(font_size=16, font_family="PT Sans"),font=dict(size=20, family='PT Sans'), paper_bgcolor='rgba(233,233,233,100)'
)
fig.update_xaxes(showline=True, linewidth=1, linecolor='black', mirror=True)
fig.update_yaxes(showline=True, linewidth=1, linecolor='black', mirror=True)
fig.show()


import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

app.run_server(debug=True, use_reloader=True)

该图表在VSCode Jupyter Notebook和浏览器中均能正常显示悬停交互，但将其放入Spectacle编辑器播放演示时，悬停功能失效。请问问题出在哪里？

核心原因 #

Spectacle演示模式下通常会限制JavaScript交互或采用静态渲染方式，而Plotly的悬停功能完全依赖前端JS处理鼠标事件、渲染悬浮框，直接嵌入Dash应用或静态图片会丢失交互所需的JS逻辑。此外还有两个细节问题：

• 你用的dash_core_components和dash_html_components是旧版Dash组件，新版已整合为dash.html和dash.dcc，旧版组件在外部环境兼容性较差。
• 直接嵌入Dash应用可能因跨域、iframe权限限制导致交互失效。

解决步骤 #

1. 替换为新版Dash组件
   把旧导入语句换成新版写法，提升兼容性：

   import dash
   from dash import dcc, html
   

2. 导出为独立可交互HTML文件
   跳过Dash应用，直接把Plotly图表导出为包含完整交互逻辑的HTML：

   fig.write_html("interactive_chart.html")
   

   之后在Spectacle中通过嵌入HTML的方式引入该文件，而非粘贴静态图或引用Dash地址。

3. 检查Spectacle嵌入权限
   如果用iframe嵌入应用或HTML文件，需确保Spectacle允许iframe传递鼠标事件、不限制JS执行，开启对应权限设置。

4. 简化配置排查问题
   暂时移除hoverlabel等自定义样式，先测试基础悬停功能是否生效，排除样式配置引发的异常：

   fig.update_layout(
       template='ggplot2',
       yaxis_title=" Total number of versions",
       xaxis_title="Age of the API (in days)",
       yaxis_range=[0, 180],
       font=dict(size=20, family='PT Sans'), 
       paper_bgcolor='rgba(233,233,233,100)'
   )
   

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