Как показать диаграмму с данными из формы html на той же странице, используя python и flask

Question

Я учусь и застрял. Я хочу создать супер простое веб-приложение, которое берет некоторые данные (2 значения) и отображает их на графике ap ie. Пока что это работает (получение данных из формы, создание графика и печать его на ... / plot.png), но я хотел бы показать диаграмму на той же странице, что и форма, и я просто предполагаю.

Полагаю, мне нужно как-то динамически связать диаграмму c с / home html, но я не знаю, как это сделать. Я видел много похожих вопросов, но в большинстве из них используется js, я хотел бы сделать его простым и использовать только flask.

main.py:

from flask import request
import io
#import random
from flask import Response
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
#from matplotlib.figure import Figure
import matplotlib.pyplot as plt

app = Flask(__name__)


# Pie chart, where the slices will be ordered and plotted counter-clockwise:
labels = 'Aprovechado', 'Vertido'

explode = (0, 0) 

@app.route('/plot.png')
def plot_png():
    fig = create_figure()
    output = io.BytesIO()
    FigureCanvas(fig).print_png(output)
    return Response(output.getvalue(), mimetype='image/png')

def create_figure():
    autoconsumo = request.args.get('autoconsumo')
    vertido = request.args['vertido']
    sizes = [autoconsumo, vertido]
    fig, ax1 = plt.subplots()
    ax1.pie(sizes, explode=explode, labels=labels, autopct='%1.1f%%',
            shadow=True, startangle=90)
    ax1.axis('equal')  # Equal aspect ratio ensures that pie is drawn as a circle.
    return fig #render_template("autoconsumo.html") #fig

@app.route("/")
def home():
    return render_template("home.html")


if __name__ == "__main__":
    #plot_png()
    app.run(debug=True)

дома. html

Answer 1

Я написал этот ответ, прежде чем прочитал ту часть, где вы сказали without Javascript, но я все равно просто опубликую это. Дайте мне знать, если вы действительно хотите получить ответ, включающий Flask.

. Очень простой подход - добавить некоторые атрибуты id в теги form, input и img:

<form id='plot'>
  Autoconsumo <input type='number' id='autoconsumo' /><br />
  Vertido <input type='number' id='vertido' /><br />
  <input type='submit' value='Continue' />
</form>

<img id='img' alt="my plot"> 

Затем сразу после этого добавьте немного javascript, чтобы получить эти элементы, затем измените источник изображения при отправке формы:

<script type='text/javascript'>

    const form = document.getElementById('plot');
    const autoconsumo = document.getElementById('autoconsumo');
    const vertido = document.getElementById('vertido');
    const img = document.getElementById('img');

    // Event listener which changes the image src attribute on form submit:

    document.addEventListener('submit', function(e){

      e.preventDefault();  // Stops submit button from moving to new page

      img.src = '/plot.png?autoconsumo=' + autoconsumo.value + '&vertido=' + vertido.value;

    });
</script>
</body>

Другие могут иметь более элегантные решения, но это работает.