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

【问题标题】：Plotting graph using python and dispaying it using HTML使用 python 绘制图形并使用 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();
         });

【问题讨论】：

标签： python html plotly

【解决方案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。我已经编辑了答案以包括这个。感谢您强调这一点。