2017-04-01 6 views
0

私は一定期間にわたって温度変化のプロットを作成しようとしていますので、始めにグラフを作成してグラフを作成しようとしていますが、どのデータも表示したくないようです。私はJavaScriptとflotに少し慣れているので、他の人がどのようにグラフをフラットで作成したかを見ることに基づいて、必要なコードをまとめてみました。フロートグラフを表示することができません

温度をプロットするためにコード内に作成したx軸上のデータですが、テストデータを含む.jsonファイルから温度データを取得しました。プロット関数に渡すためにデータポイントをセットに取得することは大丈夫ですが、私は表示を取得できません。代わりに、私が得るのは、自分のコードの後に​​表示される画像に表示されるものだけです。誰かが私が間違っていたことや私が逃していることを教えてもらえますか?私は正直にここで困っている。 (FLOT例のページを編集して作られた)

ソースコードは:どのような私ができるによう http://imgur.com/a/1lTvj

どれ洞察:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
<html> 
 
<head> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
\t <title>Flot Examples: Resizing</title> 
 
\t <link href="../examples.css" rel="stylesheet" type="text/css"> 
 
\t <link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"> 
 
\t <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]--> 
 
\t <script language="javascript" type="text/javascript" src="../../jquery.js"></script> 
 
\t <script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script> 
 
\t <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script> 
 

 
\t <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script> 
 

 
\t <script type="text/javascript"> 
 

 
\t 
 
\t $(document).ready(function() { 
 

 

 
\t \t //Creating an array to hold the plot data 
 
\t \t var plotdata = new Array(); 
 

 
\t \t $.getJSON('test_data.json', function (data) { 
 

 
\t \t \t //Creating a base date to make times off of 
 
\t \t \t var basedate = new Date("February 20, 2017 08:00"); 
 

 
\t \t for(var i = 0; i < 10; i++) 
 
\t \t { 
 
\t \t \t var datepoint = new Date(basedate.getTime() + 600000*i).getTime(); 
 
\t \t \t switch(i) { 
 

 
\t \t \t \t case 0: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-22 20:00"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 1: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-18 22:50"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 2: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-20 22:00"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 3: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-20 13:50"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 4: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-19 7:00"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 5: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-21 15:30"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 6: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-18 3:50"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 7: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-16 5:20"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 8: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-19 6:10"][0]; 
 
\t \t \t \t break; 
 

 
\t \t \t \t case 9: 
 
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-16 0:40"][0]; 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t \t //plotdata[i] = [datepoint, temppoint]; 
 
\t \t \t plotdata.push(new Array(datepoint, temppoint)); 
 
\t \t } 
 
\t \t console.log(plotdata) 
 

 
\t \t }) //End of getJSON 
 

 
\t \t var dataset = [ 
 
\t \t { 
 
\t \t \t label: "temperature", 
 
\t \t \t data: plotdata 
 
\t \t } 
 
\t \t \t ];//End of var dataset declaration 
 

 

 
\t \t $.plot($("#placeholder"), dataset, { 
 
\t \t \t series: { 
 
\t \t \t \t lines: { show: true }, 
 
\t \t \t \t points: {show: true }, 
 
\t \t \t }, 
 
\t \t \t grid: { 
 
\t \t \t \t hoverable: true, 
 
\t \t \t \t clickable: true 
 
\t \t \t }, 
 
\t \t \t xaxis: 
 
\t \t \t { 
 
\t \t \t \t mode: "time", 
 
\t \t \t \t timeformat: "%h: %M\n %m/%d/%y", 
 
\t \t \t \t min: (new Date("2017/02/19")).getTime(), 
 
\t \t \t \t max: (new Date("2017/02/21")).getTime() 
 
\t \t \t }, 
 

 
\t \t \t yaxis: 
 
\t \t \t { 
 
\t \t \t \t min: 50, max: 100, tickSize: 5 
 
\t \t \t } 
 
\t \t }); 
 

 
\t }) //End of (document).ready 
 

 
\t </script> 
 
</head> 
 
<body> 
 

 
\t <div id="content"> 
 

 
\t \t <div class="demo-container"> 
 
\t \t \t <div id="placeholder" class="demo-placeholder"></div> 
 
\t \t </div> 
 

 
\t </div> 
 

 
</body> 
 
</html>

これは、コードから得られるものですこれを修正するには大変感謝しています。ありがとう!

+0

詳細については、[this](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323)を参照してください。 – Raidri

答えて

0

プロット関数が.getJSON関数の外にあるという問題がありました。主なプログラミングの知識がCに基づいている人として、私は、.getJSON関数の外にあるplotdata変数をそのスコープに結びつけたと仮定しましたが、.getJSONの終わりの後では、plotdata変数のサイズは0 .getJSON関数で設定した10点のテストデータのうち、

これを修正するには、プロット関数を.getJSON関数に移動しました。これで、plotdataに加えられた変更が保持され、適切なグラフが表示されます。

関連する問題