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 に答える