javascript - 渲染时浮动图表加载动画

Question

我正在尝试实现某种动画，同时使用 Flot 图表呈现大图。我尝试了许多解决方案，但都失败了。有谁知道这是否可能，以便用户可以看到正在呈现图形。

我试图使用带有加载 gif 的叠加层，但 gif 直到图形停止渲染后才会动画。

代码被问了很多，但我想确保用户可以看到进度。

提前致谢

Answer 1

Flot 在 UI 线程上一次渲染整个绘图。如果不修改库本身，就无法显示进度。一个完美的解决方案需要大量的工作，但是，根据您的数据，一个体面的近似值可能不需要太多的努力。

例如，假设您的情节包含许多系列，并且每个系列本身的渲染速度都非常快，但它们加在一起需要很长时间。在这种情况下，如果您打开 Flot 源并查找 draw 函数，您会看到每个系列都有一个简单的循环调用 drawSeries：

function draw() {

    CODE BLOCK A

    for (var i = 0; i < series.length; ++i) {
        executeHooks(hooks.drawSeries, [ctx, series[i]]);
        drawSeries(series[i]);
    }

    CODE BLOCK B
}

将其替换为（大致；尚未测试）以下内容：

function draw() {

    CODE BLOCK A

    var i = 0,
        drawNextSeries = function() {
            drawSeries(series[i]);
            if (++i < series.length) {
                setTimeout(drawNextSeries, 0);
            } else {
                CODE BLOCK B
            }
        };

    setTimeout(drawNextSeries, 0);
}

这个想法是通过 setTimeout 在单独的调用中绘制每个系列。零毫秒延迟将调用排队等待任何待处理的工作，如其他 JS 代码、动画等。因此，在每个系列绘制之后，UI 有机会在下一个绘制之前更新。

同样，这仅在您有许多系列且每个系列都绘制得相当快的情况下才有效。如果你只有一个大系列，你最终还是会做类似的事情，但在 drawSeries 中。