Веб-приложение Flask: круговая диаграмма Google не отображается в формате HTML - PullRequest
0 голосов
/ 21 января 2019

Я хотел бы показать статистику по текущей базе данных через круговую диаграмму Google. Тем не менее, круговая диаграмма не отображается в выводе html, даже если вы просматриваете связанный с ней элемент div при проверке этого элемента.

Это HTML-файл, данные поступают из словаря, связанного с базой данных, и я проверил, существуют ли эти данные.

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([

            ['Domain', 'Number of artist in our database'],
            {% for k,v in dic.items() %}
                 [{{k|safe}},  {{v|safe}}],
                 {% endfor %}
             ]);
    var options = {
                width: 400,
      height: 240,
      title: 'Distribution of domains in our database',
      colors: ['#41E0A9', '#00B973', '#00AA5A', '#00AA5A', '#00CD8C']
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px; margin-left:400px;margin-top:20px;"></div>
</body>
</html>

Функция фляги Python

 @app.route('/recruiter', methods=['POST', 'GET'])
 def recruiter():
  if session.get("email"):
    curl = mysql.connection.cursor()
    curl.execute("SELECT * FROM projects")
    data = curl.fetchall()
    curl.close()
    username = session.get("username")
    curl = mysql.connection.cursor()
    domain_dict = {}
    select_stmt = ("SELECT domain ,COUNT(*) FROM freelancers GROUP BY domain")
    curl.execute(select_stmt)
    tuples=curl.fetchall()
    dic = {}
    for i in range(len(tuples)):
      k = list(tuples[i].values())[0]
      v = list(tuples[i].values())[1]
      dic[k]=v

    curl.close()
    return render_template(
        "recruiter_2.html",
        projects=data,
        dic=dic)
 else:
    return redirect(url_for('login'))

Это вывод словаря dic:

{'Graphic Design': 2, 'Illustrator': 2, 
 'Animator': 2, 'Digital Designer': 2, 
 'Photographer': 2, 'Filmmaker': 2}

Было бы полезно, если бы вы могли указать, какую ошибку я совершаю, делая ссылку на дзиндзя. Также круговая диаграмма отлично работает, когда я вручную устанавливаю числа для каждого раздела. Является ли петля Jinja2 неправильной?

Спасибо за вашу помощь ^^

1 Ответ

0 голосов
/ 21 января 2019

Не использовать цикл for решил проблему.Вместо инициализации переменной данных, например, так:

     var data = google.visualization.arrayToDataTable([

       ['Domain', 'Number of artist in our database'],
         {% for k,v in dic.items() %}
              [{{k|safe}},  {{v|safe}}],
              {% endfor %}
          ]);

Инициализируйте ее следующим образом:

               var data = google.visualization.arrayToDataTable([

                ['Domain', 'Number of artist in our database'],
                ["Illustrator",  {{dic["Illustrator"]}}],
                ["Graphic Design",  {{dic["Graphic Design"]}}],
                ["Animator",  {{dic["Animator"]}}],
                ["Digital Designer",  {{dic["Digital Designer"]}}],
                ["Photographer",  {{dic["Photographer"]}}],
                ["Filmmaker",  {{dic["Filmmaker"]}}],

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