Google图表无法从本地JSON源加载

Question

问题

我有一个网站，一次运行多个图表。说5-7之间的任何地方。此时存在页面阻塞，而所有数据在加载之前加载图表。

我想在这里尝试实现的是在数据完成的那一刻基于每个图表触发渲染功能。所以我想要做的是为我的每张图表建模以下。

我尝试了什么

JS：

// chart basics
google.load('visualization', '1.0', {'packages':['timeline']});
google.setOnLoadCallback(drawChart);

//container
var container = document.getElementById('chart_div_23_36');

//begin our function
function drawChart() {
  $.ajax({
    url: '/data.json',
    dataType: "json"
  }).done(function(jsonData) {

    // 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.Timeline(container);
    chart.draw(data, {
          width: 924, 
          height: 340,
          enableInteractivity : false,
          backgroundColor: '#fff',
          avoidOverlappingGridLines: false
      });

  }).fail(function() {
    google.visualization.errors.addError(container, 
      "Failed to load data for the chart.");
  });
}
//end function

HTML：

请原谅这些奇怪的div名称，它们是从后端系统预生成的。

<div id="chart_div_23_36"></div>

我的 JSON 文件的内容：

{
"cols": [
{"id":"Day","label":"Day","pattern":"","type":"string"},
{"id":"Name","label":"Name","pattern":"","type":"string"},
{"id":"Color","label":"Color","pattern":"","type":"string","role":"style"},
{"id":"Start","label":"Start","pattern":"","type":"date"},
{"id":"End","label":"End","pattern":"","type":"date"}
],
"rows": [
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,10,0,0)","f":null},{"v": "Date(2013,10,10,10,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,10,13,58)","f":null},{"v": "Date(2013,10,10,10,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,10,17,59)","f":null},{"v": "Date(2013,10,10,10,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,11,0,0)","f":null},{"v": "Date(2013,10,10,11,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,11,13,58)","f":null},{"v": "Date(2013,10,10,11,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,11,17,59)","f":null},{"v": "Date(2013,10,10,11,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,12,0,0)","f":null},{"v": "Date(2013,10,10,12,5,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#33CC33","f":null},{"v": "Date(2013,10,10,12,5,59)","f":null},{"v": "Date(2013,10,10,12,6,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,12,6,59)","f":null},{"v": "Date(2013,10,10,12,7,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#0066ff","f":null},{"v": "Date(2013,10,10,12,7,59)","f":null},{"v": "Date(2013,10,10,12,8,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,12,8,59)","f":null},{"v": "Date(2013,10,10,12,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,13,0,0)","f":null},{"v": "Date(2013,10,10,13,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,13,13,58)","f":null},{"v": "Date(2013,10,10,13,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,13,17,59)","f":null},{"v": "Date(2013,10,10,13,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,14,0,0)","f":null},{"v": "Date(2013,10,10,14,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,14,13,58)","f":null},{"v": "Date(2013,10,10,14,17,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,14,17,59)","f":null},{"v": "Date(2013,10,10,14,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,15,0,0)","f":null},{"v": "Date(2013,10,10,15,1,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#33CC33","f":null},{"v": "Date(2013,10,10,15,1,59)","f":null},{"v": "Date(2013,10,10,15,2,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,15,2,59)","f":null},{"v": "Date(2013,10,10,15,3,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#0066ff","f":null},{"v": "Date(2013,10,10,15,3,59)","f":null},{"v": "Date(2013,10,10,15,4,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,15,4,59)","f":null},{"v": "Date(2013,10,10,15,30,59)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#CCCCCC","f":null},{"v": "Date(2013,10,10,16,0,0)","f":null},{"v": "Date(2013,10,10,16,13,58)","f":null}]},
{"c":[{"v":"Tue 15/03/16","f":null},{"v":"","f":null},{"v":"#FF0000","f":null},{"v": "Date(2013,10,10,16,13,58)","f":null},{"v": "Date(2013,10,10,16,17,59)","f":null}]},
]
}

错误

  

无法加载图表数据。

我从AJAX调用的.fail部分收到错误。唯一的问题是我无法理解为什么。这一切看起来都对我而且我尝试过很多变种。

我看到了JSON文件本身的获取：

Answer 1

根据@DaveSexton提供的JSON数据无效，它会阻止加载JSON文件。

JSON Validator后，加载数据文件并正确呈现图表，如下所示：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div_23_36"></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;