python - 将绘图保存到本地文件并插入到 html

Question

我正在使用 python 和 plotly 来生成交互式 html 报告。 This post提供了一个很好的框架。

如果我在线生成绘图(通过 plotly)，并将 url 插入 html 文件，它可以工作，但刷新图表需要很长时间。我想知道我是否可以离线生成图表并将其嵌入到 html 报告中，这样加载速度就不是问题了。

我发现离线绘图会为图表生成一个 html，但我不知道如何将它嵌入到另一个 html 中。有人可以帮忙吗？

Answer 1

目前有一个更好的选择，即离线绘制到 div 中，而不是完整的 html。 此解决方案不涉及任何黑客攻击。

如果你打电话:

plotly.offline.plot(data, filename='file.html')

它会创建一个名为 file.html 的文件并在您的网络浏览器中打开它。但是，如果你这样做:

plotly.offline.plot(data, include_plotlyjs=False, output_type='div')

该调用将返回一个字符串，其中仅包含创建数据所需的 div，例如:

<div id="82072c0d-ba8d-4e86-b000-0892be065ca8" style="height: 100%; width: 100%;" class="plotly-graph-div"></div>
<script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("82072c0d-ba8d-4e86-b000-0892be065ca8", 
[{"y": ..bunch of data..., "x": ..lots of data.., {"showlegend": true, "title": "the title", "xaxis": {"zeroline": true, "showline": true}, 
"yaxis": {"zeroline": true, "showline": true, "range": [0, 22.63852380952382]}}, {"linkText": "Export to plot.ly", "showLink": true})</script>

请注意，它只是您应该嵌入更大页面的 html 的一小部分。为此，我使用了标准模板引擎，例如 Jinga2。

使用它，您可以创建一个 html 页面，其中包含按您想要的方式排列的多个图表，甚至可以将其作为 对 ajax 调用的服务器响应返回，非常棒。

更新:

请记住，您需要包含 plotly js 文件才能使所有这些图表正常工作。

你可以包括

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 

就在放置你得到的 div 之前。如果你把这个js放在页面底部，图表将不起作用。