highcharts - 多数のシリーズを追加すると HighCharts がフリーズする

Question

科学的なバブル チャートを生成しようとしていますが、ダッシュボードとして表示されると想定されています。グラフはバブルを反映することを目的としており、これらのバブルは ajax 呼び出しを使用してサイズと位置が変化します。

私はそれを行うことができましたが、パフォーマンスの問題に直面しています。ajax は、バブル タイプの Series によってそれぞれ提示される平均 80 から 150 のアイテムを返します。

そのため、2つの問題に直面しています

1) リクエストごとにブラウザがフリーズします。各追加操作の間に JavaScript をスリープさせようとしましたが、問題は解決しませんでした。

2) 最初の ajax 呼び出しの後、他の呼び出しは既存の一連のファクトを変更する必要があります。既存のシリーズを取得して、変更が必要な場合にその値を変更するにはどうすればよいですか?

$(function () {

    function addPoint(chart){

        $.get("{{ main_site_url }}/dashboard/likelihood/ajax/",
            function(data) {
                $.each(data, function(k, dic) {
                    var newSeries = new Highcharts.Series();
                    newSeries.type = 'bubble';
                    newSeries.id = dic.id
                    newSeries.data = [[dic.id, dic.views, dic.likes] ];
                    setTimeout(function() {
                        chart.addSeries(newSeries);
                    }, 2000);

                });
            }, "jsonp"
        );
    }
    $(document).ready(function() {

        $('#container').highcharts({
            chart: {
                type: 'bubble',
                zoomType: 'xy',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function() {
                        // set up the updating of the chart each second
                        var chart = this;
                        setInterval(function() {
                            addPoint(chart)
                        }, 3000);
                    }
                }
            },
            title: {
                text: 'Likelihood bubbles'
            }

        });
    });

});