在烧瓶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绘制数据

回答

相关问题