Question

我正在尝试每分钟更新一次图表并调用图表功能。不知道我做错了什么。任何人都可以提供帮助。

页面在这里： -

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>

非常感谢任何帮助。

由于

乔纳森

Answer 1

外$()的目的是$(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或（更好）末尾。在这些元素之外包含元素不是有效标记。

Answer 2

另外你可以像这样分开它

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();
});

这不是最美丽的解决方案，因为它在全球范围内造成污垢，但很快

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

2 个答案: