以交互模式在 qwebview 中打开 plotly

Posted

技术标签:

【中文标题】以交互模式在 qwebview 中打开 plotly【英文标题】:open plotly in qwebview in interactive mode 【发布时间】:2017-03-17 20:57:02 【问题描述】:

我在 python 的离线模式下使用plotly 库,我想做的是创建一些情节,将它们保存为本地 html 并立即加载到 QWebView 中。

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

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

我面临两个主要问题:

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

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

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

【问题讨论】:

【参考方案1】:

好的,我应该找到问题所在了。

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

所以我使用了选项在保存本地文件时包含javascript,并稍后加载javascript,谢谢,如here所述。

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

这样文件超级轻,QWebView 没有问题打开它。

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

【讨论】:

以上是关于以交互模式在 qwebview 中打开 plotly的主要内容,如果未能解决你的问题,请参考以下文章

如何在 QWebview 中显示本地 HTML?

QT:如何在点击事件上展开/折叠文本(qtextbrowser,qwebview,...)

PyQt4中QWebView的多线程

QWebView mailto 问题

如何从 PyQT 调用 javascript 函数

Mac OS X 上的透明 QWebView