Question

下面是我的代码，其中包含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>

Answer 1

将此内容放入

$(document).ready(function(){

// your code here

});

或尝试

function pageLoad(sender, args) {

// code here
}

Answer 2

有这个链接。它显示了如何加载Google API

https://developers.google.com/chart/interactive/docs/library_loading_enhancements

Answer 3

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

如果禁用Ajax加载，将执行实际页面重新加载，并加载谷歌图表。通过将data-ajax =“false”属性添加到链接标记来禁用Ajax加载。有关Ajax加载的更多信息，请查看jquery-mobile文档： 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>

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

3 个答案: