Question

我从Flask控制器中获取了一些数据，这些数据是通过JSON传递给/get_data的。然后，我使用Charts.js将此数据呈现为图表。

我的问题是，转到www.mysite.com不会在图表上显示任何数据。但是，转到www.mysite.com/get_data确实会成功显示jsonified数据，并且我看不到为什么它没有出现在图表中。

烧瓶控制器：

from flask import Flask, render_template, jsonify
import mysql.connector
import json

app = Flask(__name__)

@app.route('/')
def index():
    return render_template("main.html")

@app.route('/get_data')
def get_data():
    '''
    connect to mySQL and get data
    '''

    tempData = []
    labels = []
    for r in rows:
        data = list(r)
        temp = data[0]
        tempData.append(temp)

        datetime = str(data[2])
        labels.append(datetime)

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

if __name__ == "__main__":
    app.run()

这是main.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My test page</title>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
</html>

<canvas id="myChart" width="600" height="400"></canvas>

<script>

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

// define the chart data
var chartData = {
  labels : _labels,
  datasets : [{
      label: 'Temperature',
      fill: false,
      borderColor: 'rgba(255, 0, 0, 1.0)',
      data: _tempData,
  },
  {
      label: 'Humidity',
      fill: false,
      borderColor: 'rgba(0, 0, 255, 1.0)',
      data: _humData,
  },
  ]
}

// get chart canvas
var ctx = document.getElementById("myChart").getContext("2d");

// create the chart using the chart canvas
var myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
    });
});

</script>

尽管传递到指定的路线，但Flask应用中的数据仍未显示在图表中

0 个答案: