【发布时间】：2016-10-02 14:08:43
【问题描述】：
我正在尝试从 mysql 服务器绘制数据并将其显示在 Web 服务器中。我正在使用 highcharts javascript 库进行绘图。我可以从 mysql 数据库中获取数据，并将数据作为 json 数据从服务器端发送到客户端。然后通过使用 highcharts 我想显示它。但是当我尝试绘图时，图表什么也没显示。
这是服务器端重要的 sn-p 代码（我使用的是 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);
}
});
});
});
最后，我得到一个像这样的空白图表：
此外，我尝试绘制时间序列折线图。怎么了？
编辑：忘记 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>
【问题讨论】：
-
由于图表为空，很可能没有数据可显示。检查您的 AJAX 调用。尝试获取数据并将其显示在 div 中。它将有助于调试。我遇到了一个非常相似的问题，原来我的图表设置不正确。如果您可以在此处发布控制台错误消息也会有所帮助:)
-
实际上没有错误信息，一切看起来都很好，我可以在控制台上看到数据。 :)
-
您的响应数据看起来如何？
-
[[1285632000000,null],[1285545600000,25.39]] 这样的东西。第一个日期以毫秒为单位，然后为 @Grzegorz Blachliński 赋值
标签： javascript jquery python highcharts flask