Question

我正在为我的项目使用谷歌图表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}]},
        .....
      ]
}

实际上我在同一页面上有三个图表。我不想发送三个单独的请求来从服务器检索数据。如何在json响应中嵌套三个图表的数据。 var data 会改变 jsondata.nest1 吗？

我感谢任何帮助。

Answer 1

我会做这样的事情：

{
 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]访问数据。

一个提示：要使用ajax JSON的快捷方式，您可以使用getJSON http://api.jquery.com/jQuery.getJSON/

希望这有帮助，

迈克尔

使用谷歌图表API显示多个图表

1 个答案: