Question

我想使用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();
         });

Answer 1

我的建议是使用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模板引擎，因此看起来像：

<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数据获取用户请求，您需要处理该数据以创建绘图图。

Answer 2

您可以使用.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

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

2 个答案: