以交互模式在 qwebview 中打开 plotly

2022-01-12 00:00:00 python plotly pyqt5 javascript qwebview

我在 python 的离线模式下使用 plotly 库，我想做的是创建一些绘图，将它们保存为本地 html 并在第二时间加载到 QWebView 中.

I'm using plotly library in offline mode with python and what I'm trying to do is to create some plot, save them as local html and load in a second moment into a QWebView.

这是带有虚拟变量的箱线图的代码:

This is the code for a boxplot with a dummy variable:

from PyQt5.QtWebKitWidgets import QWebView
import plotly
import plotly.graph_objs as go

x1 = [10, 3, 4, 5, 20, 4, 3]

trace1 = go.Box(
x = x1)

layout = go.Layout(
    showlegend = True
)


data = [trace1]
fig = go.Figure(data=data, layout = layout)

fn = '/home/matteo/plot.html'
plotly.offline.plot(fig, filename = fn, 
auto_open = False)

view = QWebView()
view.load(QUrl.fromLocalFile(fn))
view.show()

我面临两个主要问题:

  1. 如果我让代码保持原样，QWebView 将不会显示图像中的任何内容:

  1. if I let the code as it is, the QWebView won't show anything like in the image:

如果我使用标准浏览器(例如 Firefox)打开 html 文件，我可以看到绘图并与之交互，这很好.但是，如果我将浏览器中的 html 页面保存在本地目录中并尝试将保存的文件加载到 QWebView 中，我可以看到该图，但无法与之交互(可能缺少一些 Javascript?！):

if I open the html file with the standard browser (Firefox for example), I can see and interact with the plot, and that's fine. But if I save the html page from the browser in a local directory and try to load the saved file into the QWebView I can see the plot, but cannot interact with it (maybe for some Javascript missing?!):

有人知道如何将交互式离线制作的图表嵌入到 QWebView 中吗?

Anybody has some ideas how to embed an interactive offline made chart into a QWebView?

推荐答案

好的，我应该找到问题所在了.

Ok, I should have find what the problem is.

QWebView 加载本地文件似乎有些困难，因为它太重了(简单绘图大约 2mb).

Is seems that QWebView has some difficulties to load the local file because it is too heavy (about 2mb for simple plot).

所以我在保存本地文件时使用了 not 选项来包含 javascript 并稍后加载 javascript 谢谢，如此处所述.

So I used the option to not include the javascript when saving the local file and to load the javascript in a second moment thanks, as described here.

也就是说，创建初始的html标签，包含plotly生成的图形的结果，不包含整个javascript代码，并包含javascript的链接.

In other words, create the initial html tags, include the result of the figure generated by plotly without the whole javascript code, and include the link of the javascript.

这样文件超级轻，QWebView打开也没有问题.

In this way the file is super light and QWebView does not have issue to open it.

# create the initial html code
raw_html = '<head><meta charset="utf-8" /></head>''<head><meta charset="utf-8" /><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>'

# call the plot method without all the javascript code
raw_html += plotly.offline.plot(fig, filename = fn, include_plotlyjs=False)

# close the body and html tags
raw_html += '</body></html>'

相关文章