Question

请帮助我在下面提到的代码中实现轮询。

    <!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


</head>
<body>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto">Time series Highchart</div>

<script>
$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'   
        },
        series: [{}]
    };


    setInterval(function(){
        $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
               options.series[0].data = data;
               var chart = new Highcharts.Chart(options);
        });
    }, 60000);

});
</script>
</body>
</html>

这是打到其余api并在highchart上提供数据的代码。我想实现代码，以便在轮询至少60秒后在高图上显示数据。

Answer 1

使用setInterval函数： $（document）.ready（function（）{

var options = {
    chart: {
        renderTo: 'container',
        type: 'spline'   
    },
    series: [{}]
};
var chart = new Highcharts.Chart(options);

setInterval(function(){
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
        chart.series[0].setData(data);
     });
 }, 60000);

编辑：添加了图表更新。

Answer 2

现在，使用此代码，您每60秒创建一个新图表。如果您只想更新图表上的数据，请改用Series.setData（）或Series.update（）。

chart.series[0].setData(data);

API参考：
http://api.highcharts.com/highcharts/Series.update http://api.highcharts.com/highcharts/Series.setData

例：
http://jsfiddle.net/1yfa9qkr/

如何在下面提到的代码中实现轮询。我想从指定的URL每60秒轮询一次数据。我该怎么做？

2 个答案: