获取 <脚本>和 <div>来自 Plotly 的标签使用 Python

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

我想知道是否有人知道获取 <script>< 的好方法(最好是内置方法,但我当然愿意编写自己的方法);div> 来自 Plotly 离线客户端的 HTML 输出的标签.

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

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

解决方案

如果调用:

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

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

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

该调用将返回一个字符串,其中仅包含创建图表所需的 div,您可以将其存储在您想要的任何变量中(而不是磁盘).

我刚刚尝试过,它返回了,对于我正在做的给定图表:

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

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

更新:

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

您可以在放置 div 之前包含 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>拿到.如果你把这个js放在页面底部,图表就不行了.

I was wondering if anyone knew a good way (preferably a built in method, but I'm open to writing my own of course) to get the <script> and <div> tags from the HTML output of the Plotly offline client.

I'm already familiar with bokeh and really enjoy using it for 2D visualization, but would really like to integrate Plotly as well for its 3D visualization capabilities.

Let me know if you need any extra details about the project.

解决方案

If you call:

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

It creates a file named file.html and opens it up in your web browser. However, if you do:

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

the call will return a string with only the div required to create the chart, which you can store in whatever variable you desire (and not to disk).

I just tried it and it returned, for a given chart that I was doing:

<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>

Notice how its just a tiny portion of an html that you are supposed to embed in a bigger page. For that I use a standard template engine like Jinga2.

With this you can create one html page with several charts arranged the way you want, and even return it as a server response to an ajax call, pretty sweet.

Update:

Remember that you'll need to include the plotly js file for all these charts to work.

You could include <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> just before putting the div you got. If you put this js at the bottom of the page, the charts won't work.

相关文章