谷歌图表不适用于 jquery 加载功能答案

【问题标题】：Google charts not working with jquery load function谷歌图表不适用于 jquery 加载功能
【发布时间】：2012-05-19 16:33:00
【问题描述】：

我正在使用谷歌图表 api 来绘制表格图表。
我正在以这种方式使用 jquery 拨打ajax 电话 -

$('#table_div').load('getAnalysis.aspx');

在这里，我使用jquery 的load 函数填充<div id=table_div"></div>。
现在getAnalysis.aspx 返回以下 html 文本 -

<div id="iqr_table"></div>
<script type='text/javascript'>
    google.load('visualization', '1', { packages: ['table'] });
    google.setOnLoadCallback(iqr_drawTable);
    function iqr_drawTable() {
      var iqr_data = new google.visualization.DataTable();
      iqr_data.addColumn('string', 'Q #');          
      iqr_data.addColumn('string', 'My Answer');
      iqr_data.addColumn('string', 'Correct Answer');
      iqr_data.addRows([
    ['1', 'A', 'C', ],
    ['2', '', 'C,D', ],
    ['3', 'C', 'C', ],
    ['4', 'D', 'D', ],
    ['5', 'C,D', 'A,B', ],
   ]);

      var table = new google.visualization.Table(document.getElementById('iqr_table'));
      table.draw(iqr_data, { showRowNumber: true });
}
</script>

我已经使用谷歌浏览器内置的开发者工具进行了检查，ajax 调用正确并且 html 文本被正确接收，还评估了接收内容中的 <script> 标签。

但在评估 <script> 标记后立即出现问题，<body> 从页面中删除并且没有显示任何内容。
我不明白错误在哪里。

P.S : 我已经在主页中包含了所有必需的脚本文件，所以请不要指出。

【问题讨论】：

标签： c# jquery google-visualization

【解决方案1】：

好的，问题出在脚本上：

<script type='text/javascript'>
    google.load('visualization', '1', {
        packages: ['table']
    });
    google.setOnLoadCallback(iqr_drawTable);

    var iqr_data = { }; // define it here.

    function iqr_drawTable() {
        /*var*/ iqr_data = new google.visualization.DataTable(); // iqr_data is defined here.
        iqr_data.addColumn('string', 'Q #');
        iqr_data.addColumn('string', 'My Answer');
        iqr_data.addColumn('string', 'Correct Answer');
        iqr_data.addRows([
            ['1', 'A', 'C', ],
            ['2', '', 'C,D', ],
            ['3', 'C', 'C', ],
            ['4', 'D', 'D', ],
            ['5', 'C,D', 'A,B', ], ]);

        var table = new google.visualization.Table(document.getElementById('iqr_table'));
        table.draw(iqr_data, {    // and isn't available here.
            showRowNumber: true
        });
    }
</script>

虽然我不知道为什么<body> 需要从页面中删除...但这是我可以注意到的问题...

【讨论】：

我已经尝试过iqr_data 修复但无法正常工作，尽管我认为它不是必需的，因为它的范围有限。你写了"and isnt available here" 所以那里没有什么。
好吧....只是因为缩进不好，我认为 table.draw 在函数之外被调用...对不起...

【解决方案2】：

想通了 - Google API 说要先初始化负载。所以也许将 google.load 函数排除在 AJAX 获取的脚本之外，

google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){               
// Get TIER1Tickets                 
$('#table_div').load('getAnalysis.aspx');

我从getAnalysis.aspx 得到的是这个（假设 google 已经初始化并且包已经加载） -

<div id="iqr_table"></div>
<script type='text/javascript'>    
  var iqr_data = new google.visualization.DataTable();
  iqr_data.addColumn('string', 'Q #');          
  iqr_data.addColumn('string', 'My Answer');
  iqr_data.addColumn('string', 'Correct Answer');
  iqr_data.addRows([
  ['1', 'A', 'C', ],
  ['2', '', 'C,D', ],
  ['3', 'C', 'C', ],
  ['4', 'D', 'D', ],
  ['5', 'C,D', 'A,B', ],   

  var table = new google.visualization.Table(document.getElementById('iqr_table'));
  table.draw(iqr_data, { showRowNumber: true });
}

【讨论】：