gpt4 book ai didi

python - 使用 python 绘制图形并使用 HTML 显示它

转载 作者:太空狗 更新时间:2023-10-29 15:25:46 26 4
gpt4 key购买 nike

我想使用 plotly 构建一个离线应用程序来显示图形。我在后端使用 python(flask),在前端使用 HTML(javascript)。目前,我能够通过将图形数据作为 JSON 对象发送到前端并在前端本身使用 plotly.js 构建图形来绘制图形。但我真正想要的是在服务器端(后端即 python)本身构建图形,然后在 HTML 中显示数据。我已经浏览了在 python 中构建图形的 plotly 文档,但我不知道如何将构建图形发送到前端进行显示:(有人可以帮我吗?PS:我想构建一个离线应用程序更新代码

$(window).resize(function() {
var divheight = $("#section").height();
var divwidth = $("#section").width();
var update = {
width:divwidth, // or any new width
height:divheight // " "
};

var arr = $('#section > div').get();
alert(arr[1]);
Plotly.relayout(arr[0], update);
}).resize();
});

最佳答案

我的建议是使用 plotly.offline模块,它为您创建一个离线版本的绘图。他们网站上的 plotly API 太可怕了(我们实际上并不想知道每个函数接受什么参数,对吗??),因此转向 Github 上的源代码要好得多。

如果您查看 plotly 源代码,您会发现 offline.plot函数接受 output_type 的 kwarg ,它是 'file''div' :

https://github.com/plotly/plotly.py/blob/master/plotly/offline/offline.py

所以你可以这样做:

from plotly.offline import plot
from plotly.graph_objs import Scatter

my_plot_div = plot([Scatter(x=[1, 2, 3], y=[3, 1, 6])], output_type='div')

这将为您提供代码(包装在 <div> 标记中)以直接插入到您的 HTML 中。也许不是最有效的解决方案(因为我很确定它也嵌入了相关的 d3 代码,可以为重复请求缓存),但它是独立的。

要使用 Flask 将您的 div 插入到您的 html 代码中,您需要做一些事情。

在结果页面的 html 模板文件中,为绘图代码创建一个占位符。 Flask 使用 Jinja 模板引擎,所以这看起来像:

<body>
....some html...

{{ div_placeholder }}

...more html...
</body>

在你的 Flask 中 views.py文件,您需要使用插入到 div_placeholder 中的绘图代码渲染模板变量:

from plotly.offline import plot
from plotly.graph_objs import Scatter
from flask import Markup
...other imports....

@app.route('/results', methods=['GET', 'POST'])
def results():
error = None
if request.method == 'POST':
my_plot_div = plot([Scatter(x=[1, 2, 3], y=[3, 1, 6])], output_type='div')
return render_template('results.html',
div_placeholder=Markup(my_plot_div)
)
# If user tries to get to page directly, redirect to submission page
elif request.method == "GET":
return redirect(url_for('submission', error=error))

显然是 YMMV,但这应该能说明基本原理。请注意,您可能会收到使用 POST 数据的用户请求,您需要处理这些数据才能创建绘图。

关于python - 使用 python 绘制图形并使用 HTML 显示它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37912260/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com