3

迷你图非常适合做小内联图。但是，如果它们所在的容器是隐藏的，则不能简单地将它们绘制在幕后，然后再显示出来。您必须先显示容器，然后调用该$.sparkline_display_visible方法。

这没关系，只是如果你有很多图表，它真的很慢。我有 200 多张图（最终会扩展到更多）来渲染，渲染它们大约需要 4000 毫秒，挂起浏览器。有谁知道如何通过不挂起浏览器来加快这个过程（值得怀疑）或提高感知性能？我尝试添加一个计时器，以便每个图形在渲染时一次显示一个，但是对于 200 多个图形仍然需要一段时间，而且效果有点分散用户的注意力。

谢谢

4

3 回答 3

6

您可以让插件为加载时可见的图形渲染图形，然后遍历隐藏的图形并让它以 10 个为一组进行渲染。这样浏览器就不会挂起并“预渲染”在你需要它们之前隐藏它们。

var sparklines = $('.inlinesparkline').sparkline();
var hidden = sparklines.parent().filter(':hidden').addClass('needsSparkline');

(function loopy(){
    var objs = hidden.filter(':lt(10)').removeClass('needsSparkline');
    hidden = hidden.filter('.needsSparkline');
    if (objs.length) {
        objs.css({
            'display':'',
            'visibility':'hidden'
        });
        $.sparkline_display_visible();
        objs.css({
            'display':'none',
            'visibility':''
        });
        hidden.length && setTimeout( loopy, 250 );
    }
})();
于 2010-05-18T20:46:34.007 回答
2

不使用渲染迷你图挂起浏览器的解决方案是将其称为异步（将偏移时间设置为队列）。见样本：

var sparklinesGantt = new Array();
var sprklGanttCounter = 0;
var sprklBlockQuickShow = 20; // sync elements count
var sprklBlockSofort = 15; // async elemenbts count quick show
var sprklBlockGroesse = 2; // block size for async

var renderGanttSparkline = function(obj) {
    $(obj).css('padding-right','0px').sparkline('html', {
        width: '100px',
        height: '16px',
        type: 'bullet',
        targetWidth: 2,
        performanceColor: '#d3d3d3',
        targetColor: '#ffa500',
        rangeColors: ['#d3d3d3', '#4169e1', '#d3d3d3']
    });
};
var renderGanttSparklineAtom = function() {
    var sprklCounterBlockNext = sprklGanttCounter + sprklBlockGroesse;
    for (var c = sprklGanttCounter;sprklGanttCounter<sprklCounterBlockNext;c++) {
        var obj = sparklinesGantt[sprklGanttCounter];
        sprklGanttCounter++;
        renderGanttSparkline(obj);
    }
    if (sprklGanttCounter < sparklinesGantt.length) {
        setTimeout(renderGanttSparklineAtom, 1);
    }
};
var ganttSparkline = function(id) {
    var selector = ".gantt_sprkl";
    if (id) {
        selector = "#"+id;
    }
    if ($(selector).size() < sprklBlockQuickShow) {
        renderGanttSparkline($(selector));
    } else {
        sparklinesGantt = jQuery.makeArray($(selector));
        sprklGanttCounter = 0;
        while (sprklGanttCounter<sprklBlockSofort) {
            var obj = sparklinesGantt[sprklGanttCounter];
            sprklGanttCounter++;
            renderGanttSparkline(obj);
        }   
        setTimeout(renderGanttSparklineAtom, 1);
    }
};
$(document).ready(function() {
    ganttSparkline();
});

再见

这是测试页面

于 2012-11-07T10:26:10.497 回答
1

您可以通过不同时执行所有操作来轻松避免挂起浏览器。当图形进入视口时，通常可以异步渲染图形。

有关工作示例，请参阅http://mleibman.github.com/SlickGrid/examples/example10-async-post-render.html 。

于 2010-12-16T18:13:44.723 回答