使用 Flask Chart.js 繪制實時數據

Question

我正在使用 HTTP 請求從另一個應用程序向我的 Flask 服務器發送一些數據。 我需要 plot 並在我的網頁上顯示數據。 每當有新數據進入時，圖表都需要更新。plot 是實時的 plot。到目前為止，數據傳輸工作正常，但我無法 plot 數據。 這是我的 python 代碼

@app.route('/', methods=["GET", "POST"])
def main():
   
return render_template('index.html')


@app.route('/data', methods=["GET", "POST"])
def data():
    # Using Static data
    #data = [time() * 1000, random() * 100]


    data = [request.json["time"],request.json["value"]]
    print(data)

    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

使用應用程序內部的數據，plot 有效，但當我嘗試從服務器獲取數據時，它不起作用。

用於繪圖的腳本如下所示

 <script> var chart; function requestData() { // Ajax call to get the Data from Flask var requests = $.get('/data'); var tm = requests.done(function (result) { var series = chart.series[0], shift = series.data.length > 20; // add the point chart.series[0].addPoint(result, true, shift); // call it again after one second setTimeout(requestData, 2000); }); } $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'data-container', defaultSeriesType: 'spline', events: { load: requestData } }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: 150, maxZoom: 20 * 1000 }, yAxis: { minPadding: 0.2, maxPadding: 0.2, title: { text: 'Value', margin: 80 } }, series: [{ name: 'Random data', data: [] }] }); }); </script>

我不斷收到錯誤消息“NoneType”object 不可下標。 任何幫助將非常感激。 提前致謝。

Answer 1

試試這個：

@app.route('/data', methods=["GET", "POST"])
def data():
    data = [time() * 1000, random() * 100]
    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

我在我的應用程序中使用它並且它有效。