Html Can'；我无法在页面上加载GoogleAPI图表，它们仅在我重新加载页面时显示

下面是我的代码和3个图表，只有在我刷新后才会加载到页面上，有人知道如何在我第一次单击此页面时加载它吗？另外，我尝试了很多成功的建议：function（）和trie使用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>

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['日期'，'临时']，
{%用于GraphThreadings%中的GraphThreading}
[{{graphreading.timeformatted}}'，{{{graphreading.temperature}}]，
{%endfor%}
]);
变量选项={
hAxis:{title:'Timestamp'，
titleTextStyle:{color:'black'}}，
vAxis:{title:'温度单位为华氏度'}，
颜色：[“红色”]
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_temp'）；
图表绘制（数据、选项）；
}
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['日期'，'二氧化碳']，
{%用于GraphThreadings%中的GraphThreading}
[{{graphhreading.timeformatted}}'，{{{graphhreading.co2}}]，
{%endfor%}
]);
变量选项={
hAxis:{title:'Timestamp'，titleTextStyle:{color:'black'}}，
vAxis:{title:'CO2单位ppm'}，
颜色：[“绿色”]
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_-co2'）；
图表绘制（数据、选项）；
}
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘日期’、‘湿度’]，
{%用于GraphThreadings%中的GraphThreading}
[{{graphreading.timeformatted}}'，{{{graphreading.timeformatted}}]，
{%endfor%}
]);
变量选项={
hAxis:{title:'Timestamp'，titleTextStyle:{color:'black'}}，
vAxis:{title:'湿度%'}，
颜色：[“蓝色”]
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_-hydress'）；
图表绘制（数据、选项）；
}

{{zone.description}的读数


{%用于读取读数%}
创建的时间：{reading.timeformatted}临时：{{reading.temperature}
二氧化碳：{reading.CO2}湿度：{{reading.湿度}}风扇：{{reading.Fan}
模式：{{reading.Mode}}
{%endfor%}

把这个东西放进去

$(document).ready(function(){

// your code here

});

或尝试

function pageLoad(sender, args) {

// code here
}

---

问题在于jquery mobile中页面的加载方式。标准行为是通过Ajax链接页面，Ajax只是将新页面内容添加到DOM中。这意味着您通过链接访问的页面实际上没有重新加载

如果禁用Ajax加载，将执行真正的页面重新加载，并加载google图表。通过向link标记添加data Ajax=“false”属性，可以禁用Ajax加载。 有关Ajax加载的更多信息，请查看jquery mobile文档：

除此之外，您还需要修改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>

load（'visualization'，'1'，{packages:['corechart']}）；
//此函数在文档完全加载后调用
$（文档）.ready（函数（）{
…把你的东西放在这里。。。
setOnLoadCallback（drawChart）；
});

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