如何在博客中嵌入Plotly交互式动画图表？解决渲染失效问题

阿华AIGC实验室

2026-5-29

解决Plotly Offline动画图表嵌入博客的问题

我之前也踩过一模一样的坑——用Plotly Offline在Jupyter里做的动画图表，用官方推荐的分享链接嵌入后，动画直接“罢工”了。下面是两个亲测有效的解决方法，你可以根据自己的博客平台灵活选择：

方法1：导出完整HTML文件嵌入（最简单易上手）

步骤1：在Jupyter里导出带依赖的HTML

在生成动画图表的代码末尾，用plotly.offline.plot()导出完整的HTML文件，关键要指定include_plotlyjs='cdn'（借助CDN加载Plotly.js，不用自己托管大体积的依赖文件）：

import plotly.offline as pyo
# 假设你的动画图表对象是fig
pyo.plot(fig, filename='my_animated_plot.html', include_plotlyjs='cdn', auto_open=False)

运行后会在当前目录生成一个HTML文件，先本地打开确认动画能正常播放。

步骤2：嵌入到博客

如果你的博客支持iframe（绝大多数平台都支持）：把这个HTML文件上传到你的网站服务器或静态托管服务（比如GitHub Pages），然后用iframe标签嵌入：
```
<iframe src="https://你的托管地址/my_animated_plot.html" width="100%" height="600" frameborder="0"></iframe>
```
如果博客不支持iframe：直接打开生成的HTML文件，复制从<div id="plotly-div-...">开始到最后一个</script>的所有内容，粘贴到博客的HTML编辑器模式下（别用可视化编辑器，会把代码转成纯文本）。因为我们用了include_plotlyjs='cdn'，这段代码会自动加载Plotly的CDN资源，动画就能正常运行。

方法2：导出JSON+用Plotly.js手动渲染（更灵活可控）

如果不想用iframe，或者需要自定义图表样式、扩展交互逻辑，可以试试这种方法：

步骤1：导出图表JSON数据

在Jupyter里把动画图表导出为JSON格式，这个文件只包含图表的结构和帧数据，体积非常小：

fig.write_json('my_animated_plot.json')

步骤2：在博客里用Plotly.js渲染

在博客的HTML编辑器中添加以下代码：

<!-- 引入Plotly.js的CDN -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- 放置图表的容器 -->
<div id="animated-chart" style="width: 100%; height: 600px;"></div>
<!-- 加载JSON并渲染动画 -->
<script>
// 替换成你的JSON文件托管地址
fetch('https://你的托管地址/my_animated_plot.json')
  .then(res => res.json())
  .then(chartData => {
    Plotly.newPlot('animated-chart', chartData.data, chartData.layout, {responsive: true});
  });
</script>

这样就能直接在博客页面内渲染出动画，还能自己调整容器样式或添加额外的交互逻辑。