Chart.jsでJSONファイルデータを使用する

かなり新しいjavascript。私のlocalhost（http://localhost:8080/jsonData.json）にあるJSONファイルを読み込み、Chart.jsを使って表示するようにフォーマットしようとしています。ここで
Chart.jsでJSONファイルデータを使用する

私のJSONファイルです：チャートを表示します

[{"date": "1/02/16", "price":15.25}, 
{"date":"29/01/16", "price":15.35}, 
{"date":"28/01/16", "price":15.1}]

と私のhtmlファイル：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Test Chart</title> 
<script src="javascript/Chart.js"></script> 
</head> 
<body> 
<canvas id="mycanvas" width="400" height="400"></canvas> 
<script> 
$.getJSON("http://localhost:8080/jsonData.json", function(data) { 
    var chartjsData = []; 
    var labels = []; 
    $.each(data, function(key, val) { 
     labels.push(key); 
     chartjsData.push(val); 
     }); 

    var lineChartData = { 
     labels : labels, 
     datasets : [{ 
      fillColor : "rgba(220,280,220,0.5)", 
      strokeColor : "rgba(220,220,220,1)", 
      data : chartjsData 
     }] 
    }; 
    var myLine = new Chart(document.getElementById("mycanvas").getContext("2d")).Line(lineChartData); 
}); 
</script> 
</body> 
</html>

は、私はそれを実行すると、基本的に私は何も表示して空白の画面を取得しますだから私は何かを私はファイルを解析していると何かを推測している、どんな助けていただければ幸いです。

出典

2016-04-16 beerye

そのtxtファイル内のJSONは有効なJSONオブジェクトではありません。あなたはそうのような通常の引用符を使用する必要があります。

[{"date": "1/02/16", "price":15.25}, 
{"date":"29/01/16", "price":15.35}, 
{"date":"28/01/16", "price":15.1}];

はまた、あなたがここにjQueryの$.getJSON機能を使用することができます。

var myJSON = $.getJSON("example.json", function() { 
    console.log("success"); 
})

はこちらをご覧ください：http://api.jquery.com/jquery.getjson/アプリが動作しない理由はない

出典

2016-04-16 00:47:47 JordanHendrix

。 .. – Borna

まだ問題を解決していないようです.. @ボルナは精巧に注意しますか？ – beerye

が編集されました...現在動作している場合はお知らせください。すぐに通知しなかったことを申し訳ありません。 – JordanHendrix

Chart.jsでJSONファイルデータを使用する

答えて

関連する問題