通过Ajax加载Google Visualization

我在应用程序中有几个选项卡，每个选项卡通过jQuery load（）函数加载不同的子页面。通过Ajax加载Google Visualization

我的问题是，一些页面包含谷歌可视化插件，这些将无法正常工作。

我的第一个办法是让JavaScript来在子页面的可视化API被加载，但没有工作 - 该网页将变为空白，而从apis.google.com

装东西卡住

我的第二种方法是在可视化应该去的地方插入一个div，然后调用一个将填充这个div的脚本（我之前定义的）。

这里是生成可视化的脚本：

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

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('datetime', 'Date'); 
    data.addColumn('number', 'Temperature'); 
    data.addColumn('number', 'Humidity'); 

    data.addRows([ 
    <?php echo /* raw data outputted by generating functions */ ?> 
    ]); 


    var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div')); 
    chart.draw(data, { 
    displayAnnotations: true, 
    'scaleColumns': [0,1], 
'scaleType': 'allmaximized', 
'displayZoomButtons': false 
    }); 
}

这里是我用来调用上述脚本（被点击一个标签时）的脚本。

$('#loadarea').load('tab1.php'); 
drawChart();

而且，这可能是相关的：在文档的开头，我使用jQuery的预加载页面上的其他一些空间：

$(document).ready(function() { 
    $('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1}); 
});

感谢，

来源

2010-04-08 Goro

有这两件事是错误的：

google.setOnLoadCallback(drawChart)正在调用函数，所以我得到摆脱那。
脚本试图填补它被载入前div，所以我增加了函数调用drawChart()制表改变脚本中：

$('#loadarea').load('tab1.php', function() { drawChart(); });

这就是现在的工作。

来源

2010-04-09 22:03:00 Goro

这是一个非常好的答案。我已经通过其他问题回答了更多的投票，但这个简单的工作就是让它工作。谢谢。 – Vedant261 2015-10-08 14:59:18

通过Ajax加载Google Visualization

回答

相关问题