2

我试图每分钟更新一次图表并调用图表函数。不知道我做错了什么。任何人都可以帮忙。

页面在这里：-

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>

任何帮助将非常感激。

谢谢

乔纳森

4

2 回答 2

3

外部的目的$()是$(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包括这些元素之外的元素不是有效的标记。

于 2013-01-09T19:47:53.273 回答
0

另外你可以像这样拆分它

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

这不是最漂亮的解决方案，因为它会在全球范围内产生污垢，但很快

于 2013-01-09T19:39:56.610 回答