python - 在 Flask 中显示新图表

标签 python html flask

我一直在努力寻找一种方法来更新 flask 网络服务器上的图表。我将图像存储在目录的静态文件中,并通过 {{url_for('static',filname=ph_plot.png) }} 访问它们,但每次我发送一个发布请求来获取新范围的数据时,图表都不会在我的网络服务器上更新,但在我的文件系统上更新。我知道每次保存文件时都可以更改文件名以使其显示,但我不知道这是否是显示动态变化照片的最佳方式。 目前我一直在 flask 中使用 send_from_directory 方法,但它也对我不起作用。下面是我的代码。 我已经为此工作了一段时间,希望得到一些帮助!谢谢

注释:all_plots.ph_plot() 正在从另一个 python 程序调用函数。 flask 代码:

@app.route('/read_ph', methods=["GET", "POST"])
def ph_plot():
    if request.method == "POST":
        a = request.form['read_ph']
        all_plots.ph_plot(a)
        time.sleep(3)
        ph_plot = os.path.join(os.getcwd(), "images/ph_plot.png")
        return render_template('live_stream.html', image_name=ph_plot)


@app.route('/read_ph/<ph_plot>', methods=["GET", "POST"])
def send_ph(ph_plot):
    return send_from_directory("images", ph_plot)

HTML:

<html>
  <body>

    <h1>Data Monitoring Station</h1>

    <h2>PH</h2>
       <form method="POST" action="read_ph" >

          <input name="read_ph" placeholder="Instances" type="text">

        </form>

        <a href="read_ph"><button type="button">PH Graph</button></a>

        <img src="{{ url_for('send_ph',ph_plot=image_name) }}" id="plot" width ="220" height ="220">

    <hr>
    <h5> Return to main page <a href="/"class="button">RETURN</a></h5>
    <hr>

  </body>
</html>

最佳答案

send_from_directory通常适用于实际已从用户上传到目录中的文件。这并不是你真正想要做的;你是:

  1. 生成绘图数据
  2. 创建情节并与 matplotlib 共度时光渲染它
  3. 将此绘图图像保存到磁盘
  4. 从磁盘加载该图像并将其发送给用户

消除磁盘存储的中间人:创建数据并将其直接发送到模板。这是一个使用 plotly.js 的粗略示例在单个文件中获取前端渲染的数据。您可以不断刷新页面以获得不同的图表。但请注意,每个情节都是交互式的;您可以使用右上角的菜单进行缩放,例如导出等,显示/隐藏绘图(如果有多个迹线,这将更有意义)。您无法通过渲染绘图图像获得任何这些。

from flask import Flask, render_template_string

import random

app = Flask(__name__)


# Normally you'd have this in the templates directory but for simplicity of
# putting everything into one file for an example, I'm using a template string

template = """
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="plot_div" style="width: 100%; height: 100%"></div>

<script type="text/javascript">

var trace1 = {
    x: {{ plot_data.x_axis }},
    y: {{ plot_data.y_axis }},
    type: 'scatter',
    name: 'Example'
};

var layout = {
    title: "Test",
    titlefont: {
            family: 'Poppins',
            size: 18,
            color: '#7f7f7f'
        },
    showlegend: true,
    xaxis: {
        title: 'Axis Unit',
    },
    yaxis: {
        title: 'Other Axis Unit',
    },
    margin: {
        l: 70,
        r: 40,
        b: 50,
        t: 50,
        pad: 4
    }
};
var data = [trace1];

Plotly.newPlot("plot_div", data, layout);

</script>
"""

def get_plot_data():
    x = list(range(10))
    y = [random.randint(0, 100) for i in range(10)]
    return {'x_axis': x, 'y_axis': y}

@app.route('/')
def home():
    plot_data = get_plot_data()
    return render_template_string(template,
                                  plot_data=plot_data)

if __name__ == '__main__':
    app.run()

这里的一个常见问题是传递日期时间字符串,因为它们会被转义。在这种情况下,您需要使用 x: {{ plot_data.x_axis | safe }} 。请参阅Passing HTML to template using Flask/Jinja2How to make html markup show up?

关于python - 在 Flask 中显示新图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58984137/

相关文章:

python - 如何测量 python 非测试运行的覆盖率

python - 如何将带有 complex128 数据的 xarray.DataArray 保存到 netcdf

html - Chrome 和 Opera 中的 Kinetic JS 性能问题

css - div 中的背景视频,固定背景图像附加到下面的部分 - 非常有问题

python - 直接链接到 Google Drive Image 不起作用 [在 CodeSkulptor 中]

python - 如何抑制 Python 脚本中的所有打印信息?

javascript - 在 div 中以 span 居中输入

python - 在 Windows 上与女服务员一起服务 Flask 应用程序

python - 使用 Flask 对经过身份验证的用户运行单元测试

python - 使用 get_serving_url 调整 GAE 中直接从 GCS 提供的图像大小?