python将plotly plot保存到本地文件并插入html [英] python save plotly plot to local file and insert into html
问题描述
我正在使用python并密谋生成交互式html报告. 这篇文章提供了一个不错的框架. /p>
如果我在线生成图(通过绘图)，然后将url插入html文件，则可以，但是刷新图表需要很长时间.我想知道是否可以脱机生成图表并将其嵌入到html报告中，这样加载速度就不会成为问题.
我发现离线图会为图表生成一个html，但是我不知道如何将其嵌入到另一个html中.有人可以帮忙吗?
选项1 :在Jupyter Notebook中使用plotly的脱机功能(我想您是从提供的链接中使用Jupyter Notebook的) ).您可以简单地将整个笔记本另存为HTML文件.当我这样做时，唯一的外部参考是JQuery； plotly.js将内联在HTML源代码中.
选项2 :最好的方法可能是直接针对plotly的JavaScript库进行编码.可以在这里找到相关文档: https://plot.ly/javascript/
更新:调用内部函数从来都不是一个好主意.我建议使用@Fermin Silva给出的方法.在较新的版本中，现在还具有专用功能:plotly.io.to_html(请参见 https://plotly.com/python-api-reference/generated/plotly.io.to_html.html )
Hacky Option 3 (Hacky选项3 )(原始版本仅供参考):如果您确实想继续使用Python，则可以使用一些技巧来提取它生成的HTML.您需要一些最新版本的plotly(我用plotly.__version__ == '1.9.6'测试了它).现在，您可以使用内部函数来获取生成的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文档正文中的某个位置.只要确保您在头部包含对plot的引用即可:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
或者，您也可以引用用于生成HTML或内联JavaScript源的精确绘图版本(这会删除任何外部依赖关系；但是请注意法律方面).
您最终得到一些这样的HTML代码:
<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的未来版本而中断.
I am using python and plotly to product interactive html report. This post gives a nice framework.
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.
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?
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.
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/
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 (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)
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>
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).
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>
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.
这篇关于python将plotly plot保存到本地文件并插入html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
