Question

div是：

<div>
        <canvas id="chart-area2" width="300" height="300"/>
    </div>

如何在不重新加载页面的情况下每10秒刷新一次div？

以下是javascript：

<script>

    var pieData2 = [
            {
                value: <?= $pfstatetext;?>,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red :"
            },
            {
                value: <?= $cpuusage; ?>,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }

        ];

        window.onload = function(){

            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            var myPie2 = new Chart(ctx2).Pie(pieData2);

        };


</script>

我如何在上面的代码中使用setInterval？..................................... .................................................. ..............

Answer 1

您可以使用该代码

function refreshTheDiv(){
    // Your drawing code here
    window.setTimeout(refreshTheDiv,10000);
}

并用引用canvas元素的代码替换行// Your drawing code here。

在您的具体案例中：

(function(){
    var myPie2;
    window.onload = function(){
        var ctx2 = document.getElementById("chart-area2").getContext("2d");
        myPie2 = new Chart(ctx2).Pie(pieData2);
        updateChart();
    };
    function updateChart()
    {
       $.getJson('/data.php',function(data){
          // Do the update here (Seems dead : https://github.com/nnnick/Chart.js/issues/13 )
          // You may deal with chartjs methods or recreate the chart:
           myPie2 = new Chart(ctx2).Pie(data); // Quick and dirty solution
           setTimeout(updateChart,10000);
       });
    }
})();

data.php包含以下内容：

<?php    
echo json_encode(
     array(
            array(
                'value'=> $pfstatetext,
                'color'=>"#F7464A",
                'highlight'=> "#FF5A5E",
                'label'=> "Red :"
            ),
            array(
                'value'=>$cpuusage,
                'color'=> "#46BFBD",
                'highlight'=> "#5AD3D1",
                'label'=> "Green"
            ),
            array(
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            )
             //...

        )


);

您必须包含JQuery：http://code.jquery.com/jquery-1.11.1.js 我的解决方案

ChartJS update data

Answer 2

如果要更新画布绘画并且您不使用服务器，请使用js setTimeout或setInterval（您可以在此处阅读这些函数：http://www.w3schools.com/js/js_timing.asp）。在传递给这些函数的回调函数中，您使用画布＆＃39;上下文对象和绘画你想要的任何东西。

如果您想更新内容，如文本和HTML，或者绘画与服务器相关，我认为您应该使用AJAX。 AJAX在页面加载后启用通信，因此您不必再次加载整个页面。有很多关于ajax的教程，其中一个是在W3schools上。此外，如果您使用AJAX，您应该使用我之前提到的计时功能，以便每10秒刷新一次。

另一种解决方案是使用服务器发送事件。如果要刷新div以更新内容（根据数据库，服务器等），因此内容将始终更新，您可以使用此技术跟随差异和更新，并加载它们。你可以在这里阅读：http://www.w3schools.com/html/html5_serversentevents.asp。我不确定这种技术是否适合你所需要的，这取决于你重新加载页面的目的是什么，所以我认为如果内容来自服务器，AJAX将是一个很好的解决方案，如果您不使用服务器，那么第一个解决方案是唯一正确的解决方案。

Answer 3

编写一个函数来通过ajax获取div中的内容，并编写一个jquery代码，每隔10秒调用一次该函数。例如：

function fetch_content(){
  $.ajax({
    url: "url for ajax page",
    type: "POST",
    success: function(data){
       $('div').html();
    }
 });
}

和每隔10秒调用此函数的代码

setInterval(fetch_content,10000);

Answer 4

我想，一种解决方案是在css中使用和隐藏滚动条。只需使用该div创建其他页面，然后将其加载到具有适当大小的iframe中。

如何仅刷新网页中的<div>内容？</div>

4 个答案:

在您的具体案例中：