无法在页面上加载 Google API 图表，它们仅在我重新加载页面时显示答案

【问题标题】：Can't get Google API Charts to load on page, they only display when I reload the page无法在页面上加载 Google API 图表，它们仅在我重新加载页面时显示
【发布时间】：2012-11-10 17:07:48
【问题描述】：

下面是我的代码，其中包含 3 个图表，只有在我刷新后才会在页面上加载，有人知道如何在我第一次点击此页面时加载它吗？附言我已经尝试了很多成功的建议：function() 并尝试使用 ajax 直接加载 div 但没有运气

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script>
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Date', 'Temp'],
            {% for graphreading in graphreadings %}
                ['{{ graphreading.timeformatted }}', {{ graphreading.temperature }}],
            {%  endfor %}
        ]);

        var options = {

            hAxis: {title: 'Timestamp',
                titleTextStyle: {color: 'black'}},
            vAxis: {title: 'Temperature in °F'},
            colors: ['red']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_temp'));
        chart.draw(data, options);
    }
</script>
<script>
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Date', 'CO2'],
            {% for graphreading in graphreadings %}
                ['{{ graphreading.timeformatted }}', {{ graphreading.co2 }}],
            {%  endfor %}
        ]);

        var options = {

            hAxis: {title: 'Timestamp', titleTextStyle: {color: 'black'}},
            vAxis: {title: 'CO2 in ppm'},
            colors: ['green']

        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_co2'));
        chart.draw(data, options);
    }

</script>
<script>
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Date', 'Humidity'],
            {% for graphreading in graphreadings %}
                ['{{ graphreading.timeformatted }}', {{ graphreading.humidity }}],
            {%  endfor %}
        ]);

        var options = {

            hAxis: {title: 'Timestamp', titleTextStyle: {color: 'black'}},
            vAxis: {title: 'Humidity in %'},
            colors: ['blue']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_humidity'));
        chart.draw(data, options);
    }

</script>



<div class="middlepages" >
    <ul data-role="listview" data-inset="true" data-dividertheme="a" >

        <li><div style="text-align: center; font-size: x-large;"> Readings for {{ zone.description }}</div><div id="chart_temp"></div></li>
        <li><div id="chart_co2"></div> </li>
        <li><div id="chart_humidity"></div> </li>
        {% for reading in readings %}
            <li>Time Created: {{ reading.timeformatted }}&nbsp; Temp:{{ reading.temperature }}
                &nbsp; CO2:{{ reading.co2 }}&nbsp; Humidity:{{ reading.humidity }}&nbsp; Fan: {{ reading.fan }}
                &nbsp; Mode:{{ reading.mode }}</li>
        {% endfor %}

    </ul>
</div>

【问题讨论】：

标签： html jquery-mobile google-visualization

【解决方案1】：

把这个东西放进去

$(document).ready(function(){

// your code here

});

或者试试

function pageLoad(sender, args) {

// code here
}

【讨论】：

您的页面如何知道他必须调用该 google API？

【解决方案2】：

问题是页面在 jquery-mobile 中的加载方式。标准行为是通过 Ajax 链接页面，这只是将新页面内容添加到 DOM。这意味着您通过链接访问的页面并未真正重新加载。

如果您禁用 Ajax 加载，将执行真正的页面重新加载并加载谷歌图表。通过将 data-ajax="false" 属性添加到链接标记来禁用 Ajax 加载。查看 jquery-mobile 文档以获取有关 Ajax 加载的更多信息： http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

除此之外，您还需要按如下方式修改 javascript：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
  // this function is called once the document has been fully loaded
  $(document).ready(function () {
    ... put your stuff in here ...
    google.setOnLoadCallback(drawChart);
  });
</script>

【讨论】：