如何每分钟更新javascript函数和更新图表

how to update javascript function every minute and update chart?

本文关键字：更新 函数 javascript 每分钟      更新时间：2023-09-26

我试图每分钟更新我的图表并调用图表函数。不知道我做错了什么。有人能帮忙吗?

页面在这里:-

http://www.api.jonathanlyon.com/m.html

下面是代码:- 
        <!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="https://raw.github.com/oesmith/morris.js/0.3.2/morris.js"></script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
</head>
<script>
window.setInterval(function(){
  chart()
}, 5000);
</script>
<script>
 morrisTemplate = {
      element: 'line-example',
      data: [
      ],
      xkey: 'x',
      xLabels: "hour",
      ykeys: ['volvo'],
      ymin: '0',
      labels: ['Volvo Fan Numbers']
    }

$(function chart(){
    $.ajax({
        url: "http://www.api.jonathanlyon.com/api_fanpage2.php?pagename=volvo&format=json&hourly=true",
        success: function (data){
            toPlot = []
            $.each(data[0]['pagename']['volvo']['data'], function(i, item){
                toPlot.push({x: item['date'] , volvo: item['newfans']   });
            });
            console.log("length:" + toPlot.length)
             toPlot.reverse()
            morrisTemplate.data = toPlot.slice(toPlot.length - 24, toPlot.length)
            Morris.Line(morrisTemplate);
         },
    });

})
</script>

<body>
  <div id="line-example"></div>
</body>
</html>

任何帮助都将非常感激。

感谢乔纳森

外部$()的目的是$(document).ready()的简写。继续，将所有代码扔到jQuery包装器中，以延迟执行，直到DOM准备好。

<script> 
$(function () {
    window.setInterval(chart, 5000);
    morrisTemplate = {
      element: 'line-example',
      data: [
      ],
      xkey: 'x',
      xLabels: "hour",
      ykeys: ['volvo'],
      ymin: '0',
      labels: ['Volvo Fan Numbers']
    }
    function chart(){
        $.ajax({
            url: "http://www.api.jonathanlyon.com/api_fanpage2.php?pagename=volvo&format=json&hourly=true",
            success: function (data){
                toPlot = []
                $.each(data[0]['pagename']['volvo']['data'], function(i, item){
                    toPlot.push({x: item['date'] , volvo: item['newfans']   });
                });
                console.log("length:" + toPlot.length)
                 toPlot.reverse()
                morrisTemplate.data = toPlot.slice(toPlot.length - 24, toPlot.length)
                Morris.Line(morrisTemplate);
             },
        });
    }
});
</script>

此外，您需要将脚本包含在head或(更好)body标记的末尾。包含这些元素之外的元素是无效的标记。

另外你也可以这样分割

function chart(){
    $.ajax({
        url: "http://www.api.jonathanlyon.com/api_fanpage2.php?pagename=volvo&format=json&hourly=true",
            success: function (data){
            toPlot = []
            $.each(data[0]['pagename']['volvo']['data'], function(i, item){
                toPlot.push({x: item['date'] , volvo: item['newfans']   });
            });
            console.log("length:" + toPlot.length)
            toPlot.reverse()
            morrisTemplate.data = toPlot.slice(toPlot.length - 24, toPlot.length)
            Morris.Line(morrisTemplate);
        }
    });
}

$(function () {
    chart();
});

这不是最漂亮的解决方案，因为它在全局范围内制造污垢，但快速

相关文章：