2

.json ファイルの値を使用して、Google チャートを使用して折れ線グラフを描画しようとしています。私は試しましたが、成功していません。

これは私の .json ファイルです

[
   {
      "Year":2005,
      "Sales":25000,
   },
   {
      "Year":2006,
      "Sales":25085,
   },
   {
      "Year":2007,
      "Sales":186230,
   },
   {
      "Year":2008,
      "Sales":35036,
   },
   {
      "Year":2009,
      "Sales":15900,
   },
   {
      "Year":2010,
      "Sales":35700,
   }
]

コード

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function loadData(fileName) { 
        // getting json from a remote file
        // by returning the jqXHR object we can use the .done() function on it
        // so the callback gets executed as soon as the request returns successfully
        return $.getJSON( fileName + ".json");
    }

    function drawChart() {
            var myFile = "Data";

        var obj= loadData(myFile);
        var data = google.visualization.arrayToDataTable(obj);

        var options = {
            title: 'Chart Demo'
        };

        var chart = new google.visualization.LineChart(
                    document.getElementById('chart_div'));
        chart.draw(data, options);
     }

エラー

Error: Not an array
http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
Line 2

これを修正する方法は？

4

2 に答える 2

3

これを試して、ファイルからjsonデータを取得してください。

var data = $.ajax({
                 url: "Data",
                 dataType: "json",
                 async: false,
                 }).responseText;
于 2013-02-21T10:42:15.250 に答える
2 
// by returning the jqXHR object we can use the .done() function on it
// so the callback gets executed as soon as the request returns successfully

を使用しないため、.done()渡すときに、データを取得していない可能性が最も高いオブジェクトをobj渡しています。jqXHR

これはうまくいくはずです：

function drawChart() {
    var myFile = "Data";

    //Use getJSON and process the file contents in the callback function
    $.getJSON(myFile + '.json', function(obj) {

        var data = google.visualization.arrayToDataTable(obj);

        var options = {
            title: 'Chart Demo'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });
}
于 2013-02-19T08:03:00.827 に答える