Je fais un projet pour l'Université où j'obtiens des données de Twitter et crée des graphiques que j'affiche ensuite en html avec Flask. Les graphiques sont créés avec matplot puis je les enregistre comme des images .png. Chaque fois que l'utilisateur actualise la page Web, les données mettent également à jour son étagère, de sorte que le graphique est généré à nouveau. Mon problème est que la seule façon d'afficher l'image a été de créer le dossier statique et que l'image n'est pas mise à jour lorsque la locale le fait. Je voulais savoir comment je pouvais faire pour que l'image change lorsque la page est actualisée.

Ceci est mon application flacon

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

Et c'est le 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>

La chose ici, comme je l'ai dit, serait de savoir comment afficher l'image dans la page Web et la mettre à jour chaque fois que les données sont mises à jour (rafraîchissement).

1
Egoes 6 nov. 2019 à 20:30

1 réponse

Vous avez besoin d'un autre itinéraire qui renverra des images dynamiques à l'aide du flacon envoyer le fichier méthode. Vous liez ensuite à cet itinéraire dans le code HTML que votre itinéraire existant renvoie.

Exemple:

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

Cela va récupérer les données deux fois, sauf si vous mettez en cache les données dans app dans une route et utilisez les données mises en cache dans l'autre.

0
Dave 6 nov. 2019 à 17:51