Javascript 我的图表没有'；我不想用数据填充_Javascript_Json_Flask

Javascript 我的图表没有'；我不想用数据填充

javascript json flask

Javascript 我的图表没有'；我不想用数据填充,javascript,json,flask,Javascript,Json,Flask,因此，我正在尝试构建一个flask应用程序，并使用教程创建一个图表。我已经按照指示在javescript文件中分离了该图表，但由于某些原因，该图表没有填充数据 payload: "{\"data\": [5578, 5267, 734, 784, 433], \"labels\": [\"Africa\", \"Asia\", \"Europe\", \"Latin America\", \"North America\"]}" 我认为Javascript文件是问题所在，因为如果我转到“

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

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

我认为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>


新的
试验

看看代码片段，会发现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'];
},

谢谢Dave，我没有正确阅读已经存在的函数，但它现在可以工作了。唯一的问题是数据没有加载。你知道如何解决这个问题吗？图表是在数据请求发出后立即创建的，但很可能是在处理任何响应之前创建的。如果你在图表中找不到异步使用的示例。js的文档，在你的位置上，我会延迟创建图表，直到我有数据为止（例如，通过在成功calback中执行）。因此，这意味着我需要在成功回调中创建某种延迟（我的javascript不是很好，所以我会问）是的。我把构建图形的代码放在一个函数中，并从成功回调调用它。所以我尝试了它，但它仍然没有加载我的数据。我的代码现在看起来是：$（document）.ready（function（）{var\u data；var\u labels；$.getJSON（{url:'/get\u data'，type:'get'，data:{vals:'}，success:function（已经是json）{setTimeout（function（）{u data=ready_json['data']；_labels=ready_json['labels']；}，2000）；}，}）；