点在 flotJS 中未按给定时间间隔更新：Javascript

Question

所以我正在使用随机数据生成绘制flotjs 图表。该图表工作正常且流畅。但是问题出现在图表数据点渲染的速度上。我想要的是在一秒钟内生成超过 100 个点（准确地说是 125 个），这就是为什么我将 updataInterval 变量设置为 1000/130。

因此，根据计算，应在一秒钟内显示 130 个点。但是我可以看到控制台以及图表渲染。绘图速度似乎非常慢。每秒大约 40 到 50 个点。

我希望图表在 1 秒内绘制大约 125 个点。

到目前为止，我使用 Sources 尝试过的是......

$(function () {

    var data = [];
    var dataset;
    var totalPoints = 1000;
    var updateInterval = 8;
    var now = new Date().getTime();
    var startDate = new Date().getTime();

    for (var i = 0; i < totalPoints; i++) {
        data.push([now - (totalPoints - i) * updateInterval, null]);
    }

    function GetData() {
        if (data.length > totalPoints) {
            data.shift();
        }
        var y = Math.random() * 100;
        var temp = [now += updateInterval, y];
        console.log(temp);      
        data.push(temp);
    }

    var options = {
        series: {
            lines: {
                show: true,
                lineWidth: 1,
               // fill: true
            }
        },
        xaxis: {
            mode: "time",
            tickSize: [2, "second"],
            tickFormatter: function (v, axis) {
                var date = new Date(v);
                if (date.getTime() < startDate) {
                    return "";
                } else if (date.getSeconds() % 20 == 0) {
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                    return hours + ":" + minutes + ":" + seconds;
                } else {
                    return "";
                }
            },
            axisLabel: "Time",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10
        },
        yaxis: {
            min: 0,
            max: 100,
            tickSize: 5,
            tickFormatter: function (v, axis) {
                if (v % 10 == 0) {
                    return v + "%";
                } else {
                    return "";
                }
            },
            axisLabel: "CPU loading",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 6
        },
        legend: {
            labelBoxBorderColor: "#fff"
        },
        grid: {
            backgroundColor: "#000000",
            tickColor: "#008040"
        }
    };

    $(document).ready(function () {
        GetData();

        dataset = [{
            label: "CPU",
            data: data,
            color: "#00FF00"
        }];

        $.plot($("#placeholder"), dataset, options);

        function update() {
            GetData();
            $.plot($("#placeholder"), dataset, options)
            setTimeout(update, 1000/130);
        }

        update();
    });
});

我还为它创建了一个fiddle。

你可以看到上面的代码。我将更新间隔设置为1000/130，以便在一秒钟内绘制 130 个数据点。但是数据渲染比预期的要慢得多。

请帮帮我，如果这在 flotjs 图表库中是可能的。如果不是，我愿意接受任何其他图表库建议，前提是数据流可视化应与上述小提琴示例相同。

Answer 1

有很多技巧可以提高刷新速度，例如使用 requestAnimationFrame 代替 setTimeout (Why is requestAnimationFrame better than setInterval or setTimeout)，或者在尝试刷新之前计算所有点（有两种不同的逻辑，也许你应该在你的代码）。

主要改进是在每次刷新时不创建新绘图，而是只刷新现有绘图，正如您在此主题中所展示的那样：Refresh/Reload Flot In Javascript