jQuery Flotでプロットする外部データ

JSONファイルに書き込まれたデータをプロットするためにflotプラグインを使用しようとしています。それほど難しいとは思われませんが、私は何かを見つけることができません...あなたが私を助けてくださいできますか？私が書いてきたページですjQuery Flotでプロットする外部データ

：

$(function() { 
    var data; 
    $.getJSON("1.json", function(json) { 
     var data = json; 
    }); 

    var options = { 
      legend: { 
       show: true, 
       margin: 10, 
       backgroundOpacity: 0.5 
      }, 
      points: { 
       show: true, 
       radius: 3 
      }, 
      lines: { 
       show: true 
      } 
    }; 

    var plotarea = $("#placeholder"); 

    $.plot(plotarea , data, options); 
});

次のすべてcoitain 1.jsonファイルは、一方で：

{ label: "Values", 
    data: [ 
     [1, 50.026], 
     [2, 50.028], 
     [3, 50.029], 
     [4, 50.026], 
     [5, 50.025], 
     [6, 50.016] 
     ] 
}

@MarcoJohannesen私は、「コンソールを作成する場合であっても。 JSONがスクリプトを呼び出した後にログ（データ）が残っていても、スクリプトは表示されず、画面にメッセージは表示されません。 Chromeのユーティリティを使用して（私は名前を覚えていません;-)）hteファイル1.jsonが正しく読み込まれていることがわかります。私は問題は最初にすべてのスクリプトが実行され、その後にファイル1.jsonがロードされることだと思います。私はそのページで少し編集しました。あなたはこのページ "1.htm" コードであるa demo on this page を見ることができます：（私は角括弧を追加しました）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
</head> 
    <body> 
    <h1>Graph</h1> 

    <div id="placeholder" style="width:600px;height:300px;"></div> 
<script language="javascript" type="text/javascript"> 
$(function() { 
    var data; 
    $.getJSON("1.json", function(json) { 
     var data = json; 
    }); 
    console.log(data); 

    var plotarea = $("#placeholder"); 

    $.plot(plotarea , data); 
}); 
</script> 
</body> 
</html>

、これは1.jsonある

[{ label: "Values", 
    data: [ 
     [1, 50.026], 
     [2, 50.028], 
     [3, 50.029], 
     [4, 50.026], 
     [5, 50.025], 
     [6, 50.016] 
     ] 
}}

私は間違いなく作業ページを作る方法を見つけました。それは私が使用したコードです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
</head> 
    <body> 
    <h1>Graph</h1> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $.getJSON("1.json", function(json) { 
     //succes - data loaded, now use plot: 
     var plotarea = $("#placeholder"); 
     var data=[json.data]; 
     $.plot(plotarea , data); 
    }); 
}); 

</script>  
    <div id="placeholder" style="width:600px;height:300px;"></div> 

</body> 
</html>

と、それは私がベッドが、明日、私はするつもりだ（それが正しくフォーマットされていることを確認するFLOT公式exaplesから取られた）JSONファイルになりました

{ 
    "label": "Europe (EU27)", 
    "data": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] 
}

ですプロットにラベルを追加し、一連の値を複数試してみるべきです。

出典

2011-10-22 Nicolaesse

あなたは何をチェックしてみてくださいでした$ .plotはデータ変数に入りますか？ –

@Marco、どうすれば確認できますか？ – Nicolaesse

あなたはどのブラウザを使用していますか？ IE DeveloperやFirefox Firebug、Chrome Firebug Liteを使用している場合、console.log（data）を実行できます。 getJSONの呼び出し後に:) –

私はこれを使用して、プロジェクト進捗状況の自動更新情報ウェブサイトを生成します。

私の小さな例です。線とバーの2種類以上を使用しています。

私はここに私たちは、私が実行している例がある場合は、それが簡単に理解することが見つける：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
</head> 
<body> 
<h1>Graph</h1> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $.getJSON("barLine.json", function(json) { 
     //succes - data loaded, now use plot: 
      var plotarea = $("#placeholder"); 
      var dataBar=json.dataBar; 
      var dataLine=json.dataLine; 
      $.plot(plotarea , [ 
       { 
        data: dataBar, 
        bars: {show: true} 
       }, 
       { 
        data: dataLine, 
        lines: { show: true, steps: false } 
       }    
      ] 
     ); 
    }); 
}); 

</script>  
    <div id="placeholder" style="width:600px;height:300px;"></div> 
</body> 
</html>

とデータ（barLine.json）：

{ 
"label": "Europe (EU27)", 
"dataBar": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]], 
"dataLine": [[1999, 2], [2000, 3.23], [2001, 1], [2002, 5], [2003, 2.3], [2004, 6.5], [2005, 4.0], [2006, 3.1], [2007, 0.9], [2008, 6.9], [2009, 9.9] ] 
}

出典

2012-09-18 14:34:25

このお試しください：

$(function() { 
    var data; 
    var plotarea = $("#placeholder"); 

    $.getJSON("1.json", function(json) { 
     //succes - data loaded, now use plot: 
     $.plot(plotarea , data); 
    }); 
});

をそして、あなたのJSONファイルに構文エラー（ "[" で始まり、 "}" で終わるがあるあなたはこの試みることができる：。

{ label: "Values", 
    data: [ 
     [1, 50.026], 
     [2, 50.028], 
     [3, 50.029], 
     [4, 50.026], 
     [5, 50.025], 
     [6, 50.016] 
     ] 
}

を

出典

2011-11-07 19:36:43

が動作しなくなりました...私はファイルをオンラインで更新しましたので、デバッガがあれば試すことができます。私は興味深いものを見つけましたが、スクリプトhttp://people.iola.dk/olau/flot/examples/ajax.htmlとhttp://burnsforce.com/flot-format-data-を完全に理解することができます。 flot-readable-json/ – Nicolaesse

私は働いているバージョンを作った...上記の投稿を確認してください – Nicolaesse

$ .plot（plotarea、json）; –

jQuery Flotでプロットする外部データ

答えて

関連する問題