使用 Python 从 Plotly 获取 <script> 和 <div> 标签答案

【问题标题】：Getting <script> and <div> tags from Plotly using Python使用 Python 从 Plotly 获取 <script> 和 <div> 标签
【发布时间】：2016-10-07 13:54:18
【问题描述】：

我想知道是否有人知道一种从 Plotly 脱机的 HTML 输出中获取 <script> 和 <div> 标记的好方法（最好是内置方法，但我当然愿意编写自己的方法）客户。

我已经熟悉散景，并且非常喜欢将它用于 2D 可视化，但我真的很想集成 Plotly 以及它的 3D 可视化功能。

如果您需要有关该项目的任何其他详细信息，请告诉我。

【问题讨论】：

你能提供一个简短的例子吗？把它放在像 jsfiddle 这样的网站上，这样人们就可以玩它了。
生成Plotly对象的html页面后，可以使用Beautiful soup提取html标签。
一个例子？属于哪一部分？感谢您的帮助
正如@NickilMaveli 建议的那样，Beautiful Soup 应该可以完成工作。此外，保存绘图的 div 标签有一个特定的类名，因此它应该更容易获取正确的代码块。
假设你有你的 html 文件，它通过 Plotly 的离线绘图下载到你的本地机器。然后你可以做一些简单的事情，比如soup = BeautifulSoup(urllib.urlopen(html_file)) 并使用soup.findAll，从适当的标签中提取元素。

标签： python html plotly

【解决方案1】：

如果你打电话：

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 文件才能使所有这些图表正常工作。

您可以在放置您获得的 div 之前添加 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>。如果你把这个js放在页面底部，图表就不行了。

【讨论】：

文档从 plot.ly/python 开始，但它非常基于示例，而且不是超级完整。还有plot.ly/python/offline 和一个非常完整的参考：plot.ly/python/reference。否则你可能只是阅读源代码：github.com/plotly/plotly.py/blob/master/plotly/offline/…
抱歉之前的困惑，我似乎一直在阅读您的答案错误，再次感谢您的帮助！我希望我在最初阅读您的答案时更加彻底......
没问题老兄:)
plotly.offline.plot(data, include_plotlyjs="cdn", output_type="div") ... 将为您提供一个带有必要的 plotly js 的 div，以便可以嵌入 div 并你完成了
什么是 plotly.js 文件？我正在尝试在 Linux 中运行 Python 脚本来实现此解决方案，以便创建 Plotly 图并生成 HTML 文件。它会生成一个 HTML 文件，但打开时该图是空白的。我不确定添加“plotly js”文件以使其工作是什么意思。

【解决方案2】：

对于 Plotly 4，使用 plotly.io.to_html:

import plotly

# Returns a `<div>` and `<script>`
plotly.io.to_html(figure, include_plotlyjs=False, full_html=False)

# Returns a full standalone HTML
plotly.io.to_html(figure)

参考：https://plotly.com/python-api-reference/generated/plotly.io.to_html.html

【讨论】：

【解决方案3】：

为 necro-answer 道歉真的很想为留下的 Fermin Silva (https://stackoverflow.com/a/38033016/2805700) 添加评论 - 但长期的潜伏者声誉阻止了我。

无论如何我也有类似的需求，并且遇到了 plotly 2.2.2 的问题

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

include_plotlyjs 参数在输出到 div 时被忽略。基于上面的cmets，我找到了一种解决方法。基本上让情节绘图到文件，这确实尊重include_plotlyjs 参数。加载到漂亮的汤中，并在cdn上注入最新的plotly.js的链接。

import plotly
import bs4

# return as html fragment
# the include_plotlyjs argument seems to be 
# ignored as it's included regardless when outputting to div
# found an open issue on here - https://github.com/plotly/plotly.py/issues/1043
plotly.offline.plot(
    plot_output, 
    filename = filename,
    config = plot_config,
    include_plotlyjs = False,
    auto_open = False,
)

# load the file
with open(filename) as inf:
    txt = inf.read()
    soup = bs4.BeautifulSoup(txt)

# add in the latest plot-ly js as per https://stackoverflow.com/a/38033016/2805700
js_src = soup.new_tag("script", src="https://cdn.plot.ly/plotly-latest.min.js")
# insert it into the document
soup.head.insert(0, js_src)

# save the file again
with open(filename, "w") as outf:
    outf.write(str(soup))

干杯

【讨论】：