Question

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

我非常确定问题是我尝试使用jQuery的getJSON方法加载dataTable，但我已经阅读了{{{{ 3}}仍然无法连接点。

我试图获取的数据来自网址/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

这里有几个问题，我会尽力帮助......

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

通过$(document).ready(function(){ if(!$('.myTable').find('tr').length) $('.header').hide(); })加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的gstatic <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="row"> <div class="header">ADDITIONAL ITEMS:</div> <div class="clearfix"></div> <div class="table-responsive m-t"> <table class="myTable"> </table> </div> </div>。

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

使用此 - ＆gt; loader.js

load

而不是 - ＆gt; <script src="https://www.gstatic.com/charts/loader.js"></script>

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

接下来，google的<script src="https://www.google.com/jsapi"></script>会等待文档加载，不需要...

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

和callback是异步的 $(document).ready(function(){...函数将在getJSON完成之前返回loadIngredients

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

类似于以下结构...

getJSON

Google Charts：通过document.write

1 个答案: