Triying, чтобы показать изображение на HTML с Flask и фитоном, который меняет каждое обновление - PullRequest
Новая
       6

Triying, чтобы показать изображение на HTML с Flask и фитоном, который меняет каждое обновление

0 голосов
/ 06 ноября 2019

Я делаю проект для университета, где я получаю данные из твиттера и создаю некоторые графики, которые затем отображаю на html с помощью Flask. Графики создаются с помощью matplot, а затем я сохраняю их как изображения .png. Каждый раз, когда пользователь обновляет веб-страницу, данные также обновляют свою полку, поэтому график генерируется снова. Моя проблема в том, что единственным способом отображения изображения было создание статической папки, и таким образом изображение не обновляется, когда это делает локальная папка. Я хотел узнать, как можно изменить изображение при обновлении страницы.

Это мое приложение для колб 

app = Flask(__name__)

labels = ["Postive", "Negative", "Neutral"]
colors = ["#00ff7f", "#d80000", "#00008B"]


@app.route("/pie")
def chart():
    negative, positive, neutral = get_data("China")
    values = [positive, negative, neutral]
    pie_labels = labels
    pie_values = values
    return render_template('pie_chart.html', image="static/images/locations.png",title='Positive and Negative', max=1700, set=zip(values, labels, colors))

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

И это HTML 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{{ title }}</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>

<body>
    <h1>{{ title }}</h1>

    <canvas id="chart" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];
      // get bar chart canvas
      var mychart = document.getElementById("chart").getContext("2d");
      steps = 10
      max = {{ max }}
      // draw pie chart
      new Chart(document.getElementById("chart").getContext("2d")).Pie(pieData);
    </script>
    <img src="{{ image }}">
</body>
</html>

Здесь, как я уже сказал, было показано, как показать изображение на веб-странице и обновлять его каждый раз, когда обновляются данные (обновление).

1 Ответ

0 голосов
/ 06 ноября 2019

Вам нужен другой маршрут, который будет возвращать динамические изображения, используя метод Flask send_file . Затем вы ссылаетесь на этот маршрут в HTML-коде, который возвращает ваш существующий маршрут.

Пример: 

@app.route("/images/pie")
def chart_image():
    # Get data, but only make chart image
    image_object = some_thing_to_make_image_data_for_a_country()
    return flask.send_file(image_object, mimetype="image/png")

@app.route("/pie")
def chart_data():
    # Get data, but only get values
    negative, positive, neutral = get_data(country)
    values = [positive, negative, neutral]
    pie_labels = labels
    pie_values = values
    return render_template('pie_chart.html', image="images/pie",title='Positive and Negative', max=1700, set=zip(values, labels, colors))

Это приведет к получению данных дважды, если только вы не кэшируете данные в app в одноммаршрут и использовать кэшированные данные в другом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...