Google AnnotatedTimeLine 日期时间 JSON 错误答案

【问题标题】：Google AnnotatedTimeLine DateTime JSON ErrorGoogle AnnotatedTimeLine 日期时间 JSON 错误
【发布时间】：2012-02-22 12:48:45
【问题描述】：

我在尝试使用 Google Charts API 构建带注释的时间线图时遇到问题。

在 JSON 中，对于第一个“日期”列，如果我使用：

"v": new Date(2010, 01, 01)

然后我从我的页面收到一个 JavaScript 错误，说我的 JSON 无效。

如果我改用：

"v": "new Date(2010, 01, 01)" 然后我收到错误TypeError: 'undefined' is not a function (evaluating 'M[y]()')。

我的 JavaScript 代码只是对饼图示例代码的修改：http://code.google.com/apis/chart/interactive/docs/php_example.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="scripts/jquery-1.6.2.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['annotatedtimeline']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          dataType:"json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="height: 200px; width:200px;"></div>
  </body>
</html>

我知道人们也遇到过类似的问题：

http://groups.google.com/group/google-visualization-api/browse_thread/thread/4cfe7f07e5ef4bcc

http://www.mail-archive.com/google-visualization-api@googlegroups.com/msg02940.html

但是在这些线程/页面中，答案似乎是使用 "v": new Date(2010, 01, 01) 但这对我不起作用。

我不确定我在这里缺少什么。

谢谢

【问题讨论】：

你能创建一个 jsfiddle 演示吗？请使用 jsonlint.com 或任何其他工具验证最终的 JSON 结构。
我已经使用 Jason (macupdate.com/app/mac/35588/jason) 验证了最终的 JSON 结构，而且我之前从未使用过 jsfiddle，所以我现在会弄清楚如何做到这一点，并尽快发布明白了。
另请注意，在 Jason 中，它会在使用 "v": "new Date(2010, 01, 01)" 而不是 "v": new Date(2010, 01, 01) 时进行验证
在 jsfiddle 上我只得到一个空白页面，这正是我在浏览器中得到的。话虽如此，这有点不同，因为我在浏览器中使用 PHP 而在 jsfiddle 中只使用 HTML/JS（我不得不稍微破解一下）。您希望从 jsfiddle 获得什么，我可以从其他地方为您获得吗？
Jason 没有正确解释 Javascript，这就是原因。 new Date(2010, 01, 01) 是一个 Javascript 语句。但是当你用引号给它时，它就变成了一个字符串。所以 Jason 验证成功。

标签： javascript json datetime google-visualization

【解决方案1】：

所以在 Google Visualization API 用户组的一点帮助下，我终于弄明白了。

当使用 "v": "Date(2010, 01, 01)" 时，这既可以验证为 JSON，也可以正确呈现 - 请注意缺少 "new" 关键字。

希望这对将来的其他人有所帮助。

【讨论】：

是的，他们应该从文档中删除“新”。传入 UNIX 时间戳并调用日期，如下所示：{ v : "Date(" + myUnixTimestamp + ")" } 也可以。

【解决方案2】：

好吧，这是原始和混乱，但它有效！

在 jquery 1.4.2 上测试

google.load('visualization', '1', {packages: ['annotatedtimeline']});
google.load('jquery','1.4');
window.row = Array();

$.getJSON( "https://spreadsheets.google.com/feeds/list/YOURDOCSKEYID/od6/public/values?alt=json-in-script&callback=?",
  function (data) {   
  $.each(data.feed.entry, function(i,entry) {  
    row.push([new Date(entry.gsx$date.$t),+entry.gsx$column1.$t,+entry.gsx$column2.$t]); 
  });
});

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Column 1');
  data.addColumn('number', 'Column 2');
  data.addRows(row);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
      document.getElementById('visualization'));
  annotatedtimeline.draw(data, {'displayAnnotations': true});
}

google.setOnLoadCallback(drawVisualization);

【讨论】：