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

2022-01-21 00:00:00 python plotly

问题描述

我正在使用 python 和 plotly 来生成交互式 html 报告.这篇文章提供了一个很好的框架.

I am using python and plotly to product interactive html report. This post gives a nice framework.

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

If I produce the plot(via plotly) online, and insert the url into the html file, it works but refreshing the charts takes a long time. I wonder if I could produce the chart offline and have it embedded in the html report, so that loading speed is not a problem.

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

I find plot offline would generate a html for the chart, but I don't know how to embed it in another html. Anyone could help?

解决方案

选项 1:在您的 Jupyter Notebook 中使用 plotly 的离线功能(我想您正在使用您提供的链接中的 Jupyter Notebook).您可以简单地将整个笔记本保存为 HTML 文件.当我这样做时，唯一的外部参考是 JQuery；plotly.js 将内联在 HTML 源代码中.

Option 1: Use plotly's offline functionality in your Jupyter Notebook (I suppose you are using a Jupyter Notebook from the link you are providing). You can simply save the whole notebook as a HTML file. When I do this, the only external reference is to JQuery; plotly.js will be inlined in the HTML source.

选项 2:最好的方法可能是直接针对 plotly 的 JavaScript 库进行编码.可在此处找到相关文档:https://plot.ly/javascript/

Option 2: The best way is probably to code directly against plotly's JavaScript library. Documentation for this can be found here: https://plot.ly/javascript/

更新:调用内部函数从来都不是一个好主意.我建议使用@Fermin Silva 给出的方法.在较新的版本中，现在还有一个专用函数:plotly.io.to_html(参见 https://plotly.com/python-api-reference/generated/plotly.io.to_html.html)

Update: Calling an internal function has never been a good idea. I recommend to use the approach given by @Fermin Silva. In newer versions, there now is also a dedicated function for this: plotly.io.to_html (see https://plotly.com/python-api-reference/generated/plotly.io.to_html.html)

Hacky Option 3(原版仅供参考):如果你真的想继续使用 Python，可以使用一些 hack 来提取它生成的 HTML.您需要一些最新版本的 plotly(我使用 plotly.__version__ == '1.9.6' 对其进行了测试).现在，您可以使用内部函数来获取生成的 HTML:

Hacky Option 3 (original version for reference only): If you really want to continue using Python, you can use some hack to extract the HTML it generates. You need some recent version of plotly (I tested it with plotly.__version__ == '1.9.6'). Now, you can use an internal function to get the generated HTML:

from plotly.offline.offline import _plot_html
data_or_figure = [{"x": [1, 2, 3], "y": [3, 1, 6]}]
plot_html, plotdivid, width, height = _plot_html(
    data_or_figure, False, "", True, '100%', 525)
print(plot_html)

您可以简单地将输出粘贴到 HTML 文档正文中的某个位置.只需确保在头部包含对 plotly 的引用:

You can simply paste the output somewhere in the body of your HTML document. Just make sure that you include a reference to plotly in the head:

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

或者，您还可以引用用于生成 HTML 或内联 JavaScript 源代码的确切 plotly 版本(这会删除任何外部依赖项；但请注意法律方面的问题).

Alternatively, you can also reference the exact plotly version you used to generate the HTML or inline the JavaScript source (which removes any external dependencies; be aware of the legal aspects however).

你最终会得到一些像这样的 HTML 代码:

You end up with some HTML code like this:

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <!-- Output from the Python script above: -->
  <div id="7979e646-13e6-4f44-8d32-d8effc3816df" style="height: 525; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("7979e646-13e6-4f44-8d32-d8effc3816df", [{"x": [1, 2, 3], "y": [3, 1, 6]}], {}, {"showLink": false, "linkText": ""})</script>
</body>
</html>

注意:函数名称开头的下划线表示 _plot_html 并不意味着从外部代码调用.因此，此代码很可能会在未来版本的 plotly 中中断.

Note: The underscore at the beginning of the function's name suggests that _plot_html is not meant to be called from external code. So it is likely that this code will break with future versions of plotly.

相关文章