首页 > 网页制作 >如何从Plotly图表获取HTML字符串

如何从Plotly图表获取HTML字符串

来源：互联网 2026-06-19 08:32:01

html资讯合集

使用Plotly中通过to_html获取HTML字符串，而非write_html写入文件。设置full_html=False可生成仅包含图表的HTML代码片段，便于嵌入。参数include_plotlyjs控制是否内联JavaScript库，需根据页面是否已加载该库来权衡文件体积与自包含性，从而避免重复加载，提高加载效率。

问题描述：`write_html()` 只写文件不返回字符串

你有没有遇到过这种场景：辛辛苦苦用 Plotly 做出一张图表，想直接把它嵌入到 Flask、Dash 或者 Jinja2 模板里，结果调用 write_html() 折腾半天，发现它只负责写文件、不返回字符串，最后拿到手的只有 None——说实话，这问题要是没仔细看文档，还真挺容易栽进去。

其实，Plotly 在设计上把两件事分得很清楚：write_html() 是“写入文件”的接口，它只管把 HTML 写到磁盘上，随后返回 None；而真正用来生成 HTML 字符串的，是 to_html() 方法。很多开发者误以为 fig.write_html(..., full_html=False) 可以返回字符串，结果发现文档里写得很模糊，这点连 Plotly 官方 GitHub 上的 Issue #3599 都承认过，属于文档表述容易让人误解的地方。所以，别让它再坑你一次了。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

如何从Plotly图表获取HTML字符串

正确方法：使用 `plotly.io.to_html()` 或 `fig.to_html()`

正确的做法很简单——直接用 plotly.io.to_html()（或者 fig.to_html()），它是专门为生成 HTML 字符串而设计的函数。来看一个实际例子：

import plotly.express as px

# 先画个简单的散点图做演示
fig = px.scatter(x=[1, 2, 3], y=[4, 5, 6], title="Sample Scatter")

#  获取只包含  的 HTML 字符串，不输出完整 HTML 结构
div_html = fig.to_html(full_html=False, include_plotlyjs=True)
print(len(div_html))  # 约 3.5 MB（包含完整 Plotly.js）

#  推荐做法：排除内联 JS，体积一下降到约 8 KB，前提是页面已经加载了 Plotly.js
div_embeddable = fig.to_html(full_html=False, include_plotlyjs=False)
print(len(div_embeddable))  # 约 8,000 字符

注意事项：`include_plotlyjs` 参数的权衡

如果设置了 include_plotlyjs=False，那么前端页面必须提前引用 Plotly.js，比如通过，否则图表渲染不出来。
如果你希望生成的 HTML 片段完全自包含，离线也能用，那就保留 include_plotlyjs=True。不过一定要掂量一下：整个 JS 库有好几兆，会不会拖慢页面加载、缓存怎么处理，都是需要权衡的。
to_html() 还支持不少实用参数，比如 default_height、default_width、post_script（用于注入初始化脚本），在需要复杂集成的场景下特别好用。