如何将本地Plotly HTML图表嵌入Quarto Notebook并实现可移植？

你遇到的问题核心是：IFrame通过引用外部文件加载图表，而Quarto的self-contained: true不会自动嵌入IFrame指向的独立HTML文档。以下是两种可行的解决方法：

方法一：通过Python直接输出HTML内容 #

替换原来的IFrame代码，改为读取本地Plotly HTML文件内容并直接输出，让Quarto将内容嵌入最终HTML：

from IPython.display import HTML

# 读取本地Plotly图表HTML文件
with open('volcano_plot_1.html', 'r', encoding='utf-8') as f:
    plot_content = f.read()

# 包裹样式指定宽高，输出HTML
HTML(f'<div style="width: 1200px; height: 600px; overflow: auto;">{plot_content}</div>')

如果不想显示这段代码，可在代码块头部添加echo: false：

from IPython.display import HTML

with open('volcano_plot_1.html', 'r', encoding='utf-8') as f:
    plot_content = f.read()

HTML(f'<div style="width: 1200px; height: 600px; overflow: auto;">{plot_content}</div>')

方法二：使用Quarto原生include-html语法 #

无需Python代码，直接在.qmd文档中用Quarto内置指令嵌入HTML内容，更简洁：

<div style="width: 1200px; height: 600px; overflow: auto;">
{{< include-html "volcano_plot_1.html" >}}
</div>

关键配置要求 #

无论用哪种方法，都必须在.qmd的YAML头部添加以下配置，确保生成完全独立的HTML文件：

---
title: "你的文档标题"
self-contained: true
---

为什么之前的方法无效？ #

Quarto的self-contained: true只会处理文档内的资源（如图片、CSS、JS脚本），但不会解析IFrame的src属性去嵌入外部HTML文件——因为IFrame本质是加载另一个独立的网页文档，不属于当前文档的资源范畴。

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