能否无需预先运行Colab代码即可显示Plotly HTML交互式图表？

核心问题在于Colab的笔记本渲染机制：未运行的笔记本只会解析单元格内的静态内容，而默认的Plotly输出在保存时并没有把完整的交互式HTML嵌入到单元格，仅保留了静态PNG或空占位符。以下是两种直接有效的解决方法：

方法1：在Papermill运行时直接嵌入Plotly HTML到单元格输出 #

这是最直接的自动化方案，利用Papermill的输出写入功能，把交互式图表的HTML代码直接保存到笔记本单元格中，Colab打开时会自动渲染：

1. 修改你的脚本/参数化笔记本，生成图表后直接输出HTML片段：

   import plotly.express as px
   from IPython.display import HTML
   
   # 生成气象数据图表（示例）
   fig = px.line(weather_data, x="timestamp", y="temperature", title="Hourly Temperature")
   # 将图表转为依赖CDN的HTML片段
   chart_html = fig.to_html(full_html=False, include_plotlyjs='cdn')
   # 输出HTML到单元格，Papermill会将此保存为笔记本的静态输出
   display(HTML(chart_html))
   

2. 当Papermill定时运行并保存到Google Drive后，打开Colab笔记本时，对应单元格会自动加载Plotly CDN的JS资源，渲染出交互式图表，无需重新运行。

方法2：预存图表JSON并嵌入静态渲染代码 #

如果需要更灵活的图表更新，可以把图表结构保存为JSON，然后在笔记本中嵌入静态HTML代码直接渲染：

1. 在Papermill运行的脚本中，导出图表JSON并保存到Google Drive：

   fig_json = fig.to_json()
   with open('/content/drive/MyDrive/weather_chart.json', 'w') as f:
       f.write(fig_json)
   

2. 在Colab笔记本中添加一个静态HTML单元格（无需运行），直接读取JSON并渲染：

   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <div id="temperature-chart"></div>
   <script>
     // 直接将fig_json的内容粘贴到此处，避免依赖外部文件
     const chartData = {"data": [...], "layout": {...}};
     Plotly.newPlot('temperature-chart', chartData.data, chartData.layout);
   </script>
   

   这种方式适合需要手动调整图表配置的场景，但自动化程度低于方法1。

关键注意事项 #

• 优先使用include_plotlyjs='cdn'，既避免庞大的JS文件占用空间，又能保证Colab正常加载渲染资源。
• 对于依赖本地文件的其他笔记本，同理可将静态资源（如可视化HTML、图片）直接嵌入到单元格输出，而非依赖运行时加载本地文件。

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