Javascript Flot图表在渲染时加载动画

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

我曾尝试在加载gif时使用覆盖，但在图形停止渲染之前，gif不会设置动画

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

---

提前感谢

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
}

函数绘图（）{
代码块A
对于（变量i=0；i

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

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

函数绘图（）{
代码块A
var i=0，
drawNextSeries=函数（）{
图纸系列（系列[i]）；
if（++i<系列长度）{
setTimeout（drawNextSeries，0）；
}否则{
代码块B
}
};
setTimeout（drawNextSeries，0）；
}

其思想是通过setTimeout在单独的调用中绘制每个系列。零毫秒延迟将调用排队，以便在任何挂起的工作之后运行，就像其他JS代码、动画等。因此，在每个系列绘制之后，UI有机会在下一个绘制之前更新

---

同样，只有当您有许多系列，每个系列都绘制得相当快时，这才有效。如果您只有一个大系列，那么最终还是会在drawSeries中执行类似的操作。

根据您的描述，我假设flot使用UI线程渲染图形，因此页面将保持冻结状态，直到图形渲染完成。我用动画gif向用户显示正在加载的图形数据。我不知道您是如何获得数据的，但我使用了一个ajax调用，它工作得很好。@fabriciomatté-对于一个足够大的图形来说，这可能是值得的。我曾在速度较慢的机器上看到过这样的情况，一个相当简单的图形需要10秒以上的时间才能加载，同时完全冻结了UI OK，我没想到这一点。。。您将无法访问web worker中的canvas元素，因此这将不可行，因为worker无法访问DOM。我经常看到这种缓慢的flot渲染问题，也许值得在上请求一个渲染增强。很好的建议，但无法实现。你有一个例子吗？什么是代码块a和代码块b？当我试图用failuresOpen jquery.flot.js实现时，你能把完整的代码放进去，然后寻找draw函数，看看这些代码块是什么吗。同样，这不是复制粘贴代码。这只是一般的方法；您需要完成特定案例的实现。