jquery - 通过 document.write 调用 Google Charts : A Parser-blocking, 跨站点

Question

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

我很确定问题是我正在尝试使用 jQuery 的 getJSON 方法加载 dataTable，但我已经通读了 this question 的答案。但仍然无法将这些点连接起来。

我尝试获取的数据来自 URL /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

这里有一些问题，我会尽力帮助......

<小时/>

首先，需要使用最新版本的Google Charts，根据发行说明...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

这只会改变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已完成

因此，建议先加载Google，然后等待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);
}