如何生成适配Flot实时图表的指定格式二维数组？

我帮你搞定这个问题啦！你现在的代码生成的是包含index和data属性的对象数组，但Flot实时图表需要的是**[x轴数值, y轴数值]**这样的二维数组结构，只需要做几个小修改就能达到目标：

核心修改点 #

• 替换数组推送逻辑：把当前的对象推送改成直接推送二维数组。你可以选择用时间戳（和示例里的格式一致，适合时序图表）或者用iteration作为x轴值：
  • 如果用时间戳（推荐，符合示例的时序场景）：

    rx_bytes.push([Date.now(), network.rx_bytes]);
    

  • 如果想用迭代次数作为x轴：

    rx_bytes.push([iteration, network.rx_bytes]);
    

• 统一图表容器ID：你代码里初始化用的是#networkStats，但后续绘图用的是#cpuStats，这会导致图表渲染到错误的容器里，需要改成同一个ID，比如都用#networkStats。
• 可选优化：限制数据长度：如果持续获取数据，数组会越来越大，导致图表卡顿。可以在推送新数据后限制数组最大长度（比如保留最近50条）：

  if (rx_bytes.length > 50) {
      rx_bytes.shift(); // 移除最旧的一条数据
  }
  

修改后的完整代码 #

$(document).ready(function () {
    var rx_bytes = [];
    var iteration = 0;
    //Options
    var options = {
        lines: { show: true },
        points: { show: true },
        xaxis: { 
            tickDecimals: 0, 
            tickSize: 1,
            mode: "time" // 如果用时间戳作为x轴，需要添加这个配置让Flot识别时间格式
        }
    };
    //Initial Plot
    $.plot("#networkStats", rx_bytes, options);
    function getStatistics() {
        iteration++;
        $.ajax({
            url: '/getStatistics',
            type: 'post',
            dataType: 'json',
            success: function (statistics) {
                console.log(statistics);
                var network = statistics.networks.eth0;
                // 推送二维数组，这里用时间戳作为x轴值
                rx_bytes.push([Date.now(), network.rx_bytes]);
                
                // 可选：限制数据长度，避免数组过大
                if (rx_bytes.length > 50) {
                    rx_bytes.shift();
                }
                
                console.log(rx_bytes);
                // 统一渲染到正确的容器
                $.plot("#networkStats", [rx_bytes], options);
                // 递归获取下一次数据
                getStatistics();
            }
        });
    }
    getStatistics();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这样修改后，rx_bytes数组就会变成你需要的[[时间戳1, 值1], [时间戳2, 值2], ...]格式，完全符合Flot示例的要求啦！

内容的提问来源于stack exchange，提问作者user9252059