Google注释时间轴未在应用程序启动时显示

时间:2012-06-19 18:30:17

标签: javascript jquery google-visualization

我在使用Google注释时间表时遇到问题。我有这个在jQuery ready函数中调用的函数(如下所示):

//creates an annotated timeline
function graphAnnotatedTimeLine(url) {
    jQuery.get(url, function(returned_data) {
        //parse returned_data ...

        //build data table
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('datetime', columnHeadings[0]);
        dataTable.addColumn('number', columnHeadings[1]);

        //populate table
        for(var i = 0; i < rawData.length; i++) {
            var parsedData = data[i].split(",");
            dataTable.addRow([new Date(parsedData[0]), parseFloat(parsedData[1])]);
        }

        //draw graph
        var options = {displayAnnotations: false,
                       allowRedraw: true,
                       legendPosition: 'newRow',
                       displayZoomButtons: false,
                       wmode: 'transparent'};

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
    });
}

在就绪功能中调用:

$.ready(function() {
    //generate url string
    google.setOnLoadCallback(graphAnnotatedTimeline(url));
    self.setInterval('updateGraph', 60000);
    //more stuff
});

因此,在准备好之前,我将其称为绘制第一组数据,然后设置每分钟调用一次的更新函数。所有更新函数都与ready函数基本相同:构建url字符串并使用该url调用graph函数。我遇到的问题是它在启动时不显示的图表。一旦更新被调用一次,它就会显示正常。有没有人可以给我一些关于为什么会这样做的问题?

1 个答案:

答案 0 :(得分:0)

这是因为在加载Google可视化脚本之前调用了jquery ready函数。必须像这样调用 google.setOnLoadCallback ...

    <script type="text/javascript" src='http://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["annotatedtimeline"]}]}'></script>
    <script type="text/javascript">
      google.setOnLoadCallback(graphAnnotatedTimeline(url));
</script>