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数组中包含数据，我的代码也不会绘制任何内容。我在这里缺少什么？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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轴的初始阶段，并在该期限到期后丢弃旧数据。

制作一个简单的实时图表

1 个答案: