3

スパークラインは、小さなインライン グラフを作成するのに最適です。ただし、それらが入っているコンテナが非表示になっている場合は、単純に背後で描画してから表示することはできません。最初にコンテナーを表示してから、$.sparkline_display_visibleメソッドを呼び出す必要があります。

これは問題ありませんが、グラフがたくさんある場合は非常に遅くなります。レンダリングするグラフが 200 を少し超えています (そして、最終的にはそれ以上になる予定です)。それらすべてをレンダリングするのに約 4000 ミリ秒かかり、ブラウザーがハングします。このプロセスを高速化する方法 (疑わしい) や、ブラウザをハングさせないことで知覚されるパフォーマンスを改善する方法を知っている人はいますか? レンダリング中に各グラフが一度に 1 つずつ表示されるようにタイマーを追加しようとしましたが、それでも 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 に答える