0
私はmysqlサーバからデータをプロットし、ウェブサーバに表示しようとしています。私はプロッタ用にhighchartsのjavascriptライブラリを使用しています。私はmysqlデータベースからデータを取得することができ、データはサーバー側からクライアント側にjsonデータとして送信されます。その後、ハイチャートを使用して表示したいと思います。しかし、プロットしようとすると、チャートは何も表示されません。ここでフラスコウェブアプリケーションでhigchartを使用してデータをプロットする
は（私は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に表示してみてください。デバッグに役立ちます。非常に似た問題が発生しました。チャートの設定が正しくないことが判明しました。また、コンソールのエラーメッセージを投稿することができれば役に立ちます:) –
実際にはエラーメッセージは表示されず、すべてが正常に表示され、コンソールにデータが表示されます。 :) –
あなたの応答データはどのように見えますか？ –