如何在 HTML 网页中显示多个 Plotly 图？ （使用 plot_div）
Posted
技术标签:
【中文标题】如何在 HTML 网页中显示多个 Plotly 图？ （使用 plot_div）【英文标题】：How to display multiple Plotly graphs in a HTML webpage? (using plot_div) 【发布时间】：2022-01-14 19:00:39 【问题描述】：我想在 html 网页中显示多个绘图图。我尝试了很多代码，但我发现最简单的一个是这样的：
在我的视图函数中，我有：
for graphs in res:
plot_div = plot(res[graphs], output_type='div')
return render(request, '__', context='plot_div': plot_div, "result": res)
在我的 HTML 中，我有：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
% autoescape off %
plot_div
% endautoescape %
</body>
</html>
但是，只显示最后一个图表。这是因为变量 plot_div 在 for 循环下不断更新。因此，我尝试像这样创建一个字典：
plot_div = dict()
for index, graphs in enumerate(res, 1):
plot_div.update(index: plot(res[graphs], output_type='div'))
return render(request, 'account/user/IndFin/indfin_resultado.html', context='plot_div': plot_div, "result": res)
因此，我需要将 HTML 更改为：
% for graphs in plot_div %
plot_div.graphs
% endfor %
但是，结果我在我的网页中再次获得了矩阵结果和最后一个图表。根本没有graphS，只有最后一个。有没有人遇到过这样的问题？
谢谢
【问题讨论】：
我认为this 可能会帮助你！ 【参考方案1】：我认为您需要一个字典列表而不是字典，例如
plot_div = [index: plot(res[graphs], output_type='div') for index, graphs in enumerate(res, 1)]
return render(request, 'account/user/IndFin/indfin_resultado.html', context='plot_div': plot_div, "result": res)
在你的模板中
% for plot in plot_div %
plot .output_type
% endfor %
【讨论】：
以上是关于如何在 HTML 网页中显示多个 Plotly 图？ （使用 plot_div）的主要内容，如果未能解决你的问题，请参考以下文章
Plotly：将绘图图导出为 png 时如何仅导出活动图例？
如何在 plotly 中覆盖同一图中的两个图（在 plotly 中创建帕累托图）？