Google Charts:通过document.write调用解析器阻塞的跨站点

Question

我在尝试加载Google Charts脚本时收到上述消息.

我很确定问题是我正在尝试使用jQuery的getJSON方法加载dataTable ,但我已经阅读了这个问题的答案,仍然无法连接点.

我想要获取的数据来自网址/api/formula,如下所示:

[{"name": "the name", "amount": "the amount"},{...},{...}]

我用于图表的脚本是这样的:

google.load('visualization', '1.0', {
'packages':['corechart']
});
google.setOnLoadCallback(drawChart);
function loadIngredients() {
var jsonData = {
 "cols": [
 {"id":"","label":"Ingredient","pattern":"","type":"string"},
 {"id":"","label":"Amount","pattern":"","type":"number"}
 ],
 "rows": []
};

$.getJSON('/api/formula', function(data){
  $.each(data, function(key, item){
    jsonData.rows.push({"c":[{"v":item.name,"f":null},{"v":item.amount,"f":null}]});
  });
});
return jsonData;
}

function drawChart() {
  var options = {
    'title': 'Formula Breakdown By Weight',
    'pieHole': 0.4
  };

  var data = new google.visualization.DataTable(loadIngredients());
  var chart = new google.visualization.PieChart(document.getElementById('formula-chart-div'));
  chart.draw(data, options);
}

最后我嵌入它的jQuery看起来像这样:

$(document).ready(function(){
  $('.formula-info').click(function(){


if (someStuffIsntEntered) {
    $('#modal2').modal();
} else if(someOtherStuffIsntEnered) {
    $('#modal3').modal();
} else {
  $('#formula-info-div').fadeIn(750);
  $('#formula-build-div').hide();

  //draw chart from formula-chart.js
  loadIngredients();


  //grab json data for formula ingredients
  $.getJSON('/api/formula', function(data){
    $('.formula-breakdown-table > tbody').empty();
    //fill in table with info provided in form at top of page
    $.each(data, function(key, item){
    //fill in a table with data from the JSON
    );
  });
 }
});

//fade in top of page
    $('.back-to-main-page').click(function(){
    $('#formula-build-div').fadeIn(750);
    $('#formula-info-div').hide();
  });
});

如果它有助于按此顺序加载文件:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="../../../javascripts/formula.js"></script> //jquery
<script src="../../../javascripts/formula-chart.js"></script> //google charts

我的代码可能有一些问题,但我相信我的错误信息是因为数据本身没有被加载.

Answer 1

这里有几个问题,我会尽力帮忙......

首先,需要使用最新版本的谷歌图表,根据发布说明...

通过jsapi加载程序保留的Google Charts版本不再一致地更新.请loader.js从现在开始使用新的gstatic .

这只会改变load声明......

用这个 - > <script src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {
'packages': ['corechart']
});

而不是 - > <script src="https://www.google.com/jsapi"></script>

google.load('visualization', '1.0', {
'packages':['corechart']
});

接下来,谷歌callback将等待文件加载,无需...

$(document).ready(function(){...

并且getJSON是异步
的,loadIngredients函数将jsonData在getJSON完成 之前返回

因此,建议首先加载谷歌,然后等待callback,
然后加载数据,最后绘制图表

类似于以下结构......

google.charts.load('current', {
  callback: loadIngredients,
  packages: ['corechart']
});

function loadIngredients() {
  var jsonData = {
   "cols": [
     {"id":"","label":"Ingredient","pattern":"","type":"string"},
     {"id":"","label":"Amount","pattern":"","type":"number"}
   ],
   "rows": []
  };

  $.getJSON('/api/formula', function(data){
    $.each(data, function(key, item){
      jsonData.rows.push({"c":[{"v":item.name,"f":null},{"v":item.amount,"f":null}]});
    });
    drawChart(jsonData);
  });
}

function drawChart(jsonData) {
  var options = {
    'title': 'Formula Breakdown By Weight',
    'pieHole': 0.4
  };

  var data = new google.visualization.DataTable(jsonData);
  var chart = new google.visualization.PieChart(document.getElementById('formula-chart-div'));
  chart.draw(data, options);
}