通過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

回答

相關問題