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

在渲染时绘制图表加载动画

1 个答案: