0

プロジェクトにGoogleチャートAPIを使用しています。私のプロジェクトは、URLからjsonを取得してグラフを表示するだけです。

こんなものを使っています。それは正常に動作します

  var jsonData = $.ajax({
      url: "/files/data.json",
      dataType:"json",
      async: false
      }).responseText;
  var data = new google.visualization.DataTable(jsonData);
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});

「/files/data.json」のjsonデータは次のようになります

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        .....
      ]
}

実際、同じページに 3 つのグラフがあります。サーバーからデータを取得するために 3 つの別々の要求を送信したくありません。json 応答で 3 つのグラフのデータをネストするにはどうすればよいですか。var dataはjsondata.nest1を変更しますよね?

助けていただければ幸いです。

4

1 に答える 1

0

私はこのようなことをします：

{
 nest1: [
 {
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        .....
      ]
 },

 {
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        .....
      ]
 },

 {
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        .....
      ]
 }

 ]
}

その後、jsonData.nest1[0]、jsonData.nest1[1]、および jsonData.nest1[2] でデータにアクセスできます。

1 つのヒント: ajax JSON のショートカットを使用するには、getJSON http://api.jquery.com/jQuery.getJSON/を使用できます。

お役に立てれば、

マイケル

于 2012-08-20T10:45:52.310 に答える