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

前端之家收集整理的这篇文章主要介绍了使用python绘制图形并使用HTML显示它前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想使用plotly来构建一个离线应用程序来显示图形.我在后端使用python(flask),在前端使用HTML(javascript).目前,我可以通过将图形数据作为JSON对象发送到前端并使用前端本身的plotly.js构建图形来绘制图形.但我真正想要的是在服务器(后端即python)方面构建图形,然后以HTML格式显示数据.我已经完成了在python中构建图形的情节文档,但我不知道如何将构建图形发送到前端进行显示:(
有人可以帮助我吗?
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模块,它为你创建一个离线版本的情节.在他们的网站上的情节API是可怕的(我们实际上不想知道每个函数采用什么参数,我们会??),更好地转向Github上的源代码.

如果您查看了图形源代码,您可以看到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模板引擎,所以这看起来像:

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

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

@app.route('/results',methods=['GET','POST'])
def results():
    error = None
    if request.method == 'POST':
        my_plot_div = plot([Scatter(x=[1,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数据获取用户请求,您需要处理这些数据以创建绘图图形.

猜你在找的HTML相关文章