0

以下は、ページを更新した後にのみページにロードされる3つのチャートを含む私のコードです。このページを初めてクリックしたときにロードする方法について何かアイデアはありますか? PS私は成功して多くの提案を試みました: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>
4

2 に答える 2

0

問題は、ページが jquery-mobile に読み込まれる方法です。標準的な動作は、新しいページ コンテンツを DOM に追加するだけの Ajax を介してページをリンクすることです。これは、リンク経由でアクセスしているページが実際には再読み込みされていないことを意味します。

Ajax の読み込みを無効にすると、実際のページのリロードが実行され、Google チャートが読み込まれます。link タグに 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>
于 2013-08-18T21:42:54.003 に答える
0

この物を入れて

$(document).ready(function(){

// your code here

});

または試す

function pageLoad(sender, args) {

// code here
}
于 2012-11-10T17:12:19.187 に答える