Python 在烧瓶中显示新图形

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

注意：all_plot.ph_plot（）正在从另一个python程序调用函数。 烧瓶代码：

@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)

@app.route（'/read_ph'，methods=[“GET”，“POST”]）
def ph_plot（）：
如果request.method==“POST”：
a=请求。表格['read\u ph']
所有图。ph图（a）
时间。睡眠（3）
ph_plot=os.path.join（os.getcwd（），“images/ph_plot.png”）
返回渲染模板（'live\u stream.html'，image\u name=ph\u plot）
@app.route（'/read_ph/'，methods=[“GET”，“POST”]）
def发送PHU（PHU图）：
从_目录返回发送_（“图像”，ph_绘图）

HTML:

数据监测站
酸碱度

返回主页

send\u from\u directory

通常用于实际从用户上传到目录中的文件。这不是你真正想要做的；你是：

生成绘图数据

创建绘图并花时间使用

matplotlib

渲染它

将此打印图像保存到磁盘

从磁盘加载该映像并将其发送给用户

切掉磁盘存储的中间环节：创建数据并将其直接发送到模板。下面是一个简单的示例，在单个文件中使用

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()

从烧瓶导入烧瓶，呈现\u模板\u字符串
随机输入
app=烧瓶（名称）
#通常情况下，您会在templates目录中找到它，但为了简单起见
#将所有内容放在一个文件中作为示例，我使用了一个模板字符串
模板=“”“
变量trace1={
x:{plot_data.x_axis}，
y:{plot_data.y_axis}，
键入：“散布”，
名称：“示例”
};
变量布局={
标题：“测试”，
标题字体：{
家庭：“罂粟”，
尺码：18，
颜色：“#7f7f7f”
},
传奇：没错，
xaxis：{
标题：“轴心单位”，
},
亚克斯：{
标题：“其他轴单位”，
},
保证金：{
l:70，
r:40，
b:50，
t:50，
pad:4
}
};
var数据=[trace1]；
Plotly.newPlot（“plot_div”，数据，布局）；
"""
def get_plot_data（）：
x=列表（范围（10））
y=[random.randint（01100）表示范围（10）内的i]
返回{x_轴：x，'y_轴：y}
@应用程序路径（“/”）
def home（）：
绘图数据=获取绘图数据（）
返回渲染模板字符串（模板，
绘图数据=绘图数据）
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
app.run（）

---

这里的一个常见问题是传递日期时间字符串，因为它们将被转义。在这种情况下，需要使用

x:{{plot_data.x_axis | safe}

。请参见和

简单回答：使用JS绘图库，而不是提供各种静态内容。可能不是你想听的，但你试过了吗？你不想这样做有什么原因吗？太好了！我只知道如何使用flask和编写html。我刚找到这段视频，它似乎很相关。你介意总结一下我要做什么吗？我会在html代码中编写javascript吗？我使用plotly.js，我相信它是D3的包装器（plotly.js很难在文档中搜索，因为也有plotly（没有Python中的

.js

，我不建议使用后者）。渲染速度很快；相当于matplotlib。除此之外，我还没有使用

send_from_directory

，但它看起来与模板渲染无关。我一直在使用matplotlib制作图形。因此，我假设plotly.js使用matplotlib的javascript版本在Web服务器（如flask）上显示图形。我不懂任何javascript，所以这可能是一个学习一些语言的好机会。我非常感谢你。你刚刚给了我这么多新知识，伙计。现在让我进入了一个全新的世界。哈哈哈。谢谢bro@MikeSandstrom没问题。如果您认为这已经回答了您的问题，请考虑标记它接受。我注意到您也有一个。AJAX问题还没有解决，但这也是一个相当不错的自包含示例。是的，我觉得使用您提到的方法可以解决我在制作此Web服务器时遇到的许多问题。所以基本上，我的html代码中只会有更多的javascript？在这种情况下，我显然应该学习javascript哈哈，对吗？@MikeSandstrom，我从来没有使用过javascripteally坐下来学习JS，但我学的越多，结果就越好。我在这里给出了JS的最低限度，你会花更多的时间在HTML上，我想象你会把它融入网站。但是，一般来说，答案是肯定的；你需要学习更多的JS。将这种方法与你的其他AJAX问题结合起来，你会有一个不错的基础在用户体验方面（没有什么能阻止这个绘图被AJAX更新，而不是刷新整个页面，除了我希望保持它的简单性）@mikesandstrom我预料到了这一点，应该把它放在答案中。你需要

x:{{plot\u data.x\u axis | safe}

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()