Question

我第一次使用Google Charts。我已将饼图的基本示例复制到我的页面中，并在我的标题中包含了Google jsapi。

我已将以下代码添加到我的页面中：

<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and draws it.
function drawChart() {

  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Items', '# Items'],
    ['New', eval(new_items)],
    ['Current', eval(cur_items)],
    ['Retired', eval(ret_items)]
  ]);

  // Create and draw the visualization.
  new google.visualization.PieChart(document.getElementById('item_mix')).
  draw(data, {title:"Items Status Mix"});   
  }

</script>

当我加载页面时，一切正常，图表显示和变量值确认数据。

然后我将Google代码包装在我自己的函数中并调用loadHQCharts（）;在主脚本的末尾。

<div id="item_mix"></div>

<script type="text/javascript"> 
function loadHQCharts() {
   // Load the Visualization API and the piechart package.
   google.load('visualization', '1', {'packages':['corechart']});    
   .
   . 
}
</script>

<script type="text/javascript"> 
jQuery(document).ready(function(){
  DO STUFF HERE...
  loadHQCharts();
});
</script>

页面加载然后变为空白，其中一个空BODY并且在inspect / Firebug中没有错误。欢迎任何想法！

Answer 1

您可以删除jQuery(document).ready(function(){包装并直接致电loadHQCharts，它应该可以正常使用。

或删除google.setOnLoadCallback功能并将callback参数添加到第一行：

  google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
  //remove: //google.setOnLoadCallback(drawChart);

Google图表 - 调用图表函数时页面不会加载

1 个答案: