以交互模式在 qwebview 中打开 plotly

时间：2023-08-07

本文介绍了以交互模式在 qwebview 中打开 plotly的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我面临两个主要问题:

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

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

这篇关于以交互模式在 qwebview 中打开 plotly的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：React Native - 如何从 ScrollView 获取视图的 Y 偏移值 下一篇：使用@font face 时在 QtWebEngine 中忽略 Google 字体 (

以交互模式在 qwebview 中打开 plotly

问题描述

推荐答案

相关文章

最新文章