使用getJSON从多级JSON读取到Google Chart

Reading from a multi-level JSON using getJSON into Google Chart

本文关键字：Google Chart 读取 JSON getJSON 多级 使用      更新时间：2023-09-26

快速概述(下面更详细):这是jsfiddle。中间被注释掉的部分是需要修改的地方。我无法将json数据添加到表中。任何提示都很感激。谢谢。

我试图添加一些基本数据到一个表在谷歌图表。我发现从JSON的一个层次读取很容易，但是一旦您进入多个层次，我就不知道如何使其工作。基本上，我想在表中为每个Date/Name/Users组添加一行。这是我到目前为止得到的钱。getJSON的中间部分是重要的部分):

   <script type='text/javascript'>
      google.load('visualization', '1', { packages: ['table'] });
      google.setOnLoadCallback(drawTable);
      function drawTable() {
          var array = [['Date', 'Country', 'Users']];
          var sample = [new Date(2014, 6, 5), 'USA', 12];
          array.push(sample);

          $.getJSON('/JSON/Index', { get_param: 'value' }, function (data) {
              $.each(data.UsersByDateList, function (key, value) {
                  $.each(value.UsersByDate, function (key2, value2) {
                      var item = [new value2.Date, value.Name, value2.Users];
                      array.push(item);
                  });
              });
          });

          sample = [new Date(2014, 6, 19), 'USA', 12];
          array.push(sample);
          var data = google.visualization.arrayToDataTable(array);
          var table = new google.visualization.Table(document.getElementById('table_div'));
          table.draw(data, { showRowNumber: true });
      }
   </script>

JSON是这样的:

{
   "NumRecords": "5123",
   "UsersByDateList": [
      {
         "Name": "Steve",
         "UsersByDate": [
            {
               "Date": "Date(2014,5,1)",
               "Users": 54
            },
            {
               "Date": "Date(2014,5,2)",
               "Users":103
            }
         ]
      },
      {
         "Name": "Jerry",
         "UsersByDate": [
            {
               "Date": "Date(2014,5,1)",
               "Users": 63
            },
            {
               "Date": "Date(2014,5,2)",
               "Users": 24
            }
         ]
       }
    ]
    }

问题可能与我使用的日期格式有关。我试过去掉"new"关键字，并以不同的格式(如UTC)存储日期，但我读到目前的格式"日期(YYYY,MM,DD)"是谷歌图表接受的。

好吧，你有几个错误。首先，你在json中缺少a]。同时，修改这部分:

          $.each(data.UsersByDateList, function (key, value) {
              $.each(value.UsersByDate, function (key2, value2) {
                  var item = [value2.Date, value.Name, value2.Users];
                  array.push(item);
              });
          });

仍然需要确定日期，但这应该可以消除图表绘制上的错误

更新:你在评论的部分工作，你只需要包括jquery。尽管如此，您的日期格式还是有一个大问题，因为只有在dataTable中设置json格式的图表时，您拥有它的方式才有效。另外，总是尽量避免使用eval。您可以在这里查看我所做的修复:

http://jsfiddle.net/juvian/xhp3g7u9/1/

相关文章：