【问题标题】：Google chart failing to load from local JSON sourceGoogle 图表无法从本地 JSON 源加载
【发布时间】：2016-03-22 09:36:42
【问题描述】：

问题

我有一个网站可以一次性运行多个图表。说 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 文件本身的获取：

【问题讨论】：

你检查inspector的URL是否正确（代码200）？
我建议检查导致 fail 的实际错误 -- 添加必要的参数 --> jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

标签： jquery ajax asynchronous google-visualization

【解决方案1】：

根据JSON Validator提供的JSON数据无效，导致无法加载JSON文件。

JSON data is fixed 后，加载数据文件并正确渲染图表，如下所示：

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



//begin our function
function drawChart() {

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

  $.ajax({
    url: 'https://gist.githubusercontent.com/vgrem/a32a35e5e22170e2c9f0/raw/950256440645ae5b506fb18547cbaa0261a1d5bc/data.json',
    dataType: "json",
    cache: false
  }).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(error) {
    google.visualization.errors.addError(container, 
      "Failed to load data for the chart.");
  });
}
//end function

<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>

【讨论】：