在folium弹窗中嵌入Plotly柱状图失败，寻求解决方法

问题场景 #

在Google Colab中尝试将Plotly柱状图嵌入Folium弹窗，执行代码后弹窗显示为空，但单独打开生成的HTML文件能正常看到柱状图，核心问题是iframe沙箱限制阻止了Plotly脚本执行，同时存在外部资源加载的潜在障碍。

解决方案 #

通过以下针对性修改即可解决问题：

修改要点 #

• 跳过文件读写环节，直接生成Plotly HTML字符串
• 内联Plotly JS资源，避免CDN加载依赖
• 解除iframe的沙箱限制，允许脚本执行

修改后的完整代码 #

# 初始化基础地图
map = folium.Map(location=[47.9060278, 1.9020353], zoom_start=6, tiles='OpenStreetMap')

# 生成Plotly柱状图并直接转为HTML字符串
fig = px.bar(a003_pdv_ca_his, x='mm', y='ca')
# 内联Plotly JS资源，确保在iframe中能正常加载
html = fig.to_html(include_plotlyjs='inline')

# 创建iframe容器
iframe = branca.element.IFrame(html=html, width=500, height=300)

# 创建弹窗，解除沙箱限制以允许脚本运行
popup = folium.Popup(iframe, max_width=500, sandbox='allow-scripts allow-same-origin')

# 添加标记到地图
folium.Marker(
    location=[row.lat, row.lon],
    popup=popup,
    icon=folium.Icon(color=row.ins_clr)
).add_to(map)

map

关键修改说明 #

1. 直接生成HTML字符串：使用fig.to_html()替代写入文件再读取的流程，避免路径权限、编码等额外问题。
2. 内联JS资源：include_plotlyjs='inline'将Plotly的JavaScript代码直接嵌入HTML，无需依赖外部CDN，确保在Colab的iframe环境中资源能正常加载。
3. 解除沙箱限制：sandbox='allow-scripts allow-same-origin'允许iframe内执行脚本并访问同源资源，解决默认沙箱限制导致的Plotly脚本无法运行问题。

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