Question

因此，我正在尝试构建flask应用程序，并使用了教程来创建图表。我已按照指示将图表分离到一个javescript文件中，但由于某种原因，该图表没有填充数据。

我认为Javascript文件是问题所在，因为如果我转到'/get_data'页面数据在那里。看起来javescript文件不想看到带有数据的有效负载。

payload:    "{\"data\": [5578, 5267, 734, 784, 433], \"labels\": [\"Africa\", \"Asia\", \"Europe\", \"Latin America\", \"North America\"]}"

有人可以看一下代码吗？

我的Javascript如下：

$(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: 'line',
 data: {
   labels: _labels,
   datasets: [
   {
    label: "Population (millions)",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
   data: _data
   }
   ]
   },
    options: {
    legend: { display: true },
     title: {
      display: true,
     text: 'Predicted world population (millions) in 2050'
   }
  }
 });
});

我的烧瓶应用看起来像这样。

import os
import flask
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
import json

app = Flask(__name__)

@app.route('/simple_chart', methods=['GET'])
def simple_chart():
    return render_template('test.html')

@app.route('/get_data', methods=['GET', 'POST'])
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})})

if __name__ == '__main__':
    app.run(debug=True)

HTML页面：

<!DOCTYPE html>
<html>
    <head>
        <title>New</title>
        <script src="{{ url_for('static', filename='script1.js') }}"></script>
        <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"></script>
    </head>

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


   </body>
  </html>

Answer 1

跳过代码片段的是，围绕JSON编码/解码的不必要的复杂化。

首先，如果您使用$.getJSON()而不是$.ajax()，则JSON解码的第一级会自动完成。不需要第二级（通过json.dumps()）。即，而不是

return flask.jsonify({'payload':json.dumps({'data':data, 'labels':labels})})

您可以使用

return flask.jsonify(data=data, labels=labels)

并且Flask会做正确的事（在这种情况下，这意味着页面上没有要解码的有效载荷，然后看起来像

success: function(already_json) {
    _data = already_json['data'];
    _labels = already_json['labels'];
},

我的图表不想填满数据

1 个答案: