使用python绘制图形并使用HTML进行支付 [英] Plotting graph using python and dispaying it using HTML
问题描述
我想使用plotly构建一个脱机应用程序以显示图形.我在后端使用python(flask)，在前端使用HTML(javascript).目前，我可以通过将图形数据作为JSON对象发送到前端并在前端本身使用plotly.js构建图形来绘制图形.但是我真正想要的是在服务器(后端即python)本身构建图形，然后以HTML显示数据.我已经遍历了在python中构建图形的plotly文档，但是我不知道如何将构建图形发送到前端进行显示:( 有人可以帮我吗? PS:我想构建一个脱机应用程序 更新的代码
I want build an offline application using plotly for displaying graphs . I am using python(flask) at the back end and HTML(javascript) for the front end . Currently I am able to plot the graph by sending the graph data as JSON object to front end and building the graph using plotly.js at the front end itself . But what I actually want is to build the graph at the server(backend ie python) side itself and then display the data in HTML . I have gone through the plotly documentation that builds the graph in python , but I dont know how to send the build graph to front end for display :( Can someone help me on that ? PS : I want to build an offline application Updated Code
$(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模块，该模块为您创建绘图的脱机版本.他们网站上的可打印API太可怕了(我们实际上不希望知道每个函数采用什么参数，会吗?)，所以转到Github上的源代码要好得多.
My suggestion would be to use the plotly.offline module, which creates an offline version of a plot for you. The plotly API on their website is horrendous (we wouldn't actually want to know what arguments each function takes, would we??), so much better to turn to the source code on Github.
如果您看一下源代码，您会发现offline.plot函数对output_type来说是虚假的，它是'file'或'div':
If you have a look at the plotly source code, you can see that the offline.plot function takes a kwarg for output_type, which is either 'file' or '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代码，可以将其缓存以重复请求)，但是它是自包含的.
This will give you the code (wrapped in <div> tags) to insert straight into your HTML. Maybe not the most efficient solution (as I'm pretty sure it embeds the relevant d3 code as well, which could just be cached for repeated requests), but it is self contained.
要使用Flask将div插入html代码中，您需要做一些事情.
To insert your div into your html code using Flask, there are a few things you have to do.
在结果页面的html模板文件中，为绘图代码创建一个占位符. Flask使用Jinja模板引擎，因此如下所示:
In your html template file for your results page, create a placeholder for your plot code. Flask uses the Jinja template engine, so this would look like:
<body>
....some html...
{{ div_placeholder }}
...more html...
</body>
在Flask views.py文件中，您需要使用插入到div_placeholder变量中的绘图代码来呈现模板:
In your Flask views.py file, you need to render the template with the plot code inserted into the div_placeholder variable:
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数据获得的用户请求，而创建plotly图需要处理这些数据.
Obviously YMMV, but that should illustrate the basic principle. Note that you will probably be getting a user request using POST data that you will need to process to create the plotly graph.
这篇关于使用python绘制图形并使用HTML进行支付的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
