javascript - 制作一个简单的实时图表

Question

我正在尝试从数据库中获取一些数据并将其绘制成实时图表。我以此为例:http://www.flotcharts.org/flot/examples/ajax/index.html

JSON 是这样的:

  "networks": {
         "eth0": {
             "rx_bytes": 5338,
             "rx_dropped": 0,
             "rx_errors": 0,
             "rx_packets": 36,
             "tx_bytes": 648,
             "tx_dropped": 0,
             "tx_errors": 0,
             "tx_packets": 8
         }
       }

但是即使 rx_bytes 数组内部有数据，我的代码也不会绘制任何内容。我在这里缺少什么？

 var rx_bytes = [], tx_bytes = [], cpu = [], mem = [];

    //Options
    var options = {
        lines: {
            show: true
        },
        points: {
            show: true
        },
        xaxis: {
            tickDecimals: 0,
            tickSize: 1
        }
    };

    //Initial Plot
    $.plot("#cpuStats", rx_bytes, options);
    $.plot("#memStats", mem, options);
    $.plot("#networkStats", cpu, options);

    function getStatistics() {
         $.ajax({
            url: '/getStatistics',
            type: 'post',
             dataType: 'json',
            success: function (statistics) {
                console.log(statistics);
                var network = statistics.networks.eth0;
                rx_bytes.push(network.rx_bytes);
                console.log(rx_bytes);

                //Plot
                $.plot("#cpuStats", rx_bytes, options);
                //get data again
                getStatistics();
            }
        });
    }
    
     getStatistics();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>

Answer 1

您需要为每个新数据点提供一个 X 值。在这种情况下，您可能需要一个时间戳。另外，不要在成功处理程序中调用 getStatistics()。它可能会导致过多的递归。而是使用 setTimeout()

success: function (statistics) {
    var network = statistics.networks.eth0;
    var now = new Date().getTime();
    rx_bytes.push([now, network.rx_bytes]);
    $.plot("#cpuStats", rx_bytes, options);
    setTimeout(getStatistics, 1000);
}

每秒更新一次。

这是一个更强大的 jsFiddle example它还处理数据尚未填满 X 轴的初始时间段，并在该时间段到期后删除旧数据。