使用 python 绘制图形并使用 HTML 显示它
Posted
技术标签:
【中文标题】使用 python 绘制图形并使用 HTML 显示它【英文标题】：Plotting graph using python and dispaying it using HTML 【发布时间】：2016-10-21 02:28:54 【问题描述】：我想使用 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();
);
【问题讨论】：
【参考方案1】：您可以使用.to_html() 方法：
https://plot.ly/python-api-reference/generated/plotly.graph_objects.Figure.html#plotly.graph_objects.Figure.to_html
import plotly.express as px
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
div = fig.to_html(full_html=False) # Get the <div> to send to your frontend and embed in an html page
【讨论】：
【参考方案2】：我的建议是使用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 数据获取用户请求，您需要处理该请求以创建绘图图。
【讨论】：
嗨 Andrew，感谢您的回答 :) 假设 my_plot_div 是一个 ，您能否指导我如何将这个 div 信息传输到前端？早些时候，我曾经将 JSON（包含数据、布局等信息，但仍未绘制信息）从服务器传输到前端以进行显示....在这种情况下我该怎么做:(提前非常感谢 :) 我已经编辑了我的答案以包含有关使用 Flask 呈现此数据的信息。 非常感谢 Andrew .... 非常感谢 :) Cas 我为 plotly 生成的这个 div 定义了一个 CSS .........实际上我想调整图表随着我的窗口大小调整:) @AndrewGuy 真的吗？我看到了这段代码return render_template('results.html', div_placeholder=Markup(my_plot_div) )。我想我找到了from flask import Markup。仍然感谢您花时间回到旧答案。
@A.P.抱歉，不知怎的错过了。 Markup 来自 python Flask 库。 from flask import Markup。我已经编辑了答案以包括这个。感谢您强调这一点。以上是关于使用 python 绘制图形并使用 HTML 显示它的主要内容，如果未能解决你的问题，请参考以下文章
python学习python实现利用pygame绘画基本图形显示图片，实现图形图片随机效果。python绘制行列图片