在燒瓶web應用中使用higcharts繪製數據

我想從mysql服務器繪製數據並將其顯示在Web服務器中。我正在使用highcharts JavaScript庫進行繪圖。我可以從mysql數據庫獲取數據，並將數據從服務器端發送到客戶端作爲json數據。然後通過使用highcharts我想顯示它。但是當我嘗試繪製時圖表沒有顯示任何內容。在燒瓶web應用中使用higcharts繪製數據

這裏是服務器端的重要片斷代碼（我使用AJAX）：

def background_process(): 
    start = request.form['name_start'] 
    finish = request.form['name_finish'] 
    df_sorted = mutechDataManipulate.sort_by_time(df, pd.to_datetime(str(start)), pd.to_datetime(str(finish)), 'Date') 
    print df_sorted['Date'].head() 
    df_out_json = df_sorted[['Date', 'High']].to_json(orient='values') 
    return json.dumps(df_out_json)

下面是客戶端（我從服務器獲取成功的JSON數據）：

$(document).ready(function(){ 
$(document).on("click", "#btn1", function() {  
    console.log("alii"); 
    var user = $('input[name="name_start"]').val(); 
    var pass = $('input[name="name_finish"]').val(); 
    console.log("sivgin");  
    $.ajax({ 
     url: '/background_process', 
     data: $("form").serialize(), 
     type: "POST", 
     success: function(response) { 
      $('#result').highcharts({ 
     xAxis: { 
      type: 'datetime' 
     }, 
     yAxis: { 
      title: { 
       text: 'High' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     series: [{ 
      type: 'area', 
      name: 'USD to EUR', 
      data: response 
       }] 
     }); 
      console.log(response) 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 
}); 
});

最後，我得到一個空白圖所示：

empty chart

另外我嘗試繪製時間序列折線圖。哪裏不對？

編輯：忘了HTML文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Mutech</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="static/css/bootstrap.min.css"> 
    <script src="static/js/jquery.min.js"></script> 
    <script src="static/js/bootstrap.min.js"></script> 
    <script src="static/js/script.js"></script> 
    <script src="static/js/jquery-1.9.1.js"></script> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 

</head> 
<body> 
<br/> 
<div class="container"> 
    <form class="form-inline" id="form1" method="post" > 
    <div class="form-group"> 
     <label>Start Date</label> 
     <input class="form-control" id="id_start" name ="name_start"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Finish Date</label> 
     <input class="form-control" id="id_finish" name ="name_finish"> 
    </div> 
    <br/><br/> 
    <br/> 
    <button type="button" class="btn btn-default" id= "btn1">Submit</button> 

    </form> 
</div> 

<div class="container" id = "result"> 
</div> 



</body> 
</html>

來源

2016-10-02 Ali Şıvgın

由於圖表爲空，因此很可能沒有要顯示的數據。檢查你的AJAX調用。嘗試獲取數據並將其顯示在div中。它將有助於調試。我遇到了一個非常類似的問題，結果我的圖表設置不正確。這也將有所幫助，如果你可以在這裏發佈控制檯錯誤消息:) –

其實沒有錯誤消息，一切看起來很好，我可以看到控制檯上的數據。 :) –

你的迴應數據看起來如何？ –

它不看看你的數據是否正確格式化爲Highcharts。如果你看看this other StackOverlow question about JSON data and Highcharts，你會發現數據應該是一個字典列表。

要做到這一點爲什麼熊貓，您將值"records"傳遞到orient選項。

df_out_json = df_sorted[['Date', 'High']](orient="records") 
#[{"Date":1285632000000, "High":None}, {"Date":1285545600000, "High":25.39}]

查看更多在pandas documentation爲to_json。

來源

2016-10-02 21:26:14 TheF1rstPancake

我改變了東方，它給了我這樣的回覆數據： [{\「Date \」：1285632000000，\「High \」：null}，{\「Date \」： 1285545600000，「高」：25.39}] 但沒有任何變化。 @ Jalepeno112 –

我認爲你可以嘗試使用'y'而不是'高'。 –

我認爲問題是json字符串。響應數據是字符串，我必須使用JavaScript或其他方式將其轉換爲數字。因爲我是新的JavaScript，我不知道如何做到這一點。 –

在燒瓶web應用中使用higcharts繪製數據

回答

相關問題