Chart.js не обновляет или не получает данные от Flask Python - PullRequest
Новая
       4

Chart.js не обновляет или не получает данные от Flask Python

0 голосов
/ 18 декабря 2018

Я пытаюсь создать интерактивную диаграмму для веб-приложения с данными из сценария Python.

Ошибка: данные из кода Python не передаются или обновляются в сценарии chart.js и не выводятся вhtml.

Поток 3-х сценариев: меток и данных из python, идет в chart.js для визуализации гистограммы и выводится в html

Когда я меняю Африку(точка данных) с 2447 по 5578, график не обновляется.Я не уверен, переносится ли проблема с python или отображает диаграмму.

Python 

from flask import Flask,render_template
app = Flask(__name__)

@app.route("/")
def result():
   labels = ["Africa", "Asia", "Europe", "Latin America", "North America"]

   data = [5578,5267,734,784,433]

   return render_template("result.html", labels=labels, data=data)
if __name__ == '__main__':
app.debug = True
app.run()

script1.js 

new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
  labels: "{{labels}}",
  datasets: [
    {
      label: "Population (millions)",
      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
      data: "{{data }}"
    }
  ]
},
options: {
  legend: { display: false },
  title: {
    display: true,
    text: 'Predicted world population (millions) in 2050'
  }
}
});

HTML 

  <!DOCTYPE html>
<html>
  <head>
    <title>New</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"> 
</script>

  </head>
  <body>
  <h1>Test</h1>
    <div class="wrapper">
    <canvas id="bar-chart" width="800" height="450"></canvas>
    </div>

     <script src="{{ url_for('static', filename='script1.js') }}"></script>

   </body>
  </html>

Ответы [ 3 ]

0 голосов
/ 18 декабря 2018

Чтобы отобразить javascript (заменяя ваши переменные), поместите javascript в html-файл для рендеринга и используйте фильтр Flask jinja tojson: Пример: 

  <!DOCTYPE html>
  <html>
    <head>
      <title>New</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>

    </head>
    <body>
    <h1>Test</h1>
      <div class="wrapper">
      <canvas id="bar-chart" width="800" height="450"></canvas>
      </div>

      <!-- <script src="{{ url_for('static', filename='script1.js') }}"></script> -->
      <script>
          //console.log({{labels|tojson}});
          //console.log({{data|tojson}});
          new Chart(document.getElementById("bar-chart"), {
              type: 'bar',
              data: {
                labels: {{labels|tojson}},
                datasets: [
                  {
                    label: "Population (millions)",
                    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                    data: {{data|tojson}}
                  }
                ]
              },
              options: {
                legend: { display: false },
                title: {
                  display: true,
                  text: 'Predicted world population (millions) in 2050'
                }
              }
              });
      </script>

    </body>
    </html>
0 голосов
/ 20 декабря 2018

Пример кода в ответ на комментарий @Lko, чтобы сохранить js в отдельном файле, см. Мой комментарий к предыдущему сообщению.

Структура файла: \ main.py \ static \ script1.js \ templates \ result.html

HTML: 

    <!DOCTYPE html>
    <html>
      <head>
        <title>New</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>

      </head>
      <body>
      <h1>Test</h1>
        <div class="wrapper">
        <canvas id="bar-chart" width="800" height="450"></canvas>
        </div>

        <!-- <script src="{{ url_for('static', filename='script1.js') }}"></script> -->
        <script type = "text/javascript">
            var labelsVar={{labels|tojson}};
            var dataVar={{data|tojson}};
        </script>
        <script type = "text/javascript"  src="{{ url_for('static', filename = 'script1.js') }}"></script>
      </body>
      </html>

Javascript: 

  console.log(labelsVar);
  console.log(dataVar);
  new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: {
        labels: labelsVar,
        datasets: [
          {
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: dataVar
          }
        ]
      },
      options: {
        legend: { display: false },
        title: {
          display: true,
          text: 'Predicted world population (millions) in 2050'
        }
      }
      });
0 голосов
/ 18 декабря 2018

script1.js не отображается flask.render_template, так как он связан только с тегом script.Однако гораздо лучше отправлять запрос к бэкэнду для jsonified данных, чем пытаться отобразить сами значения в шаблоне.Создайте дополнительный маршрут в файле Python для возврата значений по запросу ajax: 

import json
@app.route("/")
def result():
  return render_template("result.html")

@app.route('/get_data')
def get_data():
  labels = ["Africa", "Asia", "Europe", "Latin America", "North America"]
  data = [5578,5267,734,784,433]
  return flask.jsonify({'payload':json.dumps({'data':data, 'labels':labels})})

Не забудьте включить jquery для поддержки вызова ajax в HTML: 

<head> 
  <title>New</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"> 
</head>

Наконец, в script1.js: 

$(document).ready(function(){
   var _data;
   var _labels;
  $.ajax({
   url: "/get_data",
   type: "get",
   data: {vals: ''},
   success: function(response) {
     full_data = JSON.parse(response.payload);
     _data = full_data['data'];
     _labels = full_data['labels'];
   },

 });
 new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
 data: {
   labels: _labels,
   datasets: [
   {
    label: "Population (millions)",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
   data: _data
   }
   ]
   },
    options: {
    legend: { display: false },
     title: {
      display: true,
     text: 'Predicted world population (millions) in 2050'
   }
  }
 });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...